ViewPager2, TabLayout

ViewPager가 ViewPager2 로 업데이트되면서 사용하는 방법이 바뀌었다.

상단에 탭 메뉴가 있어서 메뉴 클릭 또는 컨텐트를 좌우 슬라이드하며 다른 페이지로 변경한다.

- TabLayout을 쓰기 위해 Dependency에 별다르게 추가하지 않아도 기본으로 material이 들어가있다. 

'com.google.android.material:material:1.7.0'

- main activity layout에 tab layout 과 viewpager2 를 추가

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Monday" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tuesday" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Wednesday" />
    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

</LinearLayout>

- 각 탭별로 fragment xml 생성

frag_monday.xml, frag_tuesday.xml, frag_wednesday.xml 약간씩 바꿔서 확인.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="170dp"
        android:layout_marginTop="349dp"
        android:layout_marginEnd="170dp"
        android:text="Monday"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

- 각 fragment 클래스 생성. 이것도 이름만 약간씩 다르게..

public class FragMonday extends Fragment {
    private View view ;
    public static FragMonday newInstance() {
        FragMonday fragMonday = new FragMonday();
        return fragMonday;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.frag_monday, container,  false) ;
        return view ;
    }

}

- Adapter를 만들어야 한다. ViewPagerAdapter class

public class ViewPagerAdapter extends FragmentStateAdapter {
    private final List<Fragment> fragmnets = new ArrayList<Fragment>() ;
    private final List<String> titles = new ArrayList<>() ;

    public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragmnets.get(position) ;
    }

    @Override
    public int getItemCount() {
        return fragmnets.size() ;
    }

    public void addFragment(@NonNull Fragment frag, String title) {
        fragmnets.add(frag) ;
        titles.add(title) ;
    }
    @NonNull
    public String getTitle(int position) {
        return titles.get(position) ;
    }

}

 

- 이제 MainActivity에서 모두 연결시킨다.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(this);
        viewPagerAdapter.addFragment(FragMonday.newInstance(), "Monday");
        viewPagerAdapter.addFragment(FragTuesday.newInstance(), "Tuesday");
        viewPagerAdapter.addFragment(FragWednesday.newInstance(), "Wednesday");

        ViewPager2 viewPager = findViewById(R.id.viewpager);
        viewPager.setAdapter(viewPagerAdapter);

        TabLayout tabLayout = findViewById(R.id.tablayout);
        TabLayoutMediator tm = new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
            tab.setText(viewPagerAdapter.getTitle(position)) ;
        }) ;
        tm.attach();
    }
}

끝.