[안드로이드] ViewPager2

Android – ViewPager2 사용 및 TabLayout 적용 예

색인

1. ViewPager2 및 TabLayout 개요
2. ViewPager2 및 TabLayout의 사용 및 예
   1. 그레이들 설정
   2. 각 보기 페이지에 등록할 프래그먼트 생성
   3. FragmentStateAdapter에서 상속하는 ViewPager2용 어댑터 만들기
   4. MainActivity에 ViewPager2 및 TabLayout 설정 등록
   5. 실행 결과

1. ViewPager2 및 TabLayout 개요

ViewPager2스와이프로 화면을 전환할 수 있는 기존 ViewPager의 개선된 버전입니다.보지마. 기존 ViewPager와 비교하여 ViewPager2는 기능 향상 및 수직 페이징 등의 장점이 있습니다. ViewPager2를 사용해야 하는 주된 이유는 Google에서 더 이상 기존 ViewPager의 개발을 지원하지 않으며 ViewPager2 사용을 권장하기 때문입니다.

탭레이아웃ViewPager2를 적용하여 사용하면 스와이프로 화면 전환이 가능할 뿐만 아니라 탭으로 화면전환이것은 사용자가 현재 보고 있는 페이지를 직관적으로 확인합니다.

2. ViewPager2 및 TabLayout 사용 및 예제

1) 그래들 설정

ViewPager2를 사용하려면 Gradle에 다음을 추가합니다.

dependencies {
    ...
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
}

2) 각 보기 페이지에 등록할 프래그먼트 생성

예제에서는 3개의 프래그먼트와 3개의 프래그먼트 레이아웃을 생성하여 3개의 보기 페이지를 등록합니다.

소스 코드 FirstFragment.java, fragment_first.xml, SecondFragment.java, fragment_second.xml 및 ThirdFragment.java와 마찬가지로 fragment_third.xml이 생성됩니다.

• FirstFragment.java

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

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }
}

• fragment_first.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".FirstFragment">
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:background="#E53935"
        android:text="First Fragment"
        android:textSize="40dp"/>
</LinearLayout>

3) FragmentStateAdapter를 상속하는 ViewPager2용 어댑터를 만듭니다.

createFragment( ) 메서드는 각 화면에 표시할 프래그먼트를 생성하고 반환하며, getItemCount( ) 메서드는 화면에 표시할 페이지 수를 반환합니다.

• ViewPager2Adapter.java

public class ViewPager2Adapter extends FragmentStateAdapter {
    
    public ViewPager2Adapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
        super(fragmentManager, lifecycle);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        switch (position) {
            case 0:
                return new FirstFragment();
            case 1:
                return new SecondFragment();
            case 2:
                return new ThirdFragment();
            default:
                return null;
        }
    }

    @Override
    public int getItemCount() {
        return 3;       // 페이지 수
    }
}

4) MainActivity에 ViewPager2 및 TabLayout 설정 등록

1. 먼저 MainActivity 레이아웃에서 ViewPager2와 TabLayout 화면을 구성합니다.
2. MainActivity에서 ViewPager2Adapter 개체를 만들고 ViewPager2에 연결합니다.
3. TabLayout을 사용하려면 MainAcitivity에 TabLayoutMediator( ) 객체를 생성하고 TabLayout을 ViewPager2에 연결합니다.

• MainActivity.java

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ViewPager2Adapter viewPager2Adapter 
        		= new ViewPager2Adapter(getSupportFragmentManager(), getLifecycle());
        ViewPager2 viewPager2 = findViewById(R.id.pager);
        viewPager2.setAdapter(viewPager2Adapter);

        //=== TabLayout기능 추가 부분 ============================================
        TabLayout tabLayout = findViewById(R.id.tabLayout);
        new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                tab.setText("Tab " + (position + 1));
            }
        }).attach();
        //========================================================================
    }
}

• activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

5) 실행 결과