TabLayout+ViewPager2的簡單使用詳解

更新時(shí)間：2022年09月05日 15:36:26 作者：東東旭huster

這篇文章主要為大家詳細(xì)介紹了TabLayout+ViewPager2的簡單使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了TabLayout+ViewPager2簡單使用的實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

學(xué)習(xí)之前我們先看一下顯示的效果

這里顯示的底部導(dǎo)航欄，如果想實(shí)現(xiàn)的頂部導(dǎo)航欄，只需要調(diào)整一下TabLayout的位置即可。

1、導(dǎo)入依賴

使用ViewPager2之前需要先導(dǎo)入依賴，這里的依賴可能不是最新的，可以自己查找最新的版本。TabLayout不需要導(dǎo)入。

implementation "androidx.viewpager2:viewpager2:1.0.0"

2、布局

<androidx.viewpager2.widget.ViewPager2
? ? android:layout_width="match_parent"
? ? android:layout_height="wrap_content"
? ? app:layout_constraintTop_toBottomOf="@id/tablayout"
? ? android:id="@+id/viewpager2"/>

<com.google.android.material.tabs.TabLayout
? ? android:layout_width="match_parent"
? ? android:layout_height="30dp"
? ? app:layout_constraintTop_toTopOf="parent"
? ? app:tabTextAppearance="@style/tabLayoutTheme"
? ? android:id="@+id/tablayout"
? ? app:tabMode="fixed">

</com.google.android.material.tabs.TabLayout>

我們只需要控制TabLayout的布局位置，就可以實(shí)現(xiàn)它是底部導(dǎo)航還是頂部導(dǎo)航了，需要注意一下viewPager和TabLayout的布局，不要讓它們產(chǎn)生重疊。

3、使用方法

viewPager需要為其提供一個(gè)適配器，通過setAdapter()方法添加適配器，這個(gè)適配器它必須繼承自FragmentStateAdapter, 這里一定要用寫一個(gè)類去繼承FragmentStateAdapter，否則會(huì)出現(xiàn)奇怪的錯(cuò)誤, 適配器中主要完成頁面的設(shè)置。

class ViewPager2Adapter extends FragmentStateAdapter{

? ? public ViewPager2Adapter(@NonNull FragmentActivity fragmentActivity) {
? ? ? ? super(fragmentActivity);
? ? }

? ? @NonNull
? ? @Override
? ? public Fragment createFragment(int position) {
? ? ? ? // 每個(gè)頁面對(duì)應(yīng)的fragment
? ? ? ? switch (position){
? ? ? ? ?? ?// 這里我隨便寫了兩個(gè)Fragment
? ? ? ? ? ? case 0:return new Fragment1();
? ? ? ? ? ? case 1:return new Fragment2();
? ? ? ? }

? ? ? ? return null;
? ? }

? ? @Override
? ? public int getItemCount() {
? ? ? ? // 有幾個(gè)頁面就返回幾
? ? ? ? return 2;
? ? }
}

創(chuàng)建一個(gè)適配器實(shí)例設(shè)置為ViewPager2對(duì)象。
代碼中為TabLayout添加Tab，如果在布局中已經(jīng)添加就不需要了

for (int i = 0; i < 2; i++) {
? ? tabLayout.addTab(tabLayout.newTab());
}

上面需要特別注意，是tabLayout.newTab().

最后使用TabLayoutMeditor將TabLayout和ViewPager組合起來。

TabLayoutMediator mediator = new TabLayoutMediator(binding.tabLayout, binding.viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
? ? @Override
? ? public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
? ? ? ? tab.setText(tabs[position]);
? ? }
});
mediator.attach();

到這里，基本上就可以進(jìn)行展示了，可以進(jìn)行滑動(dòng)切換和點(diǎn)擊導(dǎo)航欄切換，下面繼續(xù)看看其他功能。

5、tabLayout添加一個(gè)監(jiān)聽器

監(jiān)聽各個(gè)頁面之間的切換以做出不同的處理。

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
?? ?// 頁面被選中
? ? @Override
? ? public void onTabSelected(TabLayout.Tab tab) {
? ? ? ? Log.d(TAG, "onTabSelected: "+tab.getText());
? ? }
?? ?// 頁面切換到其他
? ? @Override
? ? public void onTabUnselected(TabLayout.Tab tab) {
? ? ? ? Log.d(TAG, "onTabUnselected: "+tab.getText());
? ? }

? ? @Override
? ? public void onTabReselected(TabLayout.Tab tab) {

? ? }
});

6、自定義tablayout的顯示樣式

很多時(shí)候我們會(huì)覺得tabLayout導(dǎo)航欄只能顯示文字太單調(diào)了，因此想要為其添加其他樣式，比如添加圖+文字的顯示效果，步驟如下：

1、自定義一個(gè)底部導(dǎo)航的顯示樣式，比如圖片+文字

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
? ? android:layout_width="match_parent"
? ? android:layout_height="match_parent"
? ? xmlns:app="http://schemas.android.com/apk/res-auto">

? ? <ImageView
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:id="@+id/icon"
? ? ? ? app:layout_constraintStart_toStartOf="parent"
? ? ? ? app:layout_constraintEnd_toEndOf="parent"
? ? ? ? app:layout_constraintTop_toTopOf="parent"/>

? ? <TextView
? ? ? ? android:layout_width="wrap_content"
? ? ? ? android:layout_height="wrap_content"
? ? ? ? android:id="@+id/text"
? ? ? ? app:layout_constraintStart_toStartOf="parent"
? ? ? ? app:layout_constraintEnd_toEndOf="parent"
? ? ? ? app:layout_constraintTop_toBottomOf="@id/icon"/>

</androidx.constraintlayout.widget.ConstraintLayout>

2、我們再定義一個(gè)方法，該方法可以根據(jù)不同的位置構(gòu)造返回不同的底部顯示樣式

private View getViewAtI(int position){
? ? View view = getLayoutInflater().inflate(R.layout.bottom_layout, null, false);
? ? ImageView ?imageView = view.findViewById(R.id.icon);
? ? TextView textView = view.findViewById(R.id.text);
? ? // 這個(gè)icons就是一個(gè)簡單的圖片保存的數(shù)組，保存如R.drawable.touxiang
? ? imageView.setImageResource(icons[position]);
? ? textView.setText(tabs[position]);

? ? return view;
}

3、在TabLayoutMediator中為每個(gè)tab設(shè)置不同的CustomView, 就能顯示底部視圖了。

TabLayoutMediator mediator = new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
? ? @Override
? ? public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
? ? ? ? //tab.setText(tabs[position]);
? ? ? ? tab.setCustomView(getViewAtI(position));
? ? }
});

mediator.attach();

TabLayout還有許多的屬性可以設(shè)置，這里就不一一的展示了。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: