• Android 底部导航栏（四、ViewPager+RadioGroup+Fragment）简单易懂

    一、基本介绍

    底部导航栏在Android应用中随处可见，今天使用ViewPager+RadioGroup+Fragment这三个控件来实现此功能。前面写了有三种实现方式，有兴趣可以去看看，

    Android 底部导航栏（一、BottomNavigationView+Menu+Fragment）_&岁月不待人&的博客-CSDN博客_android 底部导航栏

     

    Android 底部导航栏（二、自定义View+Fragment）_&岁月不待人&的博客-CSDN博客

    Android 底部导航栏（三、ViewPager+TabLayout+Fragment）简单易懂_&岁月不待人&的博客-CSDN博客

     

    二、实现原理

    Fragment用于承载和展示内容，Viewpager用于界面的切换，RadioGroup用于展示导航栏和点击事件通知ViewPager切换页面。

    三、实现过程

    第一步：布局代码，主要控件就是ViewPager和RadioGroup，再往里面放五个RadioButton子项。

    1. "1.0" encoding="utf-8"?>
    2. <layout xmlns:app="http://schemas.android.com/apk/res-auto"
    3.     xmlns:tools="http://schemas.android.com/tools">
    4.  
    5.     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    6.         android:layout_width="match_parent"
    7.         android:layout_height="match_parent"
    8.         android:background="@color/white"
    9.         android:orientation="vertical">
    10.  
    11.         <androidx.appcompat.widget.AppCompatTextView
    12.             android:id="@+id/nav_text"
    13.             android:layout_width="match_parent"
    14.             android:layout_height="wrap_content"
    15.             android:layout_marginTop="20dp"
    16.             android:gravity="center"
    17.             android:padding="4dp"
    18.             android:text="ViewPager+RadioGroup+Fragment"
    19.             android:textColor="@color/black"
    20.             android:textSize="18sp"
    21.             android:textStyle="bold" />
    22.  
    23.         <androidx.viewpager.widget.ViewPager
    24.             android:id="@+id/fragment_container_viewpager"
    25.             android:layout_width="match_parent"
    26.             android:layout_height="match_parent"
    27.             android:layout_above="@id/nav_radiogroup"
    28.             android:layout_below="@id/nav_text" />
    29.  
    30.         <View
    31.             android:layout_width="match_parent"
    32.             android:layout_height="0.3dp"
    33.             android:layout_above="@id/nav_radiogroup"
    34.             android:background="@color/tab_color_false" />
    35.  
    36.         <RadioGroup
    37.             android:id="@+id/nav_radiogroup"
    38.             android:layout_width="match_parent"
    39.             android:layout_height="wrap_content"
    40.             android:layout_alignParentBottom="true"
    41.             android:background="@color/white"
    42.             android:orientation="horizontal">
    43.  
    44.             <RadioButton
    45.                 android:id="@+id/nav_radio_button_1"
    46.                 style="@style/radiobutton"
    47.                 android:layout_width="wrap_content"
    48.                 android:layout_height="wrap_content"
    49.                 android:drawableTop="@drawable/food_avocado"
    50.                 android:text="首页"
    51.                 android:textColor="@drawable/selector_main_rb_text_color" />
    52.  
    53.             <RadioButton
    54.                 android:id="@+id/nav_radio_button_2"
    55.                 style="@style/radiobutton"
    56.                 android:layout_width="wrap_content"
    57.                 android:layout_height="wrap_content"
    58.                 android:drawableTop="@drawable/food_bread"
    59.                 android:text="游戏"
    60.                 android:textColor="@drawable/selector_main_rb_text_color" />
    61.  
    62.             <RadioButton
    63.                 android:id="@+id/nav_radio_button_3"
    64.                 style="@style/radiobutton"
    65.                 android:layout_width="wrap_content"
    66.                 android:layout_height="wrap_content"
    67.                 android:drawableTop="@drawable/food_cake"
    68.                 android:text="学习"
    69.                 android:textColor="@drawable/selector_main_rb_text_color" />
    70.  
    71.             <RadioButton
    72.                 android:id="@+id/nav_radio_button_4"
    73.                 style="@style/radiobutton"
    74.                 android:layout_width="wrap_content"
    75.                 android:layout_height="wrap_content"
    76.                 android:drawableTop="@drawable/food_eggyolkcake"
    77.                 android:text="放松"
    78.                 android:textColor="@drawable/selector_main_rb_text_color" />
    79.  
    80.             <RadioButton
    81.                 android:id="@+id/nav_radio_button_5"
    82.                 style="@style/radiobutton"
    83.                 android:layout_width="wrap_content"
    84.                 android:layout_height="wrap_content"
    85.                 android:drawableTop="@drawable/food_cookie"
    86.                 android:text="我的"
    87.                 android:textColor="@drawable/selector_main_rb_text_color" />
    88.         RadioGroup>
    89.     RelativeLayout>
    90. layout>

    RadioButton的textColor的xml代码：选中为蓝色，未选中为黑色

    1. "1.0" encoding="utf-8"?>
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
    3.     <item android:color="@color/blue" android:state_checked="true"/>
    4.     <item android:color="@color/black" android:state_checked="false"/>
    5. selector>

    RadioButton的style属性代码：在style.xml文件里

    1.  <style name="radiobutton">
    2.     
    3.         <item name="android:layout_weight">1item>
    4.         <item name="android:layout_width">0dpitem>
    5.         <item name="android:drawablePadding">4dpitem>
    6.         <item name="android:layout_height">wrap_contentitem>
    7.         <item name="android:button">@nullitem>
    8.         <item name="android:gravity">centeritem>
    9.         <item name="android:textSize">12spitem>
    10.         <item name="android:textColor">@drawable/selector_main_rb_text_coloritem>
    11.     style>

    eg：

    1.设置weight都为1，这样的话子项的宽度都会是一样的。

    2.drawablePadding属性，是为了让图片和文字有一点间距，好看些。

    3.button为null，这样就可以去掉radioButton的那个不好看的默认按钮。

    第二步：业务逻辑代码

    1. package com.example.lxview.lxhome.func.nav.activity
    2.  
    3. import android.widget.RadioGroup
    4. import androidx.fragment.app.Fragment
    5. import androidx.fragment.app.FragmentPagerAdapter
    6. import androidx.viewpager.widget.ViewPager
    7. import com.example.lxview.R
    8. import com.example.lxview.base.activity.BaseBindActivity
    9. import com.example.lxview.base.fragment.BaseFragment
    10. import com.example.lxview.databinding.NavViewpagerRadiogroupActivityLayoutBinding
    11. import com.example.lxview.home.fragment.*
    12. /**
    13.  * author: 李 祥
    14.  * date:   2022/6/28 8:48 下午
    15.  * description:
    16.  */
    17. class NavViewPagerRadioGroupActivity : BaseBindActivity<NavViewpagerRadiogroupActivityLayoutBinding>() {
    18.  
    19.     override val layout: Int
    20.         get() = R.layout.nav_viewpager_radiogroup_activity_layout
    21.  
    22.     private lateinit var homeFragment: HomeFragment
    23.     private lateinit var toolsFragment: ToolsFragment
    24.     private lateinit var relaxFragment: RelaxFragment
    25.     private lateinit var viewPager: ViewPager
    26.     private lateinit var radioGroup: RadioGroup
    27.     private lateinit var meFragment: MineFragment
    28.     private lateinit var playFragment: PlayFragment
    29.     private lateinit var fragments: Array
    30.     private val titles = arrayOf("首页", "视频", "用户", "音乐", "我的")
    31.  
    32.  
    33.     override fun initView() {
    34.         initFragment()
    35.         viewPager = mBinding.fragmentContainerViewpager
    36.         radioGroup = mBinding.navRadiogroup //绑定fragment列表
    37.         viewPager.adapter = object : FragmentPagerAdapter(supportFragmentManager, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
    38.             override fun getCount(): Int {
    39.                 return fragments.size
    40.             }
    41.  
    42.             override fun getItem(position: Int): Fragment {
    43.                 return fragments[position]
    44.             }
    45.  
    46.             override fun getPageTitle(position: Int): CharSequence {
    47.                 return titles[position]
    48.             }
    49.         }
    50.     }
    51.  
    52.     override fun initListener() {
    53.  
    54.         radioGroup.setOnCheckedChangeListener { _, checkedId ->
    55.             when (checkedId) { //点击切换viewpager页面
    56.                 R.id.nav_radio_button_1 -> {
    57.                     viewPager.currentItem = 0
    58.                 }
    59.                 R.id.nav_radio_button_2 -> {
    60.                     viewPager.currentItem = 1
    61.                 }
    62.                 R.id.nav_radio_button_3 -> {
    63.                     viewPager.currentItem = 2
    64.                 }
    65.                 R.id.nav_radio_button_4 -> {
    66.                     viewPager.currentItem = 3
    67.                 }
    68.                 R.id.nav_radio_button_5 -> {
    69.                     viewPager.currentItem = 4
    70.                 }
    71.             }
    72.         }
    73.         viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
    74.             override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
    75.             }
    76.  
    77.             override fun onPageSelected(position: Int) { //当页面左右滑动发生改变时，radiogroup也改变子项的选择状态
    78.                 when (position) {
    79.                     0 -> radioGroup.check(R.id.nav_radio_button_1)
    80.                     1 -> radioGroup.check(R.id.nav_radio_button_2)
    81.                     2 -> radioGroup.check(R.id.nav_radio_button_3)
    82.                     3 -> radioGroup.check(R.id.nav_radio_button_4)
    83.                     4 -> radioGroup.check(R.id.nav_radio_button_5)
    84.                 }
    85.             }
    86.  
    87.             override fun onPageScrollStateChanged(state: Int) {
    88.             }
    89.  
    90.         })
    91.     }
    92.  
    93.     private fun initFragment() {
    94.         homeFragment = HomeFragment()
    95.         toolsFragment = ToolsFragment()
    96.         relaxFragment = RelaxFragment()
    97.         meFragment = MineFragment()
    98.         playFragment = PlayFragment()
    99.         fragments = arrayOf(homeFragment, toolsFragment, playFragment, relaxFragment, meFragment)
    100.     }
    101. }

    关于radioGroup和Viewpager的互相监听切换都写在代码里了，代码也注释了，如果想在点击item或者左右滑动后更改图片，也可以在这两个监听事件里进行更改，也可以直接设置drawableTop的资源文件，改成selector xml文件，比如在drawable先新建一个drawable_my_selector.xml文件

    1. "1.0" encoding="utf-8"?>
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
    3.     <item android:drawable="@mipmap/icon_checked_my" android:state_checked="true" />
    4.     <item android:drawable="@mipmap/icon_normal_my" android:state_checked="false" />
    5. selector>

    然后在最上边的xml布局文件里将drawableTop属性更改为： android:drawableTop="@drawable/drawable_my_selector"

    1. .....
    2.             <RadioButton
    3.                 android:id="@+id/nav_radio_button_5"
    4.                 style="@style/radiobutton"
    5.                 android:layout_width="wrap_content"
    6.                 android:layout_height="wrap_content"
    7.                 android:drawableTop="@drawable/drawable_my_selector"
    8.                 android:text="我的"
    9.                 android:textColor="@drawable/selector_main_rb_text_color" />
    10. ......
    11.

    总结：总的来说，底部导航栏的实现方式有很多种，也很简单，怎样选择可以根据自己的喜好和需求来实现，有时候子项大小不一啊，各种过度动画之类的也会影响自己的选择。关于底部导航栏的文章我就写这四章了，当然并不是只有这些实现方式，也可以有其他的组合方式，或者其他的实现方法。

  • 相关阅读:
    搭建自己的搜索引擎之四
    简单认识泛型【java】
    设计的思考,设计是什么？ 优漫动游
    离线部署 python 3.x 版本
    AVR汇编（六）：分支指令
    淘宝二面：MySQL里有2000万条数据，但是Redis中只存20万的数据，如何保证redis中的数据都是热点数据?
    麒麟系统开发笔记（十二）：在国产麒麟系统上编译GDAL库、搭建基础开发环境和基础Demo
    2、ARM处理器概论
    辅助驾驶功能开发-功能规范篇(25)-1-全景影像AVM规范
    项目管理工具，帮助项目经理提高工作效率
  • 原文地址：https://blog.csdn.net/LoveFHM/article/details/127701954