在我們開(kāi)發(fā)app過(guò)程中，免不了使用底部導(dǎo)航欄，所以今天我們就來(lái)看看怎么樣用kotlin實(shí)現(xiàn)底部導(dǎo)航欄。

新建項(xiàng)目

新建一個(gè)KotlinBottomNavigationDemo項(xiàng)目。
在gradle中添加依賴(lài)

implementation 'com.google.android.material:material:1.0.0'

完成布局工作

首先準(zhǔn)備三張圖標(biāo)放到drawable目錄下，分別命名為ic_home.png、ic_news.png、ic_user.png。作為輪換圖標(biāo)。
在layout目錄下新建三個(gè)xml文件，分別表示三個(gè)頁(yè)面下的顯示效果。
在三個(gè)頁(yè)面下分別編寫(xiě)內(nèi)容：

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent">
<TextViewandroid:id="@+id/home"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:gravity="center"android:textSize="14sp" />

LinearLayout>

fragment_news.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent">

<TextViewandroid:id="@+id/news"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:gravity="center"android:textSize="14sp" />
LinearLayout>

fragment_user.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent">

<TextViewandroid:id="@+id/user"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:gravity="center"android:textSize="14sp" />

LinearLayout>

activity_main.xml

在此設(shè)置主頁(yè)面顯示。

<?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=".MainActivity">

<FrameLayoutandroid:id="@+id/container"android:layout_width="match_parent"android:layout_height="match_parent">

<com.google.android.material.bottomnavigation.BottomNavigationViewandroid:id="@+id/bottomNavigation"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:background="#fff"app:itemIconTint="@color/itemTint"app:itemTextColor="@color/itemTextColor"app:labelVisibilityMode="labeled"app:menu="@menu/bottom_nav_menu" />

FrameLayout>

androidx.constraintlayout.widget.ConstraintLayout>

res目錄下新建一個(gè)menu文件夾，在menu文件夾下新建bottom_nav_menu.xml文件。要幾個(gè)界面就在這里寫(xiě)幾個(gè)item，寫(xiě)法如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<itemandroid:id="@+id/nav_home"android:icon="@drawable/ic_home" android:title="@string/home"/>

<itemandroid:id="@+id/nav_news"android:icon="@drawable/ic_news"android:title="@string/news"/>

<itemandroid:id="@+id/nav_user"android:icon="@drawable/ic_user"android:title="@string/user"/>

menu>

最后再在color.xml中設(shè)置一下顏色。

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#008577color>
<color name="colorPrimaryDark">#00574Bcolor>
<color name="colorAccent">#D81B60color>
<color name="itemTint">#878787color>
<color name="itemTextColor">#121212color>
resources>

編寫(xiě)邏輯代碼

按此格式新建三個(gè).kt文件，分別編寫(xiě)對(duì)應(yīng)界面的邏輯顯示。

HomeFragment

package com.lkzhang.kotlinbottomnavigation.fragments

import android.annotation.SuppressLint
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.lkzhang.kotlinbottomnavigation.R
import kotlinx.android.synthetic.main.fragment_home.*

class HomeFragment : Fragment() {

override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_home, container, false)
}

@SuppressLint("SetTextI18n")
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
home.text = "This is Home Fragment"
}

}

NewsFragment

package com.lkzhang.kotlinbottomnavigation.fragments

import android.annotation.SuppressLint
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.lkzhang.kotlinbottomnavigation.R
import kotlinx.android.synthetic.main.fragment_home.*
import kotlinx.android.synthetic.main.fragment_news.*

class NewsFragment : Fragment() {

override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_news, container, false)
}

@SuppressLint("SetTextI18n")
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)

news.text = "This is News Fragment"
}

}

UserFragment

package com.lkzhang.kotlinbottomnavigation.fragments

import android.annotation.SuppressLint
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.lkzhang.kotlinbottomnavigation.R
import kotlinx.android.synthetic.main.fragment_home.*
import kotlinx.android.synthetic.main.fragment_user.*

class UserFragment : Fragment() {

override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_user, container, false)
}

@SuppressLint("SetTextI18n")
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
user.text = "This is User Fragment"
}
}

MainActivity

在主活動(dòng)中編寫(xiě)對(duì)應(yīng)的邏輯，設(shè)計(jì)點(diǎn)擊事件。

package com.lkzhang.kotlinbottomnavigation

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import com.lkzhang.kotlinbottomnavigation.fragments.HomeFragment
import com.lkzhang.kotlinbottomnavigation.fragments.NewsFragment
import com.lkzhang.kotlinbottomnavigation.fragments.UserFragment
import kotlinx.android.synthetic.main.activity_main.*
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
title = resources.getString(R.string.home)
loadFragment(HomeFragment())

bottomNavigation.setOnNavigationItemSelectedListener{
when(it.itemId){
R.id.nav_home -> {
title = resources.getString(R.string.home)
loadFragment(HomeFragment())
return@setOnNavigationItemSelectedListener true
}

R.id.nav_news -> {
title = resources.getString(R.string.news)
loadFragment(NewsFragment())
return@setOnNavigationItemSelectedListener true
}

R.id.nav_user -> {
title = resources.getString(R.string.user)
loadFragment(UserFragment())
return@setOnNavigationItemSelectedListener true
}

}
false
}

}

private fun loadFragment(fragment: Fragment) {
val transaction = supportFragmentManager.beginTransaction()
transaction.replace(R.id.container, fragment)
transaction.addToBackStack(null)
transaction.commit()
}

override fun onBackPressed() {
super.onBackPressed()
finish()
}
}

最后效果

參考源碼

https://github.com/gunawanasch/BottomNavigationAndroid

總結(jié)

以上是生活随笔為你收集整理的android底部导航栏_Kotlin实现底部导航栏的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。