ViewPage2+TabLayout地表超详总结_android tablayout viewpager2

作者：秋刀鱼在做梦 | 2024-07-02 07:23:31

踩

android tablayout viewpager2

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);
    }
}

最终效果：

注：文章内容属本人所写理解而表达，非官方说法，仅当本人笔记。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/778945