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. 완성!
Author And Source
이 문제에 관하여(viewpager2를 이용한 슬라이드 배너 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@msdio/viewpager2를-이용한-슬라이드-배너-생성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)