안드로이드 ViewPager2 사용법 및 슬라이드 애니메이션 변경

공감 및 댓글은 포스팅 하는데  아주아주 큰 힘이 됩니다!! 포스팅 내용이 찾아주신 분들께  도움이 되길 바라며 더 깔끔하고 좋은 포스팅을  만들어 나가겠습니다^^

이번 포스팅에서는 ViewPager2 사용법 

및 슬라이드 애니메이션 적용 방법에 대해서 알아봅니다.

#1. ViewPager2 의존성 추가하기

- 기본적으로 androidX에서 동작합니다.

implementation 'androidx.appcompat:appcompat:1.1.0'

implementation "androidx.viewpager2:viewpager2:1.0.0"

위 두가지 의존성을 추가해주세요.

#2. xml에 선언하기

 사용하고자 하는 layout.xml에 아래처럼 선언하시면 됩니다.

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/imagePager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

#3. adapter 만들기

 - 기존 ViewPager에서는

FragmentStatePagerAdapter를 사용했는데,

 ViewPager2 에서는 FragmentStateAdapter를 사용합니다.

public class EducationFragmentAdapter extends FragmentStateAdapter {


    EducationFragmentAdapter(FragmentActivity fm) {
        super(fm);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {

        Fragment fragment = new EducationFragment();
        return fragment;
    }

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

}

#4. ViewPager 안에서 동작할 Fragment 선언하기

 - 이 부분은 적절히 알아서 선언하시면 됩니다. 저의 경우

 ## Activity

public class EducationFragment extends Fragment {
 
    private FragmentBloodEducationBinding mBinding;
    private int pos;
    private String uri;
    private String[] images;
 
    @Override
    public void setArguments(@Nullable Bundle args) {
        assert args != null;
        pos = args.getInt("pos");
        uri = args.getString("uri");
        images = args.getStringArray("images");
    }
 
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mBinding = DataBindingUtil.inflate(LayoutInflater.from(getContext()), R.layout.fragment_blood_education, container, false);
        return mBinding.getRoot();
    }
 
    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
 
        Glide.with(getActivity()).load(uri + images[pos] + ".png").thumbnail(0.5f).into(mBinding.eduImageView);
    }
}
 

 ## xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
 
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            android:id="@+id/eduImageView"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

요렇게 만들었습니다.

#5. 사용하기

binding.imagePager.setAdapter(new EducationFragmentAdapter(this);

 그리고 기존 ViewPager 에서는 

addOnPageChangeListener라는 걸 사용해서

페이지 이동 시 이벤트를 주었는데 ViewPager2 에서는

registerOnPageChangeCallback을 사용하고 액티비티 종료시 

unregisterOnPageChangerCallback을 주면 됩니다.

private ViewPager2.OnPageChangeCallback callback = new ViewPager2.OnPageChangeCallback() {
    @Override
    public void onPageSelected(int pos) {
        super.onPageSelected(pos);
        setImgAndText(pos, binding.currentPageTxtView);
        Log.e("pso", "current =" + pos);
        if (pos == images.length - 1) {
            binding.closeBtn.setVisibility(View.VISIBLE);
            showNotSelectPopup();
        } else {
            binding.closeBtn.setVisibility(View.GONE);
        }
    }
};

binding.imagePager.registerOnPageChangeCallback(callback);

@Override
public void onBackPressed() {
    binding.imagePager.unregisterOnPageChangeCallback(callback);
    finish();
}

그리고 기본적으로 slide 애니메이션이 적용되어 있습니다.

애니메이션을 변경하고 싶을 경우 아래처럼 

ViewPager2.PageTransformer 인터페이스를 구현하는 클래스를 

만들어서 사용하면 됩니다.

public static class DepthPageTransformer implements ViewPager2.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0f);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            view.setAlpha(1f);
            view.setTranslationX(0f);
            view.setScaleX(1f);
            view.setScaleY(1f);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(1 - position);

            // Counteract the default slide transition
            view.setTranslationX(pageWidth * -position);

            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0f);
        }
    }
}

#끝