Android NavigationBar完全指南 - 手把手教你快速实现页面导航

一、什么是NavigationBar

NavigationBar是Android系统提供的一个视图组件，主要用于界面操作的导航，包括添加按钮、标题栏等。在Android中，NavigationBar通常出现在底部，用于导航、操作和栏目分类。

在实现NavigationBar的过程中，我们需要用到Android提供的Toolbar、TabLayout、ViewPager等组件，来实现多个页面之间的切换和导航，同时也需要进行一定的适配工作，以保证NavigationBar适用于不同的Android版本系统。

二、如何实现NavigationBar

1、首先，我们需要在项目的build.gradle中引入最新的Material Design库，以便使用Design Support Library提供的Toolbar、TabLayout和NavigationView等组件。

    dependencies {
        compile 'com.android.support:design:28.0.0'
    }

2、接下来，我们需要在布局文件中添加Toolbar，作为NavigationBar的容器。

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

3、接着，我们需要在Activity中，设置Toolbar并将其作为ActionBar使用，以便可以在Toolbar中添加按钮、菜单等。

    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

4、接下来，我们需要添加TabLayout和ViewPager组件，以实现多个页面之间的切换和导航，同时也需要自定义TabLayout中Tab的样式等。

    TabLayout tabLayout = findViewById(R.id.tab_layout);
    ViewPager viewPager = findViewById(R.id.view_pager);
    ViewPagerAdapter viewPagerAdapter =
            new ViewPagerAdapter(getSupportFragmentManager());
    viewPager.setAdapter(viewPagerAdapter);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.getTabAt(0).setIcon(R.drawable.ic_home_tab);
    tabLayout.getTabAt(1).setIcon(R.drawable.ic_search_tab);
    tabLayout.getTabAt(2).setIcon(R.drawable.ic_profile_tab);

至此，我们已经实现了NavigationBar的基本功能，可以进行多个页面之间的切换和导航了。

三、NavigationBar的适配问题

在实现NavigationBar时，我们还需要进行一定的适配工作，以确保NavigationBar在不同的Android版本上都可以正常使用。

1、Android 4.4及以下版本：在这些版本中，我们需要使用Toolbar替代ActionBar，同时需要进行适当的样式设置。

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Light"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ToolbarStyle">
        
        <TextView
            android:id="@+id/text_view_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold"/>
            
    </android.support.v7.widget.Toolbar>

2、Android 5.0及以上版本：在这些版本中，我们可以使用原生的Toolbar并设置为ActionBar使用即可。

    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

3、在Android 5.0及以上版本中，我们还可以使用Toolbar的新属性，如elevation和contentInsetStart，来改善NavigationBar的视觉效果。

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Light"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:contentInsetStart="0dp"
        app:elevation="0dp">
        
        <TextView
            android:id="@+id/text_view_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold"/>
            
    </android.support.v7.widget.Toolbar>

四、完整示例代码

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:tabIndicatorColor="@color/white">
        
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_home_tab"/>
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_search_tab"/>
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/ic_profile_tab"/>
            
    </android.support.design.widget.TabLayout>
    
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
    </android.support.v4.view.ViewPager>