Android M 新控件 TabLayout 与 NavigationView 实践

字数1056 阅读1644 评论1 喜欢3

项目地址

DrawerSample.gif

核心是使用 DrawerLayout + NavigationView 实现侧滑菜单
使用 TabLayout + ViewPager 实现Tab效果

NavigationView 是 M 的新控件，可以轻松编写静态的菜单，看它提供的api中貌似不能动态添加菜单项
TabLayout 也是作为 M 的新控件之一，其实在此之前已经有很多大神写出很好用的 TabIndicator 了，只是这次官方统一了一下，不需要使用第三方库。

依赖库

    //核心    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 中作为显示头像之用，不想用可以删除之

侧滑菜单的布局

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>

菜单项的显示

对于菜单项的显示，并不需要重新写一个布局，只需要在 menu 文件夹下建立一个菜单项文件，这应该是 NavigationView 最大的优点了，懒癌晚期的我终于有救了。
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 常用的属性有三个：

属性含义app:tabSelectedTextColorTab 被选中字体的颜色app:tabTextColorTab未被选中字体的颜色app:tabIndicatorColorTab指示器下标的颜色

还有两个比较重要的属性
app:tabMode

• fix：表示所有tab会挤在屏幕内，不可滚动|
• scrollable：表示Tab可以滚动

app:tabGravity

• center：点击接近屏幕边缘的Tab时会聚焦（当然会聚焦啦）并居中
• fill：点击接近屏幕边缘的Tab时会向屏幕中心移动，直至能完全显示整个Tab标签，不会居中

建立 ViewPager 与 Tab 的联系

mTabLayout.setupWithViewPager(mViewPager);

实现菜单与Tab联动

• 点击菜单，Tab滚动

//设置菜单点击监听 mNavigationview.setNavigationItemSelectedListener(this);

• Tab滚动，更改菜单选中项目

 //设置ViewPager滚动监听mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {    @Override    public void onPageScrolled(int position, float positionOffset,                 int positionOffsetPixels) {       }       @Override       public void onPageSelected(int position) {           //更改页面后，通知Activity更改菜单选中项           ((MainActivity)getActivity()).setMenuItem(position);       }       @Override       public void onPageScrollStateChanged(int state) {           }    });