ViewPage2+TabLayout地表超详总结

Android洋芋

已于 2024-06-03 16:02:56 修改

阅读量1.1k

点赞数 17

分类专栏： Android控件文章标签： android

于 2024-06-01 18:02:03 首次发布

本文链接：https://blog.csdn.net/m0_74225871/article/details/139374453

版权

Android控件专栏收录该内容

6 篇文章 1 订阅

订阅专栏

ViewPage2是基于RecyclerView实现的，继承了RecyclerView的众多优点，用于实现多个页面（fragment）的滑动切换。用于构建用户界面中的多个页面，例如电商平台首页的多个页面横向滑动切换。ViewPager2可以实现左右/上下滑动手势滑动切换不同的页面。

TabLayout是用于创建标签式导航栏的UI组件。与ViewPager2联合使用，ViewPager2滑动不同页面，Tablayoutn联动对应标题或图标，同时可以实现切换页面的导航功能。TabLayout通常以标签的形式展示页面，用户能够随意切换到所需的页面。

ViewPager2+TabLayout能够为用户提供更好体验和导航方式。ViewPager2可以让用户通过滑动来浏览不同的页面，TabLayout提供清晰的标签导航，用户能够快速找到并切换到所需的页面。这种结合使用的模式在许多应用中被广泛采用。

TabLayout 重点注意属性有：

app:tabIndicatorColor = 指示器颜色属性（Indicator）即下滑线

app:tabSelectedTextColor = tab项选中时的颜色（Selected）

app:tabMode = tab模式（"scrollable"左右滑动，fixed固定）

app:tabGravity有两种属性：center和fill；center指的是居中显示，fill指的是沾满全屏。

app:tabRippleColor = 水波纹效果颜色

app:tabIconTint = 图标颜色

在xml布局中为TabLayout添加项：

ViewPage2布局属性：

  <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_page2"
        android:layout_width="match_parent"
        android:layout_height="720dp"
        app:layout_constraintTop_toBottomOf="@+id/tab_layout"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp" />

TabLayout布局属性：

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#03A9F4"
        app:tabIndicatorHeight="10dp"
        app:tabMode="scrollable"
        app:tabIconTint="#00BCD4"
        app:tabRippleColor="#FFEB3B"
        android:layout_marginTop="29dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent">
    </com.google.android.material.tabs.TabLayout>

ViewPage2与TabLayout布局：

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_page2"
        android:layout_width="match_parent"
        android:layout_height="720dp"
        app:layout_constraintTop_toBottomOf="@+id/tab_layout"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#03A9F4"
        app:tabIndicatorHeight="10dp"
        app:tabMode="scrollable"
        app:tabIconTint="#00BCD4"
        app:tabRippleColor="#FFEB3B"
        android:layout_marginTop="29dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent">
    </com.google.android.material.tabs.TabLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

准备对象、适配器、数据实例：

新建Fragment对象ModeFragment类，用于将Fragment当成一个对象：

public class ModeFragment extends Fragment {
}

新建滑动展示页面FirstFragment数据实例继承对象ModeFragment类，并新建相对应的first_activity.xml布局文件：

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

构建ViewPage2适配器，建立PageFragmentAdapter类继承FragmentStateAdapter:

public class PageFragmentAdapter extends FragmentStateAdapter{
    List<ModeFragment> fragmentList;
    public PageFragmentAdapter(@NonNull FragmentManager fragmentManager,
                               @NonNull Lifecycle lifecycle,
                               List<ModeFragment> fragmentList) {
        super(fragmentManager, lifecycle);
        this.fragmentList = fragmentList;
    }
    @NonNull
    @Override
    public Fragment createFragment(int position) {
        Fragment fragment = fragmentList.get(position);
        return fragment;
    }
    @Override
    public int getItemCount() {
        return fragmentList.size();
    }
}

在MainActivity中获取相应实例，并使用TabLayoutMediator将tabLayout+viewPage2联动：

public class MainActivity extends AppCompatActivity {
    List<ModeFragment> fragmentList = new ArrayList<>();
    List<String> TabName = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        inPage();
        ViewPager2 viewPager2 = findViewById(R.id.view_page2);
        TabLayout tabLayout = findViewById(R.id.tab_layout);
        PageFragmentAdapter adapter = new PageFragmentAdapter(getSupportFragmentManager(),getLifecycle(),fragmentList);
        viewPager2.setAdapter(adapter);
        TabLayoutMediator mediator = new TabLayoutMediator(tabLayout, viewPager2,
                new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int i) {
                tab.setText(TabName.get(i));
                
            }
        });
        mediator.attach();
    }
    private void inPage() {
        ModeFragment f1 = new FirstFragment();
        ModeFragment f2 = new SecondFragment();
        ModeFragment f3 = new ThreeFragment();
        ModeFragment f4 = new FourFragment();
        ModeFragment f5 = new FiveFragment();
        ModeFragment f6 = new SixFragment();
        fragmentList.add(f1);
        fragmentList.add(f2);
        fragmentList.add(f3);
        fragmentList.add(f4);
        fragmentList.add(f5);
        fragmentList.add(f6);
        TabName.add("推荐");
        TabName.add("景色");
        TabName.add("美景");
        TabName.add("风景");
        TabName.add("好景");
        TabName.add("前景");
    }
}

最终效果：

List<Integer> Icon = new ArrayList<>()添加Icon图标：

public class MainActivity extends AppCompatActivity {
    List<ModeFragment> fragmentList = new ArrayList<>();
    List<String> TabName = new ArrayList<>();
    List<Integer> Icon = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        inPage();
        ViewPager2 viewPager2 = findViewById(R.id.view_page2);
        TabLayout tabLayout = findViewById(R.id.tab_layout);
        PageFragmentAdapter adapter = new PageFragmentAdapter(getSupportFragmentManager(),getLifecycle(),fragmentList);
        viewPager2.setAdapter(adapter);
        TabLayoutMediator mediator = new TabLayoutMediator(tabLayout, viewPager2,
                new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int i) {
                tab.setText(TabName.get(i));
                tab.setIcon(Icon.get(i));
            }
        });
        mediator.attach();
    }
    private void inPage() {
        ModeFragment f1 = new FirstFragment();
        ModeFragment f2 = new SecondFragment();

        fragmentList.add(f1);
        fragmentList.add(f2);

        TabName.add("推荐");
        TabName.add("景色");

        Icon.add(R.drawable.s1_24dp);
        Icon.add(R.drawable.s2_24);
    }
}