• Android 底部导航栏（二、BottomNavigationView+自定义View+Fragment）

    上一片文章用的是BottomNavigationView+Menu+Fragment，但是可能有时候需求不一样，menu的样式不太够，所以需要自定义View来实现。

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

    自定义View：实现思路是自定义一个XMl布局，放五个切换的Item，根据需求的样式去绘制。最后加上Fragment的切换，点击监听等等，坏处的话就是自己写的，可能没有封装好的那么完善，很多方法，状态需要自己去写。

    直接上代码吧！首先是XML布局代码：

    1. "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:id="@+id/act_main_bottom_nav_ll"
    6.     android:layout_width="match_parent"
    7.     android:layout_height="50dp"
    8.     android:background="#fff"
    9.     android:clipChildren="false"
    10.     android:clipToPadding="false"
    11.     android:paddingTop="5dp"
    12.     android:paddingBottom="5dp"
    13.     app:layout_constraintBottom_toBottomOf="parent"
    14.     app:layout_constraintStart_toStartOf="parent">
    15.  
    16.     <LinearLayout
    17.         android:id="@+id/bottom_bar_home"
    18.         android:layout_width="0dp"
    19.         android:layout_height="wrap_content"
    20.         android:gravity="center"
    21.         android:orientation="vertical"
    22.         app:layout_constraintBottom_toBottomOf="parent"
    23.         app:layout_constraintHorizontal_weight="1"
    24.         app:layout_constraintStart_toStartOf="parent"
    25.         app:layout_constraintEnd_toStartOf="@id/bottom_bar_tools"
    26.         tools:ignore="UseCompoundDrawables">
    27.  
    28.         <ImageView
    29.             android:id="@+id/bottom_bar_home_icon"
    30.             android:layout_width="26dp"
    31.             android:layout_height="26dp"
    32.             android:layout_marginBottom="4dp"
    33.             android:contentDescription="@null"
    34.             android:src="@drawable/gongwenbao" />
    35.  
    36.         <TextView
    37.             android:layout_width="wrap_content"
    38.             android:layout_height="wrap_content"
    39.             android:includeFontPadding="false"
    40.             android:text="@string/home"
    41.             android:textColor="@color/black"
    42.             android:textSize="8sp"
    43.             tools:ignore="SmallSp" />
    44.  
    45.     LinearLayout>
    46.  
    47.     <LinearLayout
    48.         android:id="@+id/bottom_bar_tools"
    49.         android:layout_width="0dp"
    50.         android:layout_height="wrap_content"
    51.         android:gravity="center"
    52.         android:orientation="vertical"
    53.         app:layout_constraintBottom_toBottomOf="parent"
    54.         app:layout_constraintHorizontal_weight="1"
    55.         app:layout_constraintEnd_toStartOf="@id/bottom_bar_play"
    56.         app:layout_constraintStart_toEndOf="@id/bottom_bar_home"
    57.         tools:ignore="UseCompoundDrawables">
    58.  
    59.         <ImageView
    60.             android:id="@+id/bottom_bar_tools_icon"
    61.             android:layout_width="26dp"
    62.             android:layout_height="26dp"
    63.             android:layout_marginBottom="4dp"
    64.             android:contentDescription="@null"
    65.             android:src="@drawable/zixun" />
    66.  
    67.         <TextView
    68.             android:layout_width="wrap_content"
    69.             android:layout_height="wrap_content"
    70.             android:includeFontPadding="false"
    71.             android:text="@string/tools"
    72.             android:textColor="@color/black"
    73.             android:textSize="8sp"
    74.             tools:ignore="SmallSp" />
    75.     LinearLayout>
    76.  
    77.     <LinearLayout
    78.         android:id="@+id/bottom_bar_play"
    79.         android:layout_width="0dp"
    80.         android:layout_height="wrap_content"
    81.         android:gravity="center"
    82.         android:orientation="vertical"
    83.         app:layout_constraintBottom_toBottomOf="parent"
    84.         app:layout_constraintHorizontal_weight="1"
    85.         app:layout_constraintStart_toEndOf="@id/bottom_bar_tools"
    86.         app:layout_constraintEnd_toStartOf="@id/bottom_bar_relax"
    87.         tools:ignore="UseCompoundDrawables">
    88.  
    89.         <ImageView
    90.             android:id="@+id/bottom_bar_play_icon"
    91.             android:layout_width="26dp"
    92.             android:layout_height="26dp"
    93.             android:layout_marginBottom="4dp"
    94.             android:contentDescription="@null"
    95.             android:src="@drawable/youxi" />
    96.  
    97.         <TextView
    98.             android:layout_width="wrap_content"
    99.             android:layout_height="wrap_content"
    100.             android:includeFontPadding="false"
    101.             android:text="@string/play"
    102.             android:textColor="@color/black"
    103.             android:textSize="8sp"
    104.             tools:ignore="SmallSp" />
    105.     LinearLayout>
    106.  
    107.     <LinearLayout
    108.         android:id="@+id/bottom_bar_relax"
    109.         android:layout_width="0dp"
    110.         android:layout_height="wrap_content"
    111.         android:gravity="center"
    112.         android:orientation="vertical"
    113.         app:layout_constraintBottom_toBottomOf="parent"
    114.         app:layout_constraintHorizontal_weight="1"
    115.         app:layout_constraintStart_toEndOf="@id/bottom_bar_play"
    116.         app:layout_constraintEnd_toStartOf="@id/bottom_bar_mine"
    117.         tools:ignore="UseCompoundDrawables">
    118.  
    119.         <ImageView
    120.             android:layout_width="26dp"
    121.             android:layout_height="26dp"
    122.             android:layout_marginBottom="4dp"
    123.             android:contentDescription="@null"
    124.             android:src="@drawable/yundong" />
    125.  
    126.         <TextView
    127.             android:layout_width="wrap_content"
    128.             android:layout_height="wrap_content"
    129.             android:includeFontPadding="false"
    130.             android:text="@string/video"
    131.             android:textColor="@color/black"
    132.             android:textSize="8sp"
    133.             tools:ignore="SmallSp" />
    134.     LinearLayout>
    135.  
    136.     <LinearLayout
    137.         android:id="@+id/bottom_bar_mine"
    138.         android:layout_width="0dp"
    139.         android:layout_height="wrap_content"
    140.         android:gravity="center"
    141.         android:orientation="vertical"
    142.         app:layout_constraintBottom_toBottomOf="parent"
    143.         app:layout_constraintHorizontal_weight="1"
    144.         app:layout_constraintStart_toEndOf="@id/bottom_bar_relax"
    145.         app:layout_constraintEnd_toEndOf="parent"
    146.         tools:ignore="UseCompoundDrawables">
    147.  
    148.         <ImageView
    149.             android:id="@+id/bottom_bar_mine_icon"
    150.             android:layout_width="26dp"
    151.             android:layout_height="26dp"
    152.             android:layout_marginBottom="4dp"
    153.             android:contentDescription="@null"
    154.             android:src="@drawable/yonghu" />
    155.  
    156.         <TextView
    157.             android:layout_width="wrap_content"
    158.             android:layout_height="wrap_content"
    159.             android:includeFontPadding="false"
    160.             android:text="@string/mine"
    161.             android:textColor="@color/black"
    162.             android:textSize="8sp"
    163.             tools:ignore="SmallSp" />
    164.  
    165.     LinearLayout>
    166.  
    167.  
    168. androidx.constraintlayout.widget.ConstraintLayout>

    展示出来的效果是：

     就是写自定义View：

    主要就是绑定布局，为每一个Item添加点击事件，这儿我只做了简单的点击回调

    1. package com.example.lxview.base.widget
    2.  
    3. import android.content.Context
    4. import android.util.AttributeSet
    5. import android.view.LayoutInflater
    6. import android.view.View
    7. import android.widget.LinearLayout
    8. import androidx.constraintlayout.widget.ConstraintLayout
    9. import com.example.lxview.R
    10.  
    11.  
    12. class MainBottomNavBar @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : ConstraintLayout(context, attrs, defStyleAttr) {
    13.  
    14.     private lateinit var videoContainer: ConstraintLayout
    15.     private lateinit var navHome: LinearLayout
    16.     private lateinit var navTools: LinearLayout
    17.     private lateinit var navPlay: LinearLayout
    18.     private lateinit var navMe: LinearLayout
    19.     private lateinit var navRelax: LinearLayout
    20.      var listener:ResultClick?=null
    21.  
    22.     init {
    23.         initView()
    24.     }
    25.     private fun initView() {
    26.         View.inflate(context, R.layout.main_act_bottom_nav_bar, this)
    27.         videoContainer = findViewById(R.id.act_main_bottom_nav_ll)
    28.         navHome = findViewById(R.id.bottom_bar_home)
    29.         navTools = findViewById(R.id.bottom_bar_tools)
    30.         navPlay = findViewById(R.id.bottom_bar_play)
    31.         navMe = findViewById(R.id.bottom_bar_mine)
    32.         navRelax = findViewById(R.id.bottom_bar_relax)
    33.  
    34.         navHome.setOnClickListener {
    35.             listener?.click(0)
    36.         }
    37.         navTools.setOnClickListener {
    38.             listener?.click(1)
    39.         }
    40.             navPlay.setOnClickListener {
    41.             listener?.click(2)
    42.         }
    43.         navRelax.setOnClickListener {
    44.             listener?.click(3)
    45.         }
    46.         navMe.setOnClickListener {
    47.             listener?.click(4)
    48.         }
    49.     }
    50. }
    51.  
    52. interface ResultClick{
    53.     fun click(int: Int)
    54. }

    第三步，在展示的Activity 的 xml文件里引用此布局，上面的FrameLayout用来放置fragment，底部放导航栏。

    1. "1.0" encoding="utf-8"?>
    2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     android:layout_width="match_parent"
    4.     android:layout_height="match_parent"
    5.     android:id="@+id/main_cl"
    6.     android:background="#f7f7f7"
    7.     xmlns:app="http://schemas.android.com/apk/res-auto">
    8.  
    9.     <FrameLayout
    10.         android:id="@+id/fragment_container"
    11.         android:layout_width="match_parent"
    12.         android:layout_height="0dp"
    13.         app:layout_constraintEnd_toEndOf="parent"
    14.         app:layout_constraintStart_toStartOf="parent"
    15.         app:layout_constraintTop_toTopOf="parent"
    16.         app:layout_constraintBottom_toTopOf="@id/navigation"
    17.         />
    18.  
    19.     <com.example.lxview.base.widget.MainBottomNavBar
    20.         android:id="@+id/navigation"
    21.         android:layout_width="match_parent"
    22.         android:layout_height="50dp"
    23.         app:layout_constraintBottom_toBottomOf="parent"
    24.         app:layout_constraintTop_toBottomOf="@id/fragment_container"
    25.         app:layout_constraintStart_toStartOf="parent"
    26.         />
    27. androidx.constraintlayout.widget.ConstraintLayout>

    第4步：在Activity代码里加上逻辑，继承ResultClick接口，复写click方法，用replaceFragment实现每次点击item时切换fragment

    1. package com.example.lxview
    2.  
    3. import android.view.MotionEvent
    4. import android.widget.FrameLayout
    5. import com.example.lxview.base.activity.BaseActivity
    6. import com.example.lxview.base.fragment.BaseFragment
    7. import com.example.lxview.base.widget.MainBottomNavBar
    8. import com.example.lxview.home.fragment.*
    9. import androidx.fragment.app.Fragment
    10. import androidx.fragment.app.FragmentTransaction
    11. import com.example.lxview.base.widget.ResultClick
    12.  
    13.  
    14. /**
    15.  * author: 李 祥
    16.  * date:   2022/3/31 1:57 下午
    17.  * description:
    18.  */
    19. class MainActivity : BaseActivity(),ResultClick{
    20.     override val contentId: Int
    21.         get() = R.layout.activity_main
    22.  
    23.     private var indicatorView: MainBottomNavBar? = null
    24.     private lateinit var fragments: Array
    25.     private lateinit var curSelectId: String
    26.     private lateinit var homeFragment: HomeFragment
    27.     private lateinit var toolsFragment: ToolsFragment
    28.     private lateinit var relaxFragment: RelaxFragment
    29.     private lateinit var meFragment: MineFragment
    30.     private lateinit var playFragment: PlayFragment
    31.     private lateinit var container: FrameLayout
    32.     override fun initView() {
    33.  
    34.         indicatorView = findViewById(R.id.navigation)
    35.         indicatorView?.listener = this
    36.         container = findViewById(R.id.fragment_container)
    37.         homeFragment = HomeFragment()
    38.         toolsFragment = ToolsFragment()
    39.         relaxFragment = RelaxFragment()
    40.         meFragment = MineFragment()
    41.         playFragment = PlayFragment()
    42.         curSelectId = homeFragment.id.toString()
    43.         fragments = arrayOf(homeFragment, toolsFragment, playFragment, relaxFragment, meFragment)
    44.         fragments.forEach {
    45.             addFragment(it,it.tag.toString())
    46.             hideFragment(it)
    47.         }
    48.         showFragment(fragments[0])
    49.     }
    50.  
    51.     //添加Fragment到FragmentList中
    52.     private fun addFragment(fragment: Fragment, tag: String) {
    53.         val fragmentManager = supportFragmentManager
    54.         val transaction: FragmentTransaction = fragmentManager.beginTransaction()
    55.         transaction.add(R.id.fragment_container, fragment, tag)
    56.         transaction.commit()
    57.     }
    58.  
    59.     // 清空fragmentList的所有Fragment，替换成新的Fragment，注意Fragment里面的坑
    60.     private fun replaceFragment(fragment: Fragment, tag: String) {
    61.         val fragmentManager = supportFragmentManager
    62.         val transaction: FragmentTransaction = fragmentManager.beginTransaction()
    63.         transaction.replace(R.id.fragment_container, fragment, tag)
    64.         transaction.commit()
    65.     }
    66.  
    67.     //移除指定的Fragment
    68.     private fun removeFragment(fragment: Fragment) {
    69.         val fragmentManager = supportFragmentManager
    70.         val transaction: FragmentTransaction = fragmentManager.beginTransaction()
    71.         transaction.remove(fragment)
    72.         transaction.commit()
    73.     }
    74.  
    75.     //把Fragment设置成显示状态，但是并没有添加到FragmentList中
    76.     private fun showFragment(fragment: Fragment) {
    77.         val fragmentManager = supportFragmentManager
    78.         val transaction: FragmentTransaction = fragmentManager.beginTransaction()
    79.         transaction.show(fragment)
    80.         transaction.commit()
    81.     }
    82.  
    83.     //把Fragment设置成显示状态，但是并没有添加到FragmentList中
    84.     private fun hideFragment(fragment: Fragment) {
    85.         val fragmentManager = supportFragmentManager
    86.         val transaction: FragmentTransaction = fragmentManager.beginTransaction()
    87.         transaction.hide(fragment)
    88.         transaction.commit()
    89.     }
    90.  
    91.     // 效果和show相近，创建视图，添加到containerid指定的Added列表，FragmentList依然保留，但是会引起生命周期的变化
    92.     private fun attachFragment(fragment: Fragment) {
    93.         val fragmentManager = supportFragmentManager
    94.         val transaction: FragmentTransaction = fragmentManager.beginTransaction()
    95.         transaction.attach(fragment)
    96.         transaction.commit()
    97.     }
    98.  
    99.     // 效果和hide相近，清除视图，从containerid指定的Added列表移除，FragmentList依然保留，但是会引起生命周期的变化
    100.     private fun detachFragment(fragment: Fragment) {
    101.         val fragmentManager = supportFragmentManager
    102.         val transaction: FragmentTransaction = fragmentManager.beginTransaction()
    103.         transaction.detach(fragment)
    104.         transaction.commit()
    105.     }
    106.  
    107.     override fun click(int: Int) {//实现fragment切换
    108.         replaceFragment(fragments[int],fragments[int].tag.toString())
    109.     }
    110.  
    111.     override fun dispatchTouchEvent(ev: MotionEvent?): Boolean {
    112.         if (ev?.action ==MotionEvent.BUTTON_BACK){
    113.             application.onTerminate()
    114.         }
    115.         return super.dispatchTouchEvent(ev)
    116.     }
    117.  
    118.     override fun onTouchEvent(event: MotionEvent?): Boolean {
    119.         if (event?.action ==MotionEvent.BUTTON_BACK){
    120.             application.onTerminate()
    121.         }
    122.         return super.onTouchEvent(event)
    123.     }
    124.  
    125. }

    总结：我这上面只实现了简单的点击切换，用自定义View来实现底部导航栏，很自由，可以实现一些稀奇古怪的需求，但是很多方法的回调，切换时的动画，就需要自己去实现，可能会相对复杂一些。所以若是普通的导航栏，还是用Android自带的组件去实现比较好！

    eg：使用replaceFragment，会清空掉当前的fragmnet列表，每次都是重新创建fragment，所以在一些界面的状态保存上就会有问题，所以也可以使用hide和show方法来进行点击切换，且不会销毁掉fragment

  • 相关阅读:
    java计算机毕业设计高校实习管理平台系统源码+mysql数据库+系统+lw文档+部署
    【C语言】VS实⽤调试技巧&（Debug和Release）监视&内存
    node.js-连接准备
    Qt生成PDF报告
    STM32之DMA
    C++ 学习（19）STL - list容器、set容器
    牛客刷题——剑指offer（第四期）
    LeetCode-组合总和 II
    Redis 中的原子操作(3)-使用Redis实现分布式锁
    Herodotus——无需bridge借助Storage proof实现的以太坊跨层数据访问
  • 原文地址：https://blog.csdn.net/LoveFHM/article/details/127651226