【Android】底部导航栏【BottomNavigationView】+【ViewPage2】

您所在的位置：网站首页 › 安卓底部导航栏高度设置 › 【Android】底部导航栏【BottomNavigationView】+【ViewPage2】

【Android】底部导航栏【BottomNavigationView】+【ViewPage2】

2024-07-16 20:44| 来源: 网络整理| 查看: 265

问题需求

实现底部导航栏切换在这里插入图片描述

问题解决

最简单的实现方式就是使用系统自动生成的模板页面，但是有时候会有一些问题，特别是需要去除【ActionBar】的情况下，这种情况下使用系统的模板页面就不好用了，此时可以使用下面这种解决方式。

【BottomNavigationView】+【ViewPage2】 1.在res目录下创建【menu】目录，下面创建文件【bottom_nav_menu】

在这里插入图片描述

bottom_nav_menu代码 2.设置自定义导航图标切换显示效果

本文中需要显示四个图标，所以需要做四个选择切换背景在这里插入图片描述其中这四个切换背景设置是一样的，这里就贴一个出来【bottom_home_select】的代码

然后这些切换效果添加在第一步中的【bottom_nav_menu】代码中

3.自定义文字切换颜色效果

一般来说，文字切换效果的颜色是和图标颜色切换颜色是对应的在这里插入图片描述这个【color】一般是需要我们自己创建文件夹，在文件夹中创建文件【nav_bottom_txt_select】代码展示

4.依赖导入

【BottomNavigationView】是Android Studio自带就有，但是【ViewPage2】需要我们进行依赖导入，而【ViewPage2】又依赖【Recyclerview】，所以需要导入这两个依赖。

implementation 'androidx.viewpager2:viewpager2:1.0.0' implementation 'androidx.recyclerview:recyclerview:1.2.1' 5.【Activity】页面布局 6.【Fragment】页面创建

我们底部栏有四个按钮，所以我们需要创建四个【Fragment】，所以我们这边会有四个【Fragment】页面，再次不再叙述。在这里插入图片描述创建四个【Fragment】页面，分别命名【HomeFragment】、【StatisticsFragment】、【NotificationsFragment】、【MySetFragment】（里面什么都没有，就是一个空页面）。

7.创建ViewPage2的适配器

因为ViewPage2是依赖RecyclerView实现的，所以需要像使用Recyclerview一样创建一个适配器【Java】版本

import androidx.annotation.NonNull; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentActivity; import androidx.viewpager2.adapter.FragmentStateAdapter; import java.util.List; /** * 作者 ldd * 日期 2023/2/7 */ public class ViewPageAdapter extends FragmentStateAdapter { private List list; public ViewPageAdapter(@NonNull FragmentActivity fragmentActivity, List fragmentList) { super(fragmentActivity); list = fragmentList; } @NonNull @Override public Fragment createFragment(int position) { return list.get(position); } @Override public int getItemCount() { return list.size(); } }

【Kotlin】版本

import androidx.fragment.app.Fragment import androidx.fragment.app.FragmentActivity import androidx.viewpager2.adapter.FragmentStateAdapter /** * 作者 ldd * 日期 2023/2/7 */ open class ViewPager2Adapter( fa: FragmentActivity, private val list: MutableList ) : FragmentStateAdapter(fa) { override fun getItemCount(): Int { return list.size } override fun createFragment(position: Int): Fragment { return list[position] } }

下面使用的是【Kotlin】版本的

8.【Activity】代码

首先要去除系统主题的颜色，换成我们自定义的

//去除自带的选中颜色,去除后文字和图片选择效果就是跟我们自定义的效果一样 binding.navView.itemIconTintList = null //将所有的【Fragment】添加到【ViewPager2】中 val fragmentList: MutableList = ArrayList() fragmentList.add(HomeFragment()) fragmentList.add(StatisticsFragment()) fragmentList.add(NotificationsFragment()) fragmentList.add(MySetFragment()) binding.navViewpage2.adapter = ViewPager2Adapter(this, fragmentList) //当viewpage2页面切换时nav导航图标也跟着切换 binding.navViewpage2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() { override fun onPageSelected(position: Int) { super.onPageSelected(position) binding.navView.menu.getItem(position).isChecked = true } }) //当nav导航点击切换时，viewpager2也跟着切换页面 binding.navView.setOnItemSelectedListener { item -> when (item.itemId) { R.id.navigation_home -> { binding.navViewpage2.currentItem = 0 return@setOnItemSelectedListener true } R.id.navigation_statistics -> { binding.navViewpage2.currentItem = 1 return@setOnItemSelectedListener true } R.id.navigation_notifications -> { binding.navViewpage2.currentItem = 2 return@setOnItemSelectedListener true } R.id.navigation_myset -> { binding.navViewpage2.currentItem = 3 return@setOnItemSelectedListener true } } false }

此时底部导航栏已经实现。

追加

在设置bottomNavigationView的布局文件时，有个属性【labelVisibilityMode】此属性有四个值在这里插入图片描述显示效果