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>