大项目模块 · 终 | 青训营笔记

项目实践·终 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第14天；

用于记录开发过程中学习到的知识点

Bottom Navigation Activity实现底部导航栏

在我们实际编写程序时，不必每一个activity都要从零开始，利用好系统自带的模板往往可以起到事半功倍的效果。在这次项目设计中使用Bottom Navigation Activity来完成简单的底部导航栏功能、

• 创建activity：

• 创建成功以后我们来运行一下，发现已经基本实现了底部导航栏的功能了！但是还没有结束——我们还需要对导航栏进行修改定制，以符合我们自己的需要。

• 自定义（添加\删除选项）:
  
  • 打开activity_main.xml文件可以发现设置导航栏的代码如下：

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />
    

    由上代码段可以看出app:menu="@menu/bottom_nav_menu" 指向了导航栏的样式；
  • 我们找到指定文件：

  <?xml version="1.0" encoding="utf-8"?>
  <menu xmlns:android="http://schemas.android.com/apk/res/android">
  
     <item
         android:id="@+id/navigation_home"
         android:icon="@drawable/ic_home_black_24dp"
         android:title="@string/title_home" />
  
     <item
         android:id="@+id/navigation_dashboard"
         android:icon="@drawable/ic_dashboard_black_24dp"
         android:title="@string/title_dashboard" />
  
     <item
         android:id="@+id/navigation_notifications"
         android:icon="@drawable/ic_notifications_black_24dp"
         android:title="@string/title_notifications" />
  
  </menu>
  

  可以看出<item>标签为指定导航栏选项的数量，android:icon指定的选项的图标， android:title指定选项显示的文字。

• 项目结构：

  • 其中dashboard,home,notifications这三个文件夹是对应的底部三个导航栏。

  • 每个文件夹下有两个文件，一个是用来承载控件的fragment，另一个是与之对应的viewModel。

  • viewModel就是mvvm框架下的vm，关于mvvm框架单独去研究一下吧，这里只简单说一下例子里面的HomeFragment和HomeViewModel。

  • 首先这两个文件全是普通的java类。fragment用来显示ui界面，而viewmodel则是给ui界面提供数据;

  • view里的每一个控件在viewmodel里都有一个对应的数据对象，如果要更新view上的ui界面，只需要更新viewmodel里与之对应的对象即可。

• 自定义切换页面（Fragment）： 和制作Fragment页面一致，有需要请看前面文章。