我们都遇到了带有底部导航栏的应用程序。一些受欢迎的示例包括Instagram,WhatsApp等。在本文中,我们将学习如何在Android应用中实现这种功能的底部导航栏。以下是示例底部导航栏的预览:
为什么我们需要底部导航栏?
- 它允许用户轻松切换到不同的活动/片段。
- 它使用户了解应用程序中可用的不同屏幕。
- 用户现在可以检查他们在哪个屏幕上。
以下是底部导航栏的解剖图:
创建底部导航栏的步骤
步骤1:建立新的Android Studio专案
要在Android Studio中创建新项目,请参阅如何在Android Studio中创建/启动新项目。请注意,选择Kotlin作为编程语言。
步骤2:将依赖项添加到build.gradle(:app)文件中
我们将使用Android的Material Design库,因此我们需要将其导入build.gradle(:app) 文件。这是我们需要添加的依赖项:
implementation ‘com.google.android.material:material:1.2.0’
步骤3:使用activity_main.xml文件
对于此示例,使用FrameLayout和Bottom Navigation Bar创建一个基本应用。 FrameLayout将包含片段,这些片段将随着用户单击底部导航栏中的项目而改变。这是activity_main.xml的样子:
XML
XML
XML
XML
Kotlin
import androidx.fragment.app.Fragment
class FirstFragment:Fragment(R.layout.fragment_first) {
}
XML
Kotlin
import androidx.fragment.app.Fragment
class SecondFragment:Fragment(R.layout.fragment_second) {
}
XML
Kotlin
import androidx.fragment.app.Fragment
class ThirdFragment:Fragment(R.layout.fragment_third) {
}
Kotlin
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val firstFragment=FirstFragment()
val secondFragment=SecondFragment()
val thirdFragment=ThirdFragment()
setCurrentFragment(firstFragment)
bottomNavigationView.setOnNavigationItemSelectedListener {
when(it.itemId){
R.id.home->setCurrentFragment(firstFragment)
R.id.person->setCurrentFragment(secondFragment)
R.id.settings->setCurrentFragment(thirdFragment)
}
true
}
}
private fun setCurrentFragment(fragment:Fragment)=
supportFragmentManager.beginTransaction().apply {
replace(R.id.flFragment,fragment)
commit()
}
}
步骤4:为底部导航栏创建菜单
导航栏需要包含一些将使用Menu创建的项目。要创建菜单,首先,创建菜单目录 通过单击应用程序-> res (右键单击)->新建-> Android资源目录,然后在资源类型中选择菜单。
要创建菜单资源文件,请单击应用程序-> res- >菜单(右键单击)->新建->菜单资源文件,并将其命名为bottom_nav_menu 。
现在,用户可以在bottom_nav_menu.xml文件中创建任意数量的项。用户还需要为每个项目创建一个图标。要创建图标,请在应用程序上单击-> res- > drawable (右键单击)->新建->图片资产。
在打开的窗口中,用户可以根据需要命名图标,但该图标不应包含任何大写字母。用户可以通过搜索选择所需的图标,完成操作后,单击下一步->完成。
现在,将这些项目添加到bottom_nav_menu.xml中。添加项目后, bottom_nav_menu.xml文件如下所示:
XML格式
步骤5:更改操作栏样式
由于我们使用的是Google的材料设计库,因此我们需要更改操作栏的样式以使用相同的库,否则底部导航栏将为黑色,并且其项目将不可见。要更改它,请通过单击应用程序-> res- >值-> styles.xml导航到styles.xml并将样式开头标记更改为:
这是styles.xml文件的样子:
XML格式
步骤6:创建要显示的片段
现在我们有了底部导航栏,我们希望通过单击某个项目时带我们进入不同的片段/活动来使其正常工作。在此示例中,为每个项目创建一个片段,并在单击相应的项目时导航到它们。由于我们在底部导航栏中创建了三个项目,因此我们将创建三个片段。要创建片段,请在应用程序上单击鼠标右键(右键单击)->新建->片段->片段(空白) 。将片段命名为FirstFragment ,并将相应的XML文件命名为fragment_first 。为了简单起见,所有这三个片段都将只包含一个TextView 。但是,我们可以对其进行调整,因为我们希望它可以出现在应用程序中。这是添加TextView后fragment_first.xml的样子:
XML格式
接下来,对FirstFragment.kt进行编码以显示fragment_first.xml 。为此,请删除FirstFragment.kt中所有以前编写的代码,然后将其替换为以下代码。以下代码仅采用我们为片段创建的布局并将其膨胀。
Note: If we want our fragment to have any logic or perform any task, we will add that code in our FirstFragment.kt.
科特林
import androidx.fragment.app.Fragment
class FirstFragment:Fragment(R.layout.fragment_first) {
}
同样,为其余两个项目再创建两个片段。下面分别是fragment_second.xml,SecondFragment.kt,fragment_third.xml和ThirdFragment.kt文件。
XML格式
科特林
import androidx.fragment.app.Fragment
class SecondFragment:Fragment(R.layout.fragment_second) {
}
XML格式
科特林
import androidx.fragment.app.Fragment
class ThirdFragment:Fragment(R.layout.fragment_third) {
}
步骤7:使用MainActivity.kt文件
现在我们有了所需的一切,最后只需要编写MainActivity.kt的代码即可将所有内容连接到应用程序。在这里,首先,创建一个名为setCurrentFragment()的函数。 它以Fragment作为参数并将其设置在我们的activity_main.xml文件的FrameLayout中。在底部导航栏的项目中添加一个单击侦听器,以便在单击某个项目时显示相应的片段。添加所有这些代码后, MainActivity.kt如下所示:
科特林
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val firstFragment=FirstFragment()
val secondFragment=SecondFragment()
val thirdFragment=ThirdFragment()
setCurrentFragment(firstFragment)
bottomNavigationView.setOnNavigationItemSelectedListener {
when(it.itemId){
R.id.home->setCurrentFragment(firstFragment)
R.id.person->setCurrentFragment(secondFragment)
R.id.settings->setCurrentFragment(thirdFragment)
}
true
}
}
private fun setCurrentFragment(fragment:Fragment)=
supportFragmentManager.beginTransaction().apply {
replace(R.id.flFragment,fragment)
commit()
}
}