欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Kotlin用BottomNavigation实现底部导航栏

程序员文章站 2022-06-09 21:26:52
...

在我们开发app过程中,免不了使用底部导航栏,所以今天我们就来看看怎么样用kotlin实现底部导航栏。

新建项目

新建一个KotlinBottomNavigationDemo项目。
在gradle中添加依赖

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

完成布局工作

首先准备三张图标放到drawable目录下,分别命名为ic_home.png、ic_news.png、ic_user.png。作为轮换图标。
在layout目录下新建三个xml文件,分别表示三个页面下的显示效果。
Kotlin用BottomNavigation实现底部导航栏
在三个页面下分别编写内容:

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">
    <TextView
        android: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">

    <TextView
        android: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">

    <TextView
        android: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

在此设置主页面显示。

<?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">

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

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android: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目录下新建一个menu文件夹,在menu文件夹下新建bottom_nav_menu.xml文件。要几个界面就在这里写几个item,写法如下:
Kotlin用BottomNavigation实现底部导航栏

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

    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home" 
        android:title="@string/home"/>  <!--指定名字和图标-->

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

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

</menu>

最后再在color.xml中设置一下颜色。

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

编写逻辑代码

Kotlin用BottomNavigation实现底部导航栏
按此格式新建三个.kt文件,分别编写对应界面的逻辑显示。

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

在主活动中编写对应的逻辑,设计点击事件。

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()
    }
}

最后效果

Kotlin用BottomNavigation实现底部导航栏

参考源码

https://github.com/gunawanasch/BottomNavigationAndroid

相关标签: Android