ViewPager2 로 여러 개의 뷰 슬라이드 구현

ViewPager 설명

 

ViewPager2 (뷰페이저) : 좌우 스크롤을 통하여 여러개의 화면을 전환할 수 있는 뷰

- 기존 ViewPager보다 개선된 버전

- ViewPager도 RecyclerView 기반으로 만들어진 컴포넌트이므로(데이터를 화면에 배치) Adapter구현 필수

 

PagerAdapter : ViewPager내부를 차지하게 해주는 기본 클래스

- 여러 화면에 대한 정보를 넘겨주어 각 데이터 항목에 해당하는 뷰를 생성

 

FragmentPagerAdapter:

- 프래그먼트 개수가 적거나 정해진 화면에서 사용

- 각 프래그먼트가 보여지지 않을 때도 상태를 유지하므로 많은 양의 메모리 사용

 

FragmentStateAdapter: 새로운 페이지를 보여주기 위한 어댑터 객체 

- 프래그먼트 개수가 많거나 변하는 화면에 사용

- 사용자에게 보여지지 않는 프래그먼트의 저장상태만 유지하므로 메모리 사용 최적화

- FragmentViewHolder를 뷰홀더로 가진 Adapter 클래스를 상속하고 있다

- ViewPager2에 맞는 여러 메소드들을 추가로 구현해놓은 클래스

 

Fragment(프래그먼트): Activity와 비슷한 기능을 하는 클래스로 액티비티 내에서 화면 UI의 일부를 나타냄

- onCreate() : Fragment가 생성될때 호출되는 메소드

- onCreateView() : onCreate 후에 화면을 구성할 때 호출되는 메소드

 

 

 

 

ViewPager2 만드는 법

 

1. build.gradle에 추가

dependencies{
	//viewpager를 위한 라이브러리 추가
	implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha04'
}

 

2. 기본xml에 ViewPager2 추가

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/blue4"
        android:orientation="horizontal" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

3. 화면 슬라이드에 포함할 화면xml 작성

: 나는 현재 만들고 있는 프로젝트 관련된 이름으로 6개 만들었다.

 

 

4. 레이아웃 xml과 대응되는 액티비티 클래스 구현

:Fragment를 상속받아 구현한다. 마찬가지로 아래와 같이 6개 만들었다.

public class UserNameActivity extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.setting_name, container, false);
        return rootView;
    }

}

- Fragment에서는 onCreateView메소드 안에서 기본 Activity의 onCreate메소드 안에 사용하는 코드를 적는다고 생각하면 된다.

- 각각 Fragment를 만들고 레이아웃이랑 연결까지 끝냈다.

 

 

5. FragmentStateAdapter 생성

: position에 맞는 프래그먼트 액티비티를 연결해준다.

public class FragmentAdapter extends FragmentStateAdapter {
    public int mCount; //생성할 프래그먼트 개수

    public FragmentAdapter(FragmentActivity fa, int count){
        super(fa);
        mCount = count;
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        if(position == 0) return new UserNameActivity();
        else if(position == 1) return new UserBirthActivity();
        else if(position == 2) return new UserHomeActivity();
        else if(position == 3) return new UserPeriodActivity();
        else if(position == 4) return new UserSleepActivity();
        else return new UserPhoneActivity();
    }

    @Override
    public int getItemCount() {
        return 6;
    }
}

<참고>

만약, 프래그먼트 액티비티를 반복하고 싶다면 position을 따로 변수에 담아 나눗셈을 적용해 계속 돌아가게 하면된다. 

    @Override
    public Fragment createFragment(int position) {
        int index = getPosition(position);

        if(index == 0) return new UserNameActivity();
        else if(index == 1) return new UserBirthActivity();
        else if(index == 2) return new UserHomeActivity();
        else if(index == 3) return new UserPeriodActivity();
        else if(index == 4) return new UserSleepActivity();
        else return new UserPhoneActivity();
    }

    @Override
    public int getItemCount() { //뷰페이저에 포함되는 전체 페이지 수
        return 2000;	//개수만큼 슬라이딩 반복 가능
    }

    public int getPosition(int position){
        return position % mCount;
    }

 

6. 메인 엑티비티에서 어댑터 적용

public class StartActivity extends FragmentActivity{  
    
    private ViewPager2 mPager;
    private FragmentStateAdapter pagerAdapter;
    private int num_page = 6;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.setting_start);

        mPager = findViewById(R.id.viewPager2);
        pagerAdapter = new FragmentAdapter(this, num_page);
        mPager.setAdapter(pagerAdapter);

        mPager.setCurrentItem(0);
        mPager.setOffscreenPageLimit(6);

        mPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
                if(positionOffsetPixels == 0)
                    mPager.setCurrentItem(position);
            }
        });
    }
}

 

 

결과 화면

 

0