经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » Android » 查看文章
Android ViewPager2 + Fragment + BottomNavigationView 联动
来源：cnblogs　　作者：AskaJohnny　　时间：2022/12/2 11:42:15　　对本文有异议

Android ViewPager2 + Fragment + BottomNavigationView 联动

本篇主要介绍一下 ViewPager2 + Fragment + BottomNavigationView , 上篇中把ViewPager2和Fragment 联动起来了, 本篇主要把 BottomNavigationView集成进去

2022-11-25 17.31.02

概述

BottomNavigationView 是一个底部导航控件, 现在要实现的效果就是 滑动ViewPager2 中的Fragment 并且底部BottomNavigationView 菜单部分跟着联动 同理反过来 点击BottomNavigationView 的时候 ViewPager2中的Fragment 也对应滑动, 下面来看看如何实现的吧

实现思路

1.Activity 布局文件中引入 ViewPager2 控件
2.编写menu文件 提供给BottomNavigationView 用于展示
3.Activity 布局文件中引入BottomNavigationView 控件
4.编写 Fragment 用于填充到ViewPager2中
5.编写Adapter 实现 FragmentStateAdapter
6.BottomNavigationView添加 setOnItemSelectedListener 联动ViewPager2
7.ViewPager2 添加 registerOnPageChangeCallback 联动 BottomNavigationView

代码实现

下面就来按照上面的思路一步步实现代码啦!

1.Activity 布局文件中引入 ViewPager2 控件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".ViewPager2BottomActivity">
  10.     <androidx.viewpager2.widget.ViewPager2
  11.         android:id="@+id/viewpager2bottom"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="0dp"
  14.         app:layout_constraintStart_toStartOf="parent"
  15.         app:layout_constraintTop_toTopOf="parent"
  16.         app:layout_constraintBottom_toTopOf="@id/bootomnav2"
  17.         />
  20. </androidx.constraintlayout.widget.ConstraintLayout>

2.编写menu文件 提供给BottomNavigationView 用于展示

图标icon 自己配置吧

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <menu xmlns:android="http://schemas.android.com/apk/res/android">
  4.     <item
  5.         android:title="首页"
  6.         android:id="@+id/home_item"
  7.         android:icon="@drawable/ic_baseline_home_24"
  8.         />
  10.     <item
  11.         android:title="类型"
  12.         android:id="@+id/type_item"
  13.         android:icon="@drawable/ic_baseline_merge_type_24"
  14.         />
  16.     <item
  17.         android:title="添加"
  18.         android:id="@+id/add_item"
  19.         android:icon="@drawable/ic_baseline_add_24"
  20.         />
  22.     <item
  23.         android:title="设置"
  24.         android:id="@+id/setting_item"
  25.         android:icon="@drawable/ic_baseline_settings_24"
  26.         />
  27. </menu>

3.Activity 布局文件中引入BottomNavigationView 控件

  1. package com.johnny.slzzing;
  3. import android.os.Bundle;
  5. import androidx.annotation.NonNull;
  6. import androidx.annotation.Nullable;
  7. import androidx.fragment.app.Fragment;
  9. import android.view.LayoutInflater;
  10. import android.view.View;
  11. import android.view.ViewGroup;
  12. import android.widget.TextView;
  14. import org.w3c.dom.Text;
  16. /**
  17.  * A simple {@link Fragment} subclass.
  18.  * Use the {@link Bottom2Fragment#newInstance} factory method to
  19.  * create an instance of this fragment.
  20.  */
  21. public class Bottom2Fragment extends Fragment {
  23.     // TODO: Rename parameter arguments, choose names that match
  24.     // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
  25.     private static final String ARG_PARAM1 = "param1";
  26.     private static final String ARG_PARAM2 = "param2";
  28.     // TODO: Rename and change types of parameters
  29.     private String mParam1;
  30.     private String mParam2;
  32.     public Bottom2Fragment() {
  33.         // Required empty public constructor
  34.     }
  36.     /**
  37.      * Use this factory method to create a new instance of
  38.      * this fragment using the provided parameters.
  39.      *
  40.      * @param param1 Parameter 1.
  41.      * @param param2 Parameter 2.
  42.      * @return A new instance of fragment Bottom2Fragment.
  43.      */
  44.     // TODO: Rename and change types and number of parameters
  45.     public static Bottom2Fragment newInstance(String param1, String param2) {
  46.         Bottom2Fragment fragment = new Bottom2Fragment();
  47.         Bundle args = new Bundle();
  48.         args.putString(ARG_PARAM1, param1);
  49.         args.putString(ARG_PARAM2, param2);
  50.         fragment.setArguments(args);
  51.         return fragment;
  52.     }
  54.     @Override
  55.     public void onCreate(Bundle savedInstanceState) {
  56.         super.onCreate(savedInstanceState);
  57.         if (getArguments() != null) {
  58.             mParam1 = getArguments().getString(ARG_PARAM1);
  59.             mParam2 = getArguments().getString(ARG_PARAM2);
  60.         }
  61.     }
  63.     @Override
  64.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  65.                              Bundle savedInstanceState) {
  66.         // Inflate the layout for this fragment
  67.         return inflater.inflate(R.layout.fragment_bottom2, container, false);
  68.     }
  70.     @Override
  71.     public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
  72.         super.onViewCreated(view, savedInstanceState);
  73.         TextView textView = view.findViewById(R.id.textview2);
  74.         //把动态传入的参数设置到 textView上
  75.         textView.setText(mParam1);
  76.     }
  77. }

fragment_bottom2.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".ViewPager2BottomActivity">
  10.     <androidx.viewpager2.widget.ViewPager2
  11.         android:id="@+id/viewpager2bottom"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="0dp"
  14.         app:layout_constraintStart_toStartOf="parent"
  15.         app:layout_constraintTop_toTopOf="parent"
  16.         app:layout_constraintBottom_toTopOf="@id/bootomnav2"
  17.         />
  19.     <com.google.android.material.bottomnavigation.BottomNavigationView
  20.         android:id="@+id/bootomnav2"
  21.         android:layout_width="match_parent"
  22.         android:layout_height="wrap_content"
  23.         app:layout_constraintTop_toBottomOf="@id/viewpager2bottom"
  24.         app:layout_constraintBottom_toBottomOf="parent"
  25.         app:layout_constraintStart_toStartOf="parent"
  26.         app:menu="@menu/bottom_item_menu"                                        
  27.         app:labelVisibilityMode="labeled" 
  28.         />
  29. <!-- 这个要设置 app:labelVisibilityMode="labeled"  才能显示图标文字 因为我这里超过了3个-->        
  30. </androidx.constraintlayout.widget.ConstraintLayout>

4.编写 Fragment 用于填充到ViewPager2中

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     xmlns:app="http://schemas.android.com/apk/res-auto"
  7.     tools:context=".Bottom2Fragment">
  9.     <!-- TODO: Update blank fragment layout -->
  10.     <TextView
  11.         android:id="@+id/textview2"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="match_parent"
  14.         android:text="@string/hello_blank_fragment"
  15.         app:layout_constraintStart_toStartOf="parent"
  16.         app:layout_constraintTop_toTopOf="parent"
  17.         android:gravity="center"
  18.         android:textSize="25sp"
  19.         android:textStyle="bold"
  20.         android:textColor="@color/black"
  21.         />
  23. </androidx.constraintlayout.widget.ConstraintLayout>

5.编写Adapter 实现 FragmentStateAdapter

上篇已经说过了 直接继承 FragmentStateAdapter

  1. class MyViewPager2BottomAdapter extends FragmentStateAdapter {
  3.     List<Fragment> fragmentList;
  4.     public MyViewPager2BottomAdapter(@NonNull FragmentActivity fragmentActivity, List<Fragment> list) {
  5.         super(fragmentActivity);
  6.         this.fragmentList = list;
  7.     }
  9.     @NonNull
  10.     @Override
  11.     public Fragment createFragment(int position) {
  12.         return fragmentList.get(position);
  13.     }
  15.     @Override
  16.     public int getItemCount() {
  17.         return fragmentList.size();
  18.     }
  19. }

6.BottomNavigationView添加 setOnItemSelectedListener 联动ViewPager2

bottomNavigationView.setOnItemSelectedListener核心方法

Acitivity 中实现如下代码:

  1.   protected void onCreate(Bundle savedInstanceState) {
  2.         super.onCreate(savedInstanceState);
  3.         setContentView(R.layout.activity_view_pager2_bottom);
  5.         viewPager2 = findViewById(R.id.viewpager2bottom);
  6.         bottomNavigationView = findViewById(R.id.bootomnav2);
  7.         MyViewPager2BottomAdapter myViewPager2BottomAdapter =
  8.                 new MyViewPager2BottomAdapter(this,initFragmentList());
  9.         viewPager2.setAdapter(myViewPager2BottomAdapter);
  10.         //重点 设置 bottomNavigationView 的item 的点击事件 设置viewPager2的联动
  11.         bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
  12.             @Override
  13.             public boolean onNavigationItemSelected(@NonNull MenuItem item) {
  14.                 int itemId = item.getItemId();
  15.                 switch (itemId){
  16.                     case R.id.home_item:
  17.                         viewPager2.setCurrentItem(0);
  18.                         break;
  19.                     case R.id.type_item:
  20.                         viewPager2.setCurrentItem(1);
  21.                         break;
  22.                     case R.id.add_item:
  23.                         viewPager2.setCurrentItem(2);
  24.                         break;
  25.                     case R.id.setting_item:
  26.                         viewPager2.setCurrentItem(3);
  27.                         break;
  28.                 }
  29.                 return true;
  30.             }
  31.         });
  33.     }

7.ViewPager2 添加 registerOnPageChangeCallback 联动 BottomNavigationView

  1. protected void onCreate(Bundle savedInstanceState) {
  2.     super.onCreate(savedInstanceState);
  3.     setContentView(R.layout.activity_view_pager2_bottom);
  5.     viewPager2 = findViewById(R.id.viewpager2bottom);
  6.     bottomNavigationView = findViewById(R.id.bootomnav2);
  7.     MyViewPager2BottomAdapter myViewPager2BottomAdapter =
  8.             new MyViewPager2BottomAdapter(this,initFragmentList());
  9.     viewPager2.setAdapter(myViewPager2BottomAdapter);
  11.     bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
  12.         @Override
  13.         public boolean onNavigationItemSelected(@NonNull MenuItem item) {
  14.             int itemId = item.getItemId();
  15.             switch (itemId){
  16.                 case R.id.home_item:
  17.                     viewPager2.setCurrentItem(0);
  18.                     break;
  19.                 case R.id.type_item:
  20.                     viewPager2.setCurrentItem(1);
  21.                     break;
  22.                 case R.id.add_item:
  23.                     viewPager2.setCurrentItem(2);
  24.                     break;
  25.                 case R.id.setting_item:
  26.                     viewPager2.setCurrentItem(3);
  27.                     break;
  28.             }
  29.             return true;
  30.         }
  31.     });
  32.      //重点 实现滑动的时候 联动 bottomNavigationView的selectedItem
  33.     viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
  34.         @Override
  35.         public void onPageSelected(int position) {
  36.             super.onPageSelected(position);
  37.             switch (position){
  38.                 case 0:
  39.                     bottomNavigationView.setSelectedItemId(R.id.home_item);
  40.                     break;
  41.                 case 1:
  42.                     bottomNavigationView.setSelectedItemId(R.id.type_item);
  43.                     break;
  44.                 case 2:
  45.                     bottomNavigationView.setSelectedItemId(R.id.add_item);
  46.                     break;
  47.                 case 3:
  48.                     bottomNavigationView.setSelectedItemId(R.id.setting_item);
  49.                     break;
  50.             }
  51.         }
  52.     });
  54. }

image-20221125172800393

总结

本篇主要介绍了 如何把ViewPager2 + Fragment + BottomNavigationView 集成起来并且实现ViewPager2和BottomNavigationView的双向联动

ViewPager和ViewPager2 一些区别:

  • ViewPager 的 Adapter 继承 FragmentStatePagerAdapter 而 ViewPager2 的Adapter 继承 FragmentStateAdapter
  • ViewPager 滑动监听是 viewPager.addOnPageChangeListener方法 而ViewPager2 滑动监听是 registerOnPageChangeCallback 方法

欢迎大家访问 个人博客 Johnny小屋
欢迎关注个人公众号

欢迎关注个人公众号

原文链接：https://www.cnblogs.com/askajohnny/p/16943985.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Android热门文章

  • 安卓虚拟定位实现与反作弊思路
  • Android之Activity启动流程详解（基于api28）
  • MAUI开发Android程序使PDA扫码广播消息转发至Web页面
  • android开发技巧杂谈
  • 高通CSR8675蓝牙音频芯片介绍
  • Android Studio列表用法之一：ListView图文列表显示（实例）
  • 分析Android 11.0Settings源码之主界面加载
  • 联发科MT6731 4G智能功能手机处理器芯片介绍
  • android 请求接口报错 org.apache.http.conn.HttpHostConnectException: Connection to http://192.168.1.90:9090 refused
  • GSYVideoPlayer使用记录

    • Android推荐文章

  • Jetpack Compose(7)——触摸反馈
  • 安卓开发日志采集和分析面面谈
  • Android桌面Launcher源码浅析
  • Android启动过程-万字长文(Android14)
  • Android Studio制作简单登录界面
  • FFmpeg开发笔记（九）Linux交叉编译Android的x265库
  • 在Android开发中如何使用OpenSL ES库播放解码后的pcm音频文件？
  • Android 开机流程介绍
  • 安卓端出现https请求失败的一次问题排查
  • Android 编译介绍

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号