Android - ViewPager2, TabLayout, CircleIndicator를 연결 구현

종속성 추가

1. 'com.google.android.material:material:1.7.0' - ViewPager2, TabLayout

2. 'me.relex:circleindicator:2.1.6' - CircleIndicator

+ 데이터 바인딩 사용

implementation 'com.google.android.material:material:1.7.0'
implementation 'me.relex:circleindicator:2.1.6'

 

레이아웃 추가

종속성 추가 후, xml에 레이아웃을 간단하게 작성해 줍니다.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">
        <data class="Main">
        </data>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".MainActivity"
            android:orientation="vertical"
            android:gravity="center">
                <com.google.android.material.tabs.TabLayout
                    android:id="@+id/tab"
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    app:tabGravity="fill"
                    app:tabMode="fixed"
                    app:tabTextColor="@color/black"
                    android:background="@color/white" >
                        <com.google.android.material.tabs.TabItem
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Tab1"/>
                        <com.google.android.material.tabs.TabItem
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Tab2"/>
                        <com.google.android.material.tabs.TabItem
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Tab3"/>
                </com.google.android.material.tabs.TabLayout>
                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center">
                        <androidx.viewpager2.widget.ViewPager2
                            android:id="@+id/viewPager"
                            android:layout_width="match_parent"
                            android:layout_height="400dp"
                            android:layout_gravity="center"
                            android:clipToPadding="false"
                            android:clipChildren="false"/>
                        <me.relex.circleindicator.CircleIndicator3
                            android:id="@+id/indicator"
                            android:layout_width="match_parent"
                            android:layout_height="48dp"
                            android:layout_gravity="bottom"
                            app:ci_drawable="@drawable/red_radius"
                            app:ci_drawable_unselected="@drawable/black_radius"/>
                </FrameLayout>
        </LinearLayout>
</layout>

 

 

Fragment 생성

탭의 수의 맞게 3개의 Fragment를 생성합니다.

public class fragment_1p extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return (ViewGroup) inflater.inflate(R.layout.fragment_1p, container, false);
    }
}

public class fragment_2p extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return (ViewGroup) inflater.inflate(R.layout.fragment_2p, container, false);
    }
}

public class fragment_3p extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return (ViewGroup) inflater.inflate(R.layout.fragment_3p, container, false);
    }
}

 

MainActivity

onCreate 메소드에 다른 메소드를 호출하는 형식으로 코드를 작성했습니다.

 

autoSlider()

자동으로 3초가 지나면 다음 아이템으로 넘어가도록 하였습니다. ( 3초 설정 → setViewPager() )

private final Handler sliderHandler = new Handler();
private Runnable sliderRunnable;

private void autoSlider() {
        ViewPager2 viewPager = binding.viewPager;
        sliderRunnable = () -> viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
}

setViewPagerAdapter()

ViewPager2와 어답터 클래스를 생성하여 연결하여 Fragment 설정은 MyAdapter에서 작성했습니다.

private void setViewPagerAdapter() {
        viewPager = binding.viewPager;
        MyAdapter myAdapter = new MyAdapter(this, page);
        viewPager.setAdapter(myAdapter);
}

public class MyAdapter extends FragmentStateAdapter {
    public int count;

    public MyAdapter(FragmentActivity activity, int count) {
        super(activity);
        this.count = count;
    }
    @NonNull
    @Override
    public Fragment createFragment(int position) {
        int index = position % count;
        switch (index) {
            case 0:
                return new fragment_1p();
            case 1:
                return new fragment_2p();
            default:
                return new fragment_3p();
        }
    }
    @Override
    public int getItemCount() {
        return 7;
    }
}

setIndicator()

ViewPager2와 Indicator를 연결합니다.

private void setIndicator() {
    indicator = binding.indicator;
    indicator.setViewPager(viewPager);
    indicator.createIndicators(page, 0);
}

setTabLayout()

onTabSelected - 현재 선택 중이 아닌 탭을 선택할 시 실행되는 메소드onTabReselected - 현재 선택 중인 탭을 다시 선택할 시 실행되는 메소드

 

TabLayoutMediator를 사용하면 Adapter에서 설정한 Item 수 만큼 탭이 생성되기에, Item 수가 많을 경우에는 적합하지 않습니다.

private void setTabLayout() {
	TabLayout tabLayout = binding.tab;
	tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tab_pos = tab.getPosition();
            tabBtn(tab_pos);
        }
        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
        }
        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            tab_pos = tab.getPosition();
            tabBtn(tab_pos);
        }
    });
}

tabBtn()

탭 3개 중 눌렀을 때 해당 페이지로 넘어가게하는 메소드입니다.

private void tabBtn(int tab_pos) {
    int getViewPager = viewPager.getCurrentItem();
    switch (tab_pos) {
        case 0:
            if (getViewPager % 3 == 1) {
                viewPager.setCurrentItem(getViewPager - 1, false);
            } else if (getViewPager % 3 == 2) {
                viewPager.setCurrentItem(getViewPager - 2, false);
            }
            break;
        case 1:
            if (getViewPager % 3 == 0) {
                viewPager.setCurrentItem(getViewPager + 1, false);
            } else if (getViewPager % 3 == 2) {
                viewPager.setCurrentItem(getViewPager - 1, false);
            }
            break;
        case 2:
            if (getViewPager % 3 == 1) {
                viewPager.setCurrentItem(getViewPager + 1, false);
            } else if (getViewPager % 3 == 0) {
                viewPager.setCurrentItem(getViewPager + 2, false);
            }
            break;
    }
}

setViewPager()

스크린상 화면은 3개씩만 보여줍니다.

onPageScrolled - 슬라이드로 Fragment 화면을 보여주고 자동 넘김시간을 조절할 수 있습니다.

onPageSelected - 현재 몇번째 수의 아이템인지 알 수 있는 메소드, Indicator와 일정 페이지를 넘어가면 돌아가도록 했습니다.

private void setViewPager() {
    viewPager.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
    viewPager.setOffscreenPageLimit(3);
    viewPager.setCurrentItem(3, false);
    indicator.animatePageSelected(0);
    viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            if (positionOffsetPixels == 0) {
                viewPager.setCurrentItem(position);
                sliderHandler.removeCallbacks(sliderRunnable);
                sliderHandler.postDelayed(sliderRunnable, 3000);
            }
        }
        @Override
        public void onPageSelected(int position) {
            super.onPageSelected(position);
            indicator.animatePageSelected(position % page);
            binding.tab.selectTab(binding.tab.getTabAt(position % page));
            if (position == 6) {
                viewPager.setCurrentItem(3, false);
            } else if (position == 2) {
                viewPager.setCurrentItem(5, false);
            }
        }
    });
}

 

---

참고

많은 도움을 받았습니다.

https://developer.android.com/jetpack/androidx/releases/viewpager2

ViewPager2  |  Android 개발자  |  Android Developers