[Android] TabLayout에 ViewPager2 사용하기

TabLayout에 프래그먼트 컨테이너로써 FrameLayout을 사용한다면, 사용자가 직접 스와이프를 할 수 없고 프래그먼트 간의 네이게이션이 더 복잡해질 수 있다.

 

ViewPager

- 내장된  스와이프 네비게이션

- 페이지 인디케이터  : 현재 페이지 위치를 시각적으로 표시

- 자동화된 프래그먼트 관리 : FragmentPagerAdapter 또는 FragmentStateAdapter와 함께 사용

- 효율적인 메모리 관리 : RecyclerView 기반

 

 

1. Gradle 설정

dependencies {
    // 기존 종속성들...
    implementation ("androidx.viewpager2:viewpager2:1.0.0")
}

 

2. XML 레이아웃 작성

Viewpager를 TapLayout 아래에 작성합니다. 

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabMain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"/>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/tabMain"
        app:layout_constraintBottom_toBottomOf="parent"/>

 

3. 어댑터 생성

탭의 개수만큼 Fragment를 생성합니다. ( java 파일 만들어야 함)

private class ScreenSlidePagerAdapter extends FragmentStateAdapter {
    public ScreenSlidePagerAdapter(FragmentActivity fa) {
        super(fa);
    }

    @Override
    public Fragment createFragment(int position) {
        switch (position) {
            case 0:
                return new Fragment1();
            case 1:
                return new Fragment2();
            case 2:
                return new Fragment3();
            default:
                return null; // 이 경우가 발생하지 않도록 주의
        }
    }

    @Override
    public int getItemCount() {
        return 3; // 탭의 총 개수
    }
}

 

4.  ViewPager2와 TabLayout 연동

// MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);
    ViewPager2 viewPager = findViewById(R.id.view_pager);
    viewPager.setAdapter(new ScreenSlidePagerAdapter(this));

    TabLayout tabs = findViewById(R.id.tabMain);
    new TabLayoutMediator(tabs, viewPager, (tab, position) -> {
        switch (position) {
            case 0:
                tab.setText("뉴스레터");
                break;
            case 1:
                tab.setText("신문보기");
                break;
            case 2:
                tab.setText("해외뉴스");
                break;
            default:
                tab.setText("탭 " + (position + 1));
                break;
        }
    }).attach();
}

 

 

결과

 

 

※ 피드백 환영합니다