Android studio中使用ViewPager和BottomNavigationView实现底部导航栏和碎片的同步切换

2023-11-01

前言

通过几次的踩雷和摸索,完成了以上的操作,本教程写的详细全面,包教包会,对新手有好,看了不会的联系我,我倒立洗头给你看。

1.需要了解的一些知识

所需控件:

fragment

作为Android中最常用的控件,它有自己的声明周期,可以粗略地等比为能够分屏的activity,但是和activity有区别,fragment有自己的生命周期和接收、处理用户的事件。Fragment必须是依存与Activity而存在的。所以他们可以有自己的xml文件(布局文件)和class文件(处理逻辑的java类文件)。

Viewpager

ViewPager是可以实现多个界面的左右滑动的控件。ViewPager最典型的应用场景主要包 括引导页导航,轮转广告和页面菜单。其中有两个ViewPager适配器需要使用:

  • FragmentStatePagerAdapter:

    它是 PagerAdapter 的子类,用于处理多个碎片,并支持动态加载和销毁碎片来节省内存。适用于需要处理大量页面、支持动态刷新以及动态添加或删除页面的场景。例如图片浏览器、新闻阅读器等。

  • FragmentPagerAdapter:

    它也 是 PagerAdapter 的子类,与 FragmentStatePagerAdapter 类似,但有一些不同之处。与 FragmentStatePagerAdapter 相比,FragmentPagerAdapter 更适用于静态、数量有限的页面集合,并提供更好的滑动性能和用户体验,因为它不会销毁已经创建的碎片实例。

我们接下来要使用的是FragmentPagerAdapter。

java语法结构

List<>

List<> 是 Java 中的泛型类,一种动态数组,用于表示一个列表,可以存储任意类型的元素。在使用 List<> 时,需要在尖括号中指定具体的类型参数。可以实现增,删,替换等操作。举个例子

 List<String> stringList = new ArrayList<>();
 stringList.add("Hello");
 stringList.add("World");
 ​
 List<Integer> integerList = new ArrayList<>();
 integerList.add(1);
 integerList.add(2);
 ​
 for (String str : stringList) {
     System.out.println(str);
 }
 ​
 for (int num : integerList) {
     System.out.println(num);
 }

  ​首先,创建了一个 List<String> 类型的列表 stringList,并向其中添加两个字符串元素 "Hello" 和 "World"。

接下来,创建了一个 List<Integer> 类型的列表 integerList,并向其中添加两个整数元素 1 和 2。

然后,通过使用增强型 for 循环,分别对 stringListintegerList 进行迭代遍历,将列表中的元素逐个取出,并分别打印输出。

在第一个循环中,每次迭代将当前的字符串元素赋值给变量 str,然后将其输出。因此,在循环的第一次迭代中,会输出 "Hello",在第二次迭代中,会输出 "World"。

在第二个循环中,每次迭代将当前的整数元素赋值给变量 num,然后将其输出。因此,在循环的第一次迭代中,会输出 1,第二次迭代中,会输出 2。

所以最终的输出结果是:

 Hello
 World
 1
 2

2.准备工作

1.导入所需包

在build.gradle文件中引入implementation 'com.google.android.material:material:1.9.0'

当导入进去后,可能会有版本不一样的情况,如果报黄,点击alt+enter键,会出现修改版本的选项。当引入完以后,就可以点击sync进行数据操作同步。如果已经有了这个包就可以不用管他了。

2.创建三个fragment

根据我上述截图来操作,创建三个名字分别为homeFragment,moreFragment,userFragment。其对应布局文件名字为fragment_home,fragment_more,fragment_user。

创建好后三个fragment的class里面的暂时先不用管

3.创建menu

BottomNavigationView 可以来创建底部导航栏,而菜单项组合menu就在其中。

先在res文件夹中创建一个menu文件夹

然后创建一个名为menu的xml文件,将下列代码写进文件中:

 <?xml version="1.0" encoding="utf-8"?>
 <menu xmlns:android="http://schemas.android.com/apk/res/android">
 ​
     <item
         android:id="@+id/item_home"
         android:icon="@drawable/home"
         android:title="@string/home"
         />
 ​
     <item
         android:id="@+id/item_more"
         android:icon="@drawable/more"
         android:title="@string/more"
         />
 ​
     <item
         android:id="@+id/item_user"
         android:icon="@drawable/user"
         android:title="@string/user"
         />
 ​
 </menu>
 

其中@drawable/user是drawable下的user.png,一张图片,由 android:icon引用。同理"@string/user"是 res/values/strings.xml文件里的<string name="user">用户</string>代码,这样,底部导航栏菜单项的标题就会显示为 "用户"。这里推荐使用阿里矢量图标库。drawable文件是用于存放图片的,把图复制粘贴进去就行。其中名字不能为中文等字符,不然会报错。

 

4.编写ViewPagerAdapter继承FragmentPagerAdapter

完成底部导航栏的切换我们需要FragmentPagerAdapter的帮助,所以创建并编写ViewPagerAdapter类(这是我取的名字,想取什么名字都行)继承FragmentPagerAdapter。

代码如下:

package com.example.bnvone.Adapter;
 ​
 import androidx.annotation.NonNull;
 import androidx.fragment.app.Fragment;
 import androidx.fragment.app.FragmentManager;
 import androidx.fragment.app.FragmentPagerAdapter;
 ​
 import java.util.List;
 ​
 public class ViewPagerAdapter extends FragmentPagerAdapter {
     private List<Fragment> mfragmentList;
     public ViewPagerAdapter(@NonNull FragmentManager fm,List<Fragment> fragmentList) {
         super(fm);//调用父类构造函数,传递FragmentManager 参数
                   //用于确保适配器类内部具有有效的 FragmentManager 实例,从而顺利完成片段管理和展示的任务
         this.mfragmentList = fragmentList;
 ​
     }//设置 ViewPager 的适配器。
 ​
 ​
     @NonNull
     @Override
     public Fragment getItem(int position) {
         return  mfragmentList == null ? null: mfragmentList.get(position);
     }// mfragmentList == null ? null 判断mfragmentList是否为空,如果不为null,执行:后面的代码。
      //mfragmentList.get(position)获得第position个的fragment对象返回
 ​
     @Override
     public int getCount() {
         return  mfragmentList == null ? null: mfragmentList.size();
         // 返回片段对象的数量,即mfragmentList列表中的元素个数
     }
 }
 
 ​

这个适配器的作用是将 Fragment 列表与 ViewPager 关联起来,以便在 ViewPager 中展示相应的内容。通过重写 getItemgetCount 方法,适配器可以根据位置返回对应的 Fragment 对象,并在 ViewPager 中正确显示。其中重写的方法我们会在MainActivity中调用。

前期准备的差不多了,可以开始实现了。

3.实现底部导航栏同步切换操作

1.创建MainActivity

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout 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:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
     >
 ​
     <androidx.viewpager.widget.ViewPager
         android:id="@+id/vp"
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_weight="1"
      />
 ​
 ​
     <com.google.android.material.bottomnavigation.BottomNavigationView
         android:id="@+id/nav_bottom"
         android:layout_width="match_parent"
         android:layout_height="60dp"
         android:background="#ffffff"
         app:menu="@menu/menu_nav"
         />
 ​
 ​
 ​
 </LinearLayout>
 ​

使用的线性布局,也可以使用其他的。出现vp <androidx.viewpager.widget.ViewPager>: No speakable text present问题不大,可以运行。得到的样子是这样的

 

2.编写MainActivity

 package com.example.bnvone;
 ​
 import androidx.annotation.NonNull;
 import androidx.appcompat.app.AppCompatActivity;
 import androidx.fragment.app.Fragment;
 import androidx.viewpager.widget.ViewPager;
 ​
 import android.annotation.SuppressLint;
 import android.os.Bundle;
 import android.view.MenuItem;
 ​
 import com.example.bnvone.Adapter.ViewPagerAdapter;
 import com.example.bnvone.Fragment.homeFragment;
 import com.example.bnvone.Fragment.moreFragment;
 import com.example.bnvone.Fragment.userFragment;
 ​
 import com.google.android.material.bottomnavigation.BottomNavigationView;
 ​
 import java.util.ArrayList;
 import java.util.List;
 ​
 public class MainActivity extends AppCompatActivity {
     private BottomNavigationView navigationView;
     private ViewPager viewPager;
 ​
 ​
     @Override
     protected void onCreate(Bundle savedInstanceState) {
 ​
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
 ​
         navigationView = findViewById(R.id.nav_bottom);
         viewPager = findViewById(R.id.vp);
 ​
         homeFragment homeFragment= new homeFragment();
 ​
         List<Fragment> fragments = new ArrayList<>();
         fragments.add(new homeFragment()); //新建一个homeFragment对象将这个对象加入到数组fragments中
         fragments.add(new moreFragment());
         fragments.add(new userFragment());
 ​
         ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(),fragments);
         //创建对象并通过构造函数初始化,该适配器可以知道要显示哪些片段。
         viewPager.setAdapter(viewPagerAdapter);
         //将前面创建的 viewPagerAdapter 适配器设置给 viewPager 视图组件,以便在 ViewPager 中显示相应的页面。
         //底部导航栏监听事件
         navigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
             @SuppressLint("NonConstantResourceId")
             @Override
             public boolean onNavigationItemSelected(@NonNull MenuItem item) {
             //根据菜单ID显示页面
                 switch (item.getItemId()) {//监听事件中,点击菜单立马执行item.getItemId()方法
                     //item.getItemId() 方法用于获取选中的 MenuItem 的唯一标识符(ID)
                     case R.id.item_home://R.id.xxx是整数类型。
                         viewPager.setCurrentItem(0);
                         // 将 ViewPager 的当前页面显示成索引为 0 的页面
                         return true;
                     case R.id.item_more:
                         viewPager.setCurrentItem(1);
                         return true;
                     case R.id.item_user:
                         viewPager.setCurrentItem(2);
                         return true;
                 }
                 return false;
             }
 ​
         });
 ​
         // 添加页面切换的监听器,根据页面切换实现菜单切换
     viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
         @Override
         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 ​
         }
 ​
         @Override
         public void onPageSelected(int position) {
         switch (position){  // 根据页面位置更新导航栏的选中状态
             case 0:
                 navigationView.setSelectedItemId(R.id.item_home);
                 //将导航栏中的选中项设置为 R.id.item_home
                 break;
             case 1:
                 navigationView.setSelectedItemId(R.id.item_more);
                 break;
             case 2:
                 navigationView.setSelectedItemId(R.id.item_user);
                 break;
         }
      }
 ​
         @Override
         public void onPageScrollStateChanged(int state) {}
     });//通过使用页面切换监听器,
         // 我们可以根据页面切换的情况来更改导航栏的选中状态,
         // 从而实现页面切换时导航栏菜单的同步切换效果。
 ​
     }
 }
 ​
 

实现了底部导航栏与 ViewPager 的联动效果。底部导航栏通过监听选中项的改变,然后根据选中项对应的页面索引,调用 ViewPager 的 setCurrentItem 方法来切换到相应的页面。同时,ViewPager 添加了页面切换的监听器,通过监听页面的切换事件,更新底部导航栏的选中状态,以实现同步切换效果。

完成以下操作就可以实现同步切换了。

补充

我的fragment代码:

<?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:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".Fragment.moreFragment">
 ​
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent">
 ​
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="2"
             android:textSize="50sp" />
 ​
     </LinearLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>
 

本次操作所需要所有文件:

 

效果如下:

是不是很简单,有手就行

会了的话就给个推荐之类的吧,各位兄弟们

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Android studio中使用ViewPager和BottomNavigationView实现底部导航栏和碎片的同步切换 的相关文章

随机推荐

  • 阿里巴巴为什么不用 ZooKeeper 做服务发现?

    转载自 https developer aliyun com article 601745 历史的迷思 站在未来的路口 回望历史的迷途 常常会很有意思 因为我们会不经意地兴起疯狂的念头 例如如果当年某事提前发生了 而另外一件事又没有发生会怎
  • 面向对象的程序设计思想

    面向对象是当今主流的一种程序设计理念和设计规范 它取代了早期的 结构化 过程设计开发技术 主张一切皆为对象 程序以人的思维模式去解决问题 面向对像的程序是由类组成的 每个类包含对用户公开的特定功能部分和隐藏的实现部分 面向对象 Object
  • 人工智能练习题 + 知识点汇总(期末复习版)

    目录 第一章 人工智能绪论 第二章 知识与谓词 第三章 谓词与自然演绎推理 第四章 语义网表示法和框架表示法 第五章 归结原理 第六章 置换和合一 第七章 定理证明和问题求解 第八章 状态空间法和问题归约法 第九章 启发式搜索 第十章 与或
  • vite+element-plus项目基础搭建

    vite element plus项目基础搭建 1 引言 2 为什么是Vite 3 为什么是Element plus 4 项目搭建 5 参考文献 1 引言 其实本来不应该写这种CSDN比较多的博文的 主要是因为比较多 然后想解决问题的时候有
  • 设置ssh登录Linux服务器和git上ssh的使用

    设置ssh登录Linux服务器 前言 环境 配置 客户端 服务器端 可能碰到的问题 使用密钥命令登录依然提示输入密码 git如何使用ssh key 前言 我们在远程Linux服务器或者使用git的时候都需要输入密码登录后进行操作 在进行频繁
  • PaddleOCR对于手写符号识别,从零开始搭建(包括期间遇到的所有问题)

    需求 需要对手写图片进行识别 勾 叉 圈 识别成对于的 v x o 其他的符号识别成 e 搭建环境 win10 gpu模式 用cpu搭建过一版 但是cpu训练太慢 搭建cpu期间的问题比gpu问题的少 使用gpu的需要有一块N卡 英伟达 我
  • 非root用户安装 Python + MySQLdb 及使用

    资源不足时要充分发挥主观能动性 没有测试机的root权限 但想用python脚本对数据库进行压测 只能在自己的目录下安装 所以configure的 prefix以及后来install MySQLdb时的路径选项很重要 1 Python ta
  • Vue3中数组filter方法,使用reactive不更新界面,而使用ref定义更新界面

    Vue3中使用reactive定义数组 对其进行更改不更新界面 也检测不到变化 但数据变了 let todoList reactive JSON parse localStorage getItem todoList function cl
  • Initial job has not accepted any resources; check your cluster UI to ensure that workers are...

    在集群上运行spark应用程序时 出现 Initial job has not accepted any resources check your cluster UI to ensure that workers are register
  • matlab多核计算设置1

    刚才试了一下 我使用的MATLAB2010可以多核运行的 需要多核多线程跑的算法 在之前要让matlab在本地建立4个 实验室 我的机器是4核 所以是4个 gt gt matlabpool local 4 Starting matlabpo
  • (No info could be read for -p: geteuid()=1001 but you should be root.)

    场景 使用netstat nltp命令 提示 No info could be read for p geteuid 1001 but you should be root 解决方案 sudo i 切换为root用户即可
  • oled拼接屏优势详解

    湖北省是中国中部地区的一个省份 拥有着丰富的资源和广阔的市场 在这个省份中 随着科技的不断发展 越来越多的企业开始使用oled拼接屏来展示自己的产品和服务 那么 什么是oled拼接屏呢 它有哪些优势和应用场景呢 下面就让我们来了解一下 首先
  • ubuntu 12.04 安装dropbox

    在线安装可能被墙 所以采用下载后安装 step 1 在 https www dropbox com install os lnx 下载对应的 deb包 dropbox 1 6 0 i386 deb step 2 安装 deb包 dpkg i
  • ConstraintLayout约束布局的应用

    首先需要引入我们的ConstraintLayout 在build gradle中加入 compile com android support constraint constraint layout 1 0 2 ConstraintLayo
  • GZHU 网络DNS修改教程

    一 下载软件 点击下载 二 将该软件所在路径添加到系统环境变量 按 Win S 输入 坏境变量 点击该选项 进入Path的编辑 先点击环境变量 再双击 Path 最后点击新建 把dnsproxy exe 所在目录的路径填写在那里 验证是否添
  • 10个常用的Java8日期处理函数案例详解

    Java 8中的日期函数 主要是基于 ISO标准日历系统 java time 包下的所有类都是不可变类型 且线程安全 现在壹哥就日期处理的常用功能代码总结如下 1 获得当前日期 获得当前日期 Test public void testGet
  • 2023面试问答_操作系统

    简单说下你对并发和并行的理解 并行是指两个或者多个事件在同一时刻发生 而并发是指两个或多个事件在同一时间间隔发生 并行是在不同实体上的多个事件 并发是在同一实体上的多个事件 同步 异步 阻塞 非阻塞的概念 同步 当一个同步调用发出后 调用者
  • vue实现锚点定位(多级动态菜单)

    现在有一个需求是实现多级动态菜单点击跳转到相应位置 一般这种需求实现起来就是href id的方式锚点定位 但是这种方式的滚动很生硬 故不采纳 我使用的方案是根据id 获取到当前元素距离body顶部的距离 判断此时滚动条需要滚动的距离 再通过
  • (2020)End-to-end Neural Coreference Resolution论文笔记

    2020End to end Neural Coreference Resolution论文笔记 Abstract 1 Introduction 2 Related Work 3 Task 4 Model 4 1 Scoring Archi
  • Android studio中使用ViewPager和BottomNavigationView实现底部导航栏和碎片的同步切换

    前言 通过几次的踩雷和摸索 完成了以上的操作 本教程写的详细全面 包教包会 对新手有好 看了不会的联系我 我倒立洗头给你看 1 需要了解的一些知识 所需控件 fragment 作为Android中最常用的控件 它有自己的声明周期 可以粗略地