項(xiàng)目地址

DrawerSample.gif

核心是使用 DrawerLayout + NavigationView 實(shí)現(xiàn)側(cè)滑菜單
使用 TabLayout + ViewPager 實(shí)現(xiàn)Tab效果

NavigationView 是 M 的新控件，可以輕松編寫靜態(tài)的菜單，看它提供的api中貌似不能動(dòng)態(tài)添加菜單項(xiàng)
TabLayout 也是作為 M 的新控件之一，其實(shí)在此之前已經(jīng)有很多大神寫出很好用的 TabIndicator 了，只是這次官方統(tǒng)一了一下，不需要使用第三方庫(kù)。

依賴庫(kù)

    //核心
    compile 'com.android.support:design:23.0.1'
    //Circle View
    compile 'de.hdodenhof:circleimageview:1.3.0'
    compile 'com.android.support:recyclerview-v7:23.0.1'

circleimageview只是在drawer_header.xml 中作為顯示頭像之用，不想用可以刪除之

側(cè)滑菜單的布局

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        />
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        android:fitsSystemWindows="true"
        app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

菜單項(xiàng)的顯示

對(duì)于菜單項(xiàng)的顯示，并不需要重新寫一個(gè)布局，只需要在 menu 文件夾下建立一個(gè)菜單項(xiàng)文件，這應(yīng)該是 NavigationView 最大的優(yōu)點(diǎn)了，懶癌晚期的我終于有救了。
drawer.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:checked="true"
            android:id="@+id/menu_item_1"
            android:title="@string/item1"
            />
        <item
            android:id="@+id/menu_item_2"
            android:title="@string/item2"
            />
        <item
            android:id="@+id/menu_item_3"
            android:title="@string/item3"
            />

        <item
            android:id="@+id/menu_item_4"
            android:title="@string/item4"
            />

        <item
            android:id="@+id/menu_item_5"
            android:title="@string/item5"
            />

    </group>
</menu>

顯示Tab

Tab顯示部分用到了 ViewPager 與 TabLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/toolbar_tabbar"
            android:background="?attr/colorPrimary"
            android:scrollbars="horizontal"
            app:tabTextColor="@android:color/black"
            app:tabSelectedTextColor="?attr/colorAccent"
            app:tabBackground="@android:color/white"
            app:tabIndicatorColor="?attr/colorAccent"
            app:tabPaddingStart="8dp"
            app:tabPaddingEnd="8dp"
            app:tabMode="scrollable"
            app:tabGravity="center"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


</android.support.design.widget.CoordinatorLayout>

TabLayout 常用的屬性有三個(gè)：

還有兩個(gè)比較重要的屬性
app:tabMode

• fix：表示所有tab會(huì)擠在屏幕內(nèi)，不可滾動(dòng)|
• scrollable：表示Tab可以滾動(dòng)

app:tabGravity

• center：點(diǎn)擊接近屏幕邊緣的Tab時(shí)會(huì)聚焦（當(dāng)然會(huì)聚焦啦）并居中
• fill：點(diǎn)擊接近屏幕邊緣的Tab時(shí)會(huì)向屏幕中心移動(dòng)，直至能完全顯示整個(gè)Tab標(biāo)簽，不會(huì)居中

建立 ViewPager 與 Tab 的聯(lián)系

mTabLayout.setupWithViewPager(mViewPager);

實(shí)現(xiàn)菜單與Tab聯(lián)動(dòng)

• 點(diǎn)擊菜單，Tab滾動(dòng)

//設(shè)置菜單點(diǎn)擊監(jiān)聽(tīng)
 mNavigationview.setNavigationItemSelectedListener(this);

• Tab滾動(dòng)，更改菜單選中項(xiàng)目

 //設(shè)置ViewPager滾動(dòng)監(jiān)聽(tīng)
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, 
                int positionOffsetPixels) {
                
       }

       @Override
       public void onPageSelected(int position) {
           //更改頁(yè)面后，通知Activity更改菜單選中項(xiàng)
           ((MainActivity)getActivity()).setMenuItem(position);
       }
       
       @Override
       public void onPageScrollStateChanged(int state) {
           }
    });