Android仿微信5实现滑动导航条

简介

本文主要介绍如何使用Android Studio开发一个仿微信5的滑动导航条，包括悬浮指示器，顶部导航栏，以及各个页面内容的显示等，方便开发者在自己的应用中快速实现类似的功能。

开发步骤

1. 新建Android Studio项目。在创建项目的时候，需要选择“Bottom Navigation Activity”模板，这个模板已经默认提供了底部导航栏，可以快速实现滑动导航条的效果。

2. 修改布局文件。打开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">

    <include layout="@layout/layout_top_toolbar"/>

    <FrameLayout
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottom_nav"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/top_toolbar"
        app:navGraph="@navigation/mobile_navigation" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:labelVisibilityMode="unlabeled"
        app:itemIconTint="@color/bottom_nav_color_selector"
        app:itemTextColor="@color/bottom_nav_color_selector"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

使用include标签引入了名为layout_top_toolbar.xml的内容，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/top_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:title="微信"
    app:titleTextColor="@android:color/white" />

其中，layout_top_toolbar.xml中定义了一个支持返回的Toolbar。在activity_main.xml中通过引用，将其展示在顶部位置。另外，修改app:labelVisibilityMode="unlabeled"可以隐藏底部导航栏的文字标签。

1. 定义滑动导航条中各页面之间的切换。在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_home">

    <fragment
        android:id="@+id/navigation_home"
        android:name="com.example.app.ui.home.HomeFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/navigation_dashboard"
        android:name="com.example.app.ui.dashboard.DashboardFragment"
        android:label="@string/title_dashboard"
        tools:layout="@layout/fragment_dashboard" />

    <fragment
        android:id="@+id/navigation_notifications"
        android:name="com.example.app.ui.notifications.NotificationsFragment"
        android:label="@string/title_notifications"
        tools:layout="@layout/fragment_notifications" />
</navigation>

1. 在MainActivity中实现滑动导航条。在MainActivity中，需要将顶部导航栏与底部导航栏关联起来，在导航栏切换的时候显示相应的页面内容。示例如下：

class MainActivity : AppCompatActivity() {

    private lateinit var appBarConfiguration: AppBarConfiguration

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val toolbar: Toolbar = findViewById(R.id.top_toolbar)
        setSupportActionBar(toolbar)

        val navController = findNavController(R.id.nav_host_fragment)
        appBarConfiguration = AppBarConfiguration(navController.graph)
        setupActionBarWithNavController(navController, appBarConfiguration)

        val bottomNav: BottomNavigationView = findViewById(R.id.bottom_nav)
        bottomNav.setupWithNavController(navController)
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.menu_main, menu)
        return true
    }

    override fun onSupportNavigateUp(): Boolean {
        val navController = findNavController(R.id.nav_host_fragment)
        return navController.navigateUp(appBarConfiguration)
                || super.onSupportNavigateUp()
    }
}

在onCreate()方法中，先是找到activity_main.xml中的各个控件对象，然后通过setupWithNavController()方法将底部导航栏与NavController对象关联。在关联之后，就可以通过点击底部导航栏的各个项目，切换到相应的页面。

至此，仿微信5实现滑动导航条的开发就已经完成了。

示例说明

示例1：改变导航栏图标颜色

如果要改变底部导航栏的图标颜色，需要在res/color/目录下新建一个选择器文件bottom_nav_color_selector.xml文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_checked="true"/>
    <item android:color="@android:color/darker_gray" android:state_checked="false"/>
</selector>

这个选择器文件指定底部导航栏中选中图标的颜色为colorAccent，未选中的图标颜色为darker_gray。

示例2：添加页面内容

如果需要添加新的页面内容，需要做如下步骤：

1. 在res/layout/目录下新建一个布局文件，定义页面显示内容。

2. 在res/menu/目录下新建一个菜单文件，定义底部导航栏中显示的图标和标签。

3. 在mobile_navigation.xml中添加相应的指向新页面的Fragment。