viewpager2를 이용한 슬라이드 배너 생성

어플에서 결제창을 보면 아래와 같이 슬라이드를 통해 카드를 선택할 수 있는 기능이 있다.

framer로 목업을 설계하다가, 이걸 어떻게 할까 찾아보게 되었다.

1. 카드들을 만들기

개별 카드의 이미지를 생성하기 위한 CardFragment 생성
(카드 개수만큼 생성)

public class CardFragment_1 extends Fragment {

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

        return rootView;
    }
}

CardFragment들을 담기 위한 CardAdapter 생성
해당 코드에서는 3개의 카드 fragment들을 생성하였다

public class CardAdapter extends FragmentStateAdapter {

    public int mCount;

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

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

        if(index == 0) return new CardFragment_1();
        else if(index == 1) return new CardFragment_2();
        else return new CardFragment_3();
    }

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

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


}

2. XML에서 카드들을 넣을 공간 생성

<androidx.viewpager2.widget.ViewPager2
            android:id="@+id/card_list"
            android:layout_width="match_parent"
            android:layout_height="@dimen/frameSize"
            android:layout_marginTop="5dp"
            android:background="@color/white"
            android:clipChildren="false"
            android:clipToPadding="false">
</androidx.viewpager2.widget.ViewPager2>

3. 본격적인 작업

viewpager2와 위에서 생성한 어댑터를 적용

//viewpager2
mBanner = findViewById(R.id.card_list);

//Adapter
bannerAdapter = new CardAdapter(this, num_page);
mBanner.setAdapter(bannerAdapter);

수평방향으로 슬라이드 하기 위한 viewpager2 설정

mBanner.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

배너의 시작지점 설정

mBanner.setCurrentItem(1000);

최대 이미지 개수 설정

mBanner.setOffscreenPageLimit(2);

스크롤 할때마다의 이벤트

mBanner.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
      @Override
      public void onPageSelected(int position) {
          super.onPageSelected(position);
      }

      @Override
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
      super.onPageScrolled(position, positionOffset, positionOffsetPixels);
      	  if(positionOffsetPixels == 0) {
               mBanner.setCurrentItem(position);
          }
      }
});

카드 화면 캐러셀 레이아웃

final float pageMargin = getResources().getDimensionPixelOffset(R.dimen.pageMargin);
final float pageOffset = getResources().getDimensionPixelOffset(R.dimen.offset);

mBanner.setPageTransformer(new ViewPager2.PageTransformer() {
      @Override
      public void transformPage(@NonNull View page, float position) {
            float myOffset = position * -(2*pageOffset + pageMargin);

            if(mBanner.getOrientation() == ViewPager2.ORIENTATION_HORIZONTAL) {
                if(ViewCompat.getLayoutDirection(mBanner) == ViewCompat.LAYOUT_DIRECTION_RTL) {
                    page.setTranslationX(-myOffset);
                } else {
                    page.setTranslationX(myOffset);
                }
            } else {
                page.setTranslationY(myOffset);
            }
      }
});

4. 완성!