Android底部导航栏实战
微信，QQ这些熟知的Android软件都有底部导航的功能。底部导航却是一个较难实现的功能。让我们通过这篇文章学习一下底部导航的用法。
注：本文全部用Kotlin作为示范代码
1 创建主活动
首先我们创建一个BottomBarTest项目。
然后新建一个MainActivity。我们暂且不需要自动Generate Layout文件。
创建layout_main文件，选择relativelayout
在build.gradle添加如下依赖
implementation 'com.google.android.material:material:1.0.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
implementation 'androidx.vectordrawable:vectordrawable:1.0.1'
implementation 'androidx.navigation:navigation-fragment:2.0.0'
implementation 'androidx.navigation:navigation-ui:2.0.0'
implementation 'androidx.lifecycle:lifecycle-extensions:2.0.0'
implementation 'androidx.navigation:navigation-fragment-ktx:2.0.0'
implementation 'androidx.navigation:navigation-ui-ktx:2.0.0'
这几个库什么作用我并不想解释
它不重要
老规矩点Sync Now同步
2 添加底部导航栏
首先添加menu文件menu_main.xml。menu的用法我并不想多讲，直接上代码：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_google"
android:icon="@drawable/social_google"
android:title="Google" />
<item
android:id="@+id/navigation_stackflow"
android:icon="@drawable/social_stackflow"
android:title="StackOverflow" />
<item
android:id="@+id/navigation_github"
android:icon="@drawable/social_github"
android:title="Github" />
</menu>
图片资源在百度网盘里。（说到百度网盘就恨得不得了每次下载资源慢的不得了）可惜我的Github账号挂了（长叹)...拿去就是这个提取码: dmhv
如果你也要选择精美的icon建议用阿里巴巴图标资源库
选择这三个icon就是为了摆明：遇到问题让Google+StackOverFlow+Github成为习惯，而不是用百度或者CSDN
如果你看到类似于Hardcoded string "Google", should use @string resourse的警告的话，下面有一个解决方案
不用管它
接着在主布局中添加导航栏：
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:menu="@menu/menu_main" />
</RelativeLayout>
我们把导航栏的高度设置为ActionBar的默认高度（这是为了最后一步使用），因为是底部导航栏，所以设置alignParentBottom为true。
3 创建碎片
前两步是最简单的！！！
首先我们在MainActivity的同级目录下创建ui目录。显然是存放碎片用的。接着建三个目录google，github和stack，用于存放三个按钮的界面碎片
碎片的代码还是很好理解的，以google文件夹为例，我们建立两个文件，GoogleFragment.kt，GoogleViewModel.kt
代码如下：
class GoogleFragment : Fragment() {
private lateinit var googleViewModel: GoogleViewModel
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
googleViewModel =
ViewModelProviders.of(this).get(GoogleViewModel::class.java)
val root = inflater.inflate(R.layout.fragment_google, container, false)
val textView: TextView = root.findViewById(R.id.text_google)
googleViewModel.text.observe(this, Observer {
textView.text = it
})
return root
}
}
class GoogleViewModel : ViewModel() {
private val _text = MutableLiveData<String>().apply {
value = "Welcome to Google"
}
val text: LiveData<String> = _text
}
就是简单的碎片调用，没什么好说的。接着创建碎片布局文件fragment_google.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/text_google"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:textColor="#000000"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"/>
</LinearLayout>
我们创建了一个基本布局。可以看到这就是碎片的基本布局了（。。一个textview而已
以此类推完成另外2个文件夹的代码
4 完成MainActivity控制
目前运行项目，你得到的界面应该是这样的
原因很简单啊，我们还没有在MainActivity.kt中写任何东西。现在我们需要完成最后的配置。
首先，为了能够放置一个动态Fragment，我们首先需要新建一个navigation。在res目录下新建一个navigation文件夹
然后新建mobile_navigation.xml
代码如下：
<?xml version="1.0" encoding="utf-8"?>
<navigation 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/mobile_navigation"
app:startDestination="@+id/navigation_google">
<fragment
android:id="@+id/navigation_google"
android:name="com.example.bottombartest.ui.google.GoogleFragment"
android:label="Google"
tools:layout="@layout/fragment_google" />
<fragment
android:id="@+id/navigation_github"
android:name="com.example.bottombartest.ui.github.GithubFragment"
android:label="Github"
tools:layout="@layout/fragment_github" />
<fragment
android:id="@+id/navigation_stackflow"
android:name="com.example.bottombartest.ui.stack.StackFragment"
android:label="StackOverflow"
tools:layout="@layout/fragment_stack" />
</navigation>
我们平时很少用到navigation控件。其实不难理解，navigation控件就是可以用于切换的控件。我们放入3个fragment以便切换。有一点就是android:lable属性。这个属性指的是ActionBar上的字。
写完了navigation我们要在layout_main里添加这个控件。可以把它想象成一个碎片。添加方法如下：
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="?attr/actionBarSize"
app:defaultNavHost="true"
app:navGraph="@navigation/mobile_navigation" />
最后我们要在mainactivity里注册这些控件：
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.layout_main)
val navView: BottomNavigationView = findViewById(R.id.nav_view)
val navController = findNavController(R.id.nav_host_fragment)
val appBarConfiguration = AppBarConfiguration(
setOf(
R.id.navigation_google, R.id.navigation_github, R.id.navigation_stackflow
)
)
setupActionBarWithNavController(navController, appBarConfiguration)
navView.setupWithNavController(navController)
}
}
效果如下：
读完这篇文章你一定很有收获。我们详细学习了底部导航栏的用法。由于Github账号出错的问题，我无法把这个项目上传到Github，大家不可以fork和提交PR，请大家原谅一下。
