kotlin，Android底部导航栏ButtomNavigation手把手教你实现

这次终于凑到十个字了

于 2024-07-22 16:44:57 发布

阅读量656

点赞数 12

本文链接：https://blog.csdn.net/m0_74531507/article/details/140611986

版权

Android studio 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

kotlin

6 篇文章 0 订阅

订阅专栏

通过本篇文章的学习，教会你如何使用BottomNavigation底部导航栏

实现仿微信底部导航栏的功能，点击不同的底部导航栏显示不同页面

在文章最后，有视频效果，感兴趣的朋友可以划到最后看看

一.准备

首先需要准备一个activity和若干个fragment（本文以三个fragment为例）

并将fragment中冗余代码删去

如图：

在每个fragment的布局文件中放入一个TextView以便区分

如图：

二.设置activity布局文件

我用的是相对布局

<com.google.android.material.bottomnavigation.BottomNavigationView 不要写错了

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomNavigationView" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/navigation"/>
</RelativeLayout>

app:menu="@menu/navigation" 这一句会标红，因为还没有创建这个文件

要在res文件下创建

type选择menu

编辑menu文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/AAA"
        android:title="第一页"
        android:icon="@drawable/baseline_home_24">
    </item>
    <item
        android:id="@+id/BBB"
        android:title="第二页"
        android:icon="@drawable/baseline_smoke_free_24">
    </item>
    <item
        android:id="@+id/CCC"
        android:title="第三页"
        android:icon="@drawable/baseline_people_24">
    </item>
</menu>

我用的是系统的图像

如何创建系统的图像，也很简单

首先如图选择drawable处右键

然后点击这边的图像就可以新建

你也可以在搜索框搜索你想要的图像

然后点击OK，回到这边

再点击NEXT

最后点击finish，就新建完成了。

当menu文件搞定后，回到activity的布局文件，你就可以看到下面已经出现导航栏了

三.编写Activity文件

将代码修改成这样即可，后面我会一部分一部分讲解

package com.example.buttomnavigation

import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import androidx.fragment.app.FragmentTransaction
import com.example.buttomnavigation.fragment.FragmentA
import com.example.buttomnavigation.fragment.FragmentB
import com.example.buttomnavigation.fragment.FragmentC
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {
    var fragmenta: FragmentA?=null
    var fragmentb: FragmentB?=null
    var fragmentc: FragmentC?=null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val bottomNavigationView: BottomNavigationView = findViewById(R.id.bottomNavigationView)

        //默认选中
        selectedFragment(0)

        bottomNavigationView?.setOnNavigationItemSelectedListener {menuItem->
            if (menuItem.itemId==R.id.AAA){
                selectedFragment(0)
            }else if (menuItem.itemId==R.id.BBB) {
                selectedFragment(1)
            }else{
                selectedFragment(2)
            }
            true
        }
    }
    //选择
    fun selectedFragment(postion:Int){
        val fragmentTransaction =supportFragmentManager.beginTransaction()
        hideFragment(fragmentTransaction)
        if (postion ==0) {
            if (fragmenta == null) {
                fragmenta = FragmentA()
                fragmentTransaction.add(R.id.content, fragmenta!!)
            } else {
                fragmentTransaction.show(fragmenta!!)
            }
        }else if (postion==1){
            if (fragmentb == null){
                fragmentb = FragmentB()
                fragmentTransaction.add(R.id.content,fragmentb!!)
            }else{
                fragmentTransaction.show(fragmentb!!)
            }
        }else{
            if (fragmentc==null){
                fragmentc = FragmentC()
                fragmentTransaction.add(R.id.content,fragmentc!!)
            }else{
                fragmentTransaction.show(fragmentc!!)
            }
        }
        //一定要提交
        fragmentTransaction.commit()
    }
    //隐藏全部fragment
    fun hideFragment(fragmentTransaction: FragmentTransaction){
        if(fragmenta!=null){
            fragmentTransaction.hide(fragmenta!!)
        }
        if (fragmentb!=null){
            fragmentTransaction.hide(fragmentb!!)
        }
        if (fragmentc!=null){
            fragmentTransaction.hide(fragmentc!!)
        }

    }
}

这串代码看似很复杂，其实可以分成四个模块来理解

首先是初始化，三个Fragment