• ViewPage2+TabLayout地表超详总结


           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布局属性:

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

    TabLayout布局属性:

    1. <com.google.android.material.tabs.TabLayout
    2. android:id="@+id/tab_layout"
    3. android:layout_width="match_parent"
    4. android:layout_height="wrap_content"
    5. app:tabIndicatorColor="#03A9F4"
    6. app:tabIndicatorHeight="10dp"
    7. app:tabMode="scrollable"
    8. app:tabIconTint="#00BCD4"
    9. app:tabRippleColor="#FFEB3B"
    10. android:layout_marginTop="29dp"
    11. app:layout_constraintTop_toTopOf="parent"
    12. app:layout_constraintStart_toStartOf="parent">
    13. com.google.android.material.tabs.TabLayout>

    ViewPage2与TabLayout布局:

    1. "1.0" encoding="utf-8"?>
    2. xmlns:android="http://schemas.android.com/apk/res/android"
    3. xmlns:app="http://schemas.android.com/apk/res-auto"
    4. xmlns:tools="http://schemas.android.com/tools"
    5. android:id="@+id/main"
    6. android:layout_width="match_parent"
    7. android:layout_height="match_parent"
    8. tools:context=".MainActivity">
    9. android:id="@+id/view_page2"
    10. android:layout_width="match_parent"
    11. android:layout_height="720dp"
    12. app:layout_constraintTop_toBottomOf="@+id/tab_layout"
    13. tools:layout_editor_absoluteX="1dp"
    14. tools:layout_editor_absoluteY="1dp" />
    15. android:id="@+id/tab_layout"
    16. android:layout_width="match_parent"
    17. android:layout_height="wrap_content"
    18. app:tabIndicatorColor="#03A9F4"
    19. app:tabIndicatorHeight="10dp"
    20. app:tabMode="scrollable"
    21. app:tabIconTint="#00BCD4"
    22. app:tabRippleColor="#FFEB3B"
    23. android:layout_marginTop="29dp"
    24. app:layout_constraintTop_toTopOf="parent"
    25. app:layout_constraintStart_toStartOf="parent">

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

    新建Fragment对象ModeFragment类,用于将Fragment当成一个对象:

    1. public class ModeFragment extends Fragment {
    2. }

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

    1. public class FirstFragment extends ModeFragment{
    2. @Nullable
    3. @Override
    4. public View onCreateView(@NonNull LayoutInflater inflater,
    5. @Nullable ViewGroup container,
    6. @Nullable Bundle savedInstanceState) {
    7. return inflater.inflate(R.layout.first_activity,container,false);
    8. }
    9. }

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

    1. public class PageFragmentAdapter extends FragmentStateAdapter{
    2. List fragmentList;
    3. public PageFragmentAdapter(@NonNull FragmentManager fragmentManager,
    4. @NonNull Lifecycle lifecycle,
    5. List fragmentList) {
    6. super(fragmentManager, lifecycle);
    7. this.fragmentList = fragmentList;
    8. }
    9. @NonNull
    10. @Override
    11. public Fragment createFragment(int position) {
    12. Fragment fragment = fragmentList.get(position);
    13. return fragment;
    14. }
    15. @Override
    16. public int getItemCount() {
    17. return fragmentList.size();
    18. }
    19. }

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

    1. public class MainActivity extends AppCompatActivity {
    2. List fragmentList = new ArrayList<>();
    3. List TabName = new ArrayList<>();
    4. @Override
    5. protected void onCreate(Bundle savedInstanceState) {
    6. super.onCreate(savedInstanceState);
    7. EdgeToEdge.enable(this);
    8. setContentView(R.layout.activity_main);
    9. inPage();
    10. ViewPager2 viewPager2 = findViewById(R.id.view_page2);
    11. TabLayout tabLayout = findViewById(R.id.tab_layout);
    12. PageFragmentAdapter adapter = new PageFragmentAdapter(getSupportFragmentManager(),getLifecycle(),fragmentList);
    13. viewPager2.setAdapter(adapter);
    14. TabLayoutMediator mediator = new TabLayoutMediator(tabLayout, viewPager2,
    15. new TabLayoutMediator.TabConfigurationStrategy() {
    16. @Override
    17. public void onConfigureTab(@NonNull TabLayout.Tab tab, int i) {
    18. tab.setText(TabName.get(i));
    19. }
    20. });
    21. mediator.attach();
    22. }
    23. private void inPage() {
    24. ModeFragment f1 = new FirstFragment();
    25. ModeFragment f2 = new SecondFragment();
    26. ModeFragment f3 = new ThreeFragment();
    27. ModeFragment f4 = new FourFragment();
    28. ModeFragment f5 = new FiveFragment();
    29. ModeFragment f6 = new SixFragment();
    30. fragmentList.add(f1);
    31. fragmentList.add(f2);
    32. fragmentList.add(f3);
    33. fragmentList.add(f4);
    34. fragmentList.add(f5);
    35. fragmentList.add(f6);
    36. TabName.add("推荐");
    37. TabName.add("景色");
    38. TabName.add("美景");
    39. TabName.add("风景");
    40. TabName.add("好景");
    41. TabName.add("前景");
    42. }
    43. }

    最终效果:

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

    1. public class MainActivity extends AppCompatActivity {
    2. List fragmentList = new ArrayList<>();
    3. List TabName = new ArrayList<>();
    4. List Icon = new ArrayList<>();
    5. @Override
    6. protected void onCreate(Bundle savedInstanceState) {
    7. super.onCreate(savedInstanceState);
    8. EdgeToEdge.enable(this);
    9. setContentView(R.layout.activity_main);
    10. inPage();
    11. ViewPager2 viewPager2 = findViewById(R.id.view_page2);
    12. TabLayout tabLayout = findViewById(R.id.tab_layout);
    13. PageFragmentAdapter adapter = new PageFragmentAdapter(getSupportFragmentManager(),getLifecycle(),fragmentList);
    14. viewPager2.setAdapter(adapter);
    15. TabLayoutMediator mediator = new TabLayoutMediator(tabLayout, viewPager2,
    16. new TabLayoutMediator.TabConfigurationStrategy() {
    17. @Override
    18. public void onConfigureTab(@NonNull TabLayout.Tab tab, int i) {
    19. tab.setText(TabName.get(i));
    20. tab.setIcon(Icon.get(i));
    21. }
    22. });
    23. mediator.attach();
    24. }
    25. private void inPage() {
    26. ModeFragment f1 = new FirstFragment();
    27. ModeFragment f2 = new SecondFragment();
    28. fragmentList.add(f1);
    29. fragmentList.add(f2);
    30. TabName.add("推荐");
    31. TabName.add("景色");
    32. Icon.add(R.drawable.s1_24dp);
    33. Icon.add(R.drawable.s2_24);
    34. }
    35. }

    最终效果:

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

  • 相关阅读:
    自动化测试的度量指标
    Flask 部署项目 Nginx + Gunicorn + Flask
    ASM之ClassWriter
    .bat批处理命令处理文件
    Redis:报错Creating Server TCP listening socket *:6379: bind: No error
    操作系统启动过程
    数据结构(11)图的遍历,DFS、BFS的JAVA实现
    一文读懂Apache Geode缓存中间件
    Python 中的 round() 函数:实现精确的数值舍入操作
    Kuboard - Kubernetes 多集群管理界面
  • 原文地址:https://blog.csdn.net/m0_74225871/article/details/139374453