作者：李旺成
时间：2016年4月22日

四、TabLayout

先看效果：

简介

TabLayout 就是用来做选项卡切换这一类效果的控件，在兼容包中提供。对于 Tab 的实现 Google 上提供过不少方案，先有 TabHost；然后在 Android 3.x 上又出现了 ActionBar 提供的 Tab；现在有了更好的实现，那就是使用用 TabLayout。

当然，还有非常多的各种第三方开源库来实现 Tab，例如：JakeWharton 大神开源的组件 ViewPagerIndicator 相信很多人都用过。

Tabs 选项卡，效果类似网易新闻客户端的 Tab
Google 官方实现的 TabPageIndicator

先看看官方的介绍：

先看继承结构（习惯从继承结构来学习和分析如何使用新控件），和 TabPageIndicator 一样继承自 HorizontalScrollView，这个很好理解，Tab 的数量一多，那就需要横向滑动，直接继承自 HorizontalScrollView 来实现会省事很多（不会偷懒的程序员不是好程序员，呵呵，不记得谁说的了，不发表个人意见）。

对于控件还需要关注的一点就是它的属性（在 Layout 中使用的），那么来看看官方对 TabLayout 的特有属性的介绍：

坑！竟然没有对 TabLayout 特有属性的介绍，那只能先看看它提供的方法了：

好像也没有太多可参考的，那直接用起来。

简单使用

1、导入兼容包

1	compile 'com.android.support:design:23.3.0'

2、直接使用示例

TabLayout 继承自 HorizontalScrollView，那先当作 HorizontalScrollView 试试：
在 Layout 中简单使用，没有使用 TabLayout 特有的属性：

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

在 Java 代码中使用：

private void addTab() {
	mTabsNum += 1;
	TabLayout.Tab tab = mTestTL.newTab().setText("TAB" + mTabsNum);
	mTestTL.addTab(tab);
}

private void removeFirstTab() {
	int count = mTestTL.getTabCount();
	if (count <= 0) return;
	mTestTL.removeTabAt(0);
}

private void removeLastTab() {
	int count = mTestTL.getTabCount();
	if (count <= 0) return;
	mTestTL.removeTabAt(count - 1);
}

private void removeAllTabs() {
	int count = mTestTL.getTabCount();
	if (count <= 0) return;
	mTabsNum = 0;
	mTestTL.removeAllTabs();
}

上面示例代码演示了 Tab 的添加和删除，简单介绍下 Tab 类和 addTab() 方法：

Tab 类：这是 TabLayout 中的静态内部类，看下源码，

构造方法是 private 的，不能直接 new 对象，注释中提示可以使用 TabLayout 的 newTab() 方法来创建实例。

addTab() 方法：addTab() 有四个重载方法，那就看参数最多的那个吧！（参数最多的都会用了，其他的就很简单了）

第一个参数 tab，就是 Tab 类的实例；第二个参数 position，用于指定加入的 Tab 需要插入的位置，这里需注意，调用该方法之前最好通过 getTabCount() 方法获取当前 TabLayout 中所拥有的 Tab 总数，如果 position + 1 大于总 TabLayout 中的 Tab 总数会导致数组越界（这个应该不难理解）；第三个参数 setSelected，用于指定新加入的 Tab 是否为选中状态。

3、配合 ViewPager 使用

TabLayout 是个指示器，确切的说是 ViewPager 的指示器，所以更常见的使用场景是配合 ViewPager 来使用。
在 Layout 中使用：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.diygreen.android6new.newwidget2.TabLayoutDemo3Activity">
    <android.support.design.widget.TabLayout
		android:id="@+id/tl_title"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:scrollbars="none"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/tl_bottom"
        android:scrollbars="none" />
</RelativeLayout>

将把 TabLayout 当作普通的布局使用即可。

在 Java 代码中：

private void initData() {
	int size = mTitleArr.length;
	mViewList = new ArrayList<>(size);
	// 添加 Tab，初始化 View 列表
	for (int i = 0; i < size; i++) {
		mTitleTL.addTab(mTitleTL.newTab().setText(mTitleArr[i]));
		View view = LayoutInflater.from(this).inflate(R.layout.item_tablayoutdemo2_vp, null);
		TextView tv = (TextView) view.findViewById(R.id.tv_text);
		tv.setText(mTitleArr[i]);
		mViewList.add(view);
	}
	mAdapter = new TabLayoutDemo2PagerAdapter(mViewList);

	// 填充 ViewPager
	mContentVP.setAdapter(mAdapter);
	// 给ViewPager添加监听
	mContentVP.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTitleTL));
	// 设置setOnTabSelectedListener
	mTitleTL.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
		@Override
		public void onTabSelected(TabLayout.Tab tab) {
			// 切换到指定的 item
			mContentVP.setCurrentItem(tab.getPosition());
		}

		@Override
		public void onTabUnselected(TabLayout.Tab tab) {
		}

		@Override
		public void onTabReselected(TabLayout.Tab tab) {

		}
	});
}

要实现 TabLayout 与 ViewPager 的联动，有两个关键方法：
// 给 ViewPager 添加页面改变监听
addOnPageChangeListener()
// 设置 Tab 选择监听
setOnTabSelectedListener()
上面代码中都做了示例，使用也很简单。

说明：还有另一种方式来实现联动，使用的是 setupWithViewPager() 方法
// 设置 TabLayout 与 ViewPager 联动
setupWithViewPager()：该方法在 TabLayoutDemo4Activity.java 中使用了，会在下面做说明。

4、实现底部 Tab

这个很简单，直接看布局文件就可以了。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.diygreen.android6new.newwidget2.TabLayoutDemo3Activity">
    <android.support.design.widget.TabLayout
        android:id="@+id/tl_bottom"
        style="@style/DIYTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/tl_bottom"
        android:scrollbars="none" />
</RelativeLayout>

汗，把 TabLayout 放到 ViewPager 下面即可…

5、自定义 TabLayout 样式

TabLayout 的特有属性：

看着好像不少，但仔细看一下，其实不多，而且这些属性名称大部分应该都认识，或者说在其他控件中使用过。

没有文档说明，那就看着效果来简单解释下这些属性，还是那句话先用起来。

效果如图：

首先，在 style 文件中定义：

<!-- 自定义 TabLayout 样式 -->
<style name="DIY.TabLayout" parent="Widget.Design.TabLayout">
	<item name="paddingEnd">10dp</item>
	<item name="paddingStart">10dp</item>
	<item name="tabBackground">@color/colorPrimaryDark</item>
	<item name="tabContentStart">10dp</item>
	<item name="tabGravity">center</item>
	<item name="tabIndicatorColor">#999900</item>
	<item name="tabIndicatorHeight">6dp</item>
	<item name="tabMaxWidth">@dimen/tab_max_width</item>
	<item name="tabMinWidth">@dimen/tab_min_width</item>
	<item name="tabMode">scrollable</item>
	<item name="tabPaddingBottom">2dp</item>
	<item name="tabPaddingEnd">10dp</item>
	<item name="tabPaddingStart">10dp</item>
	<item name="tabPaddingTop">15dp</item>
	<item name="tabSelectedTextColor">#ffcc00</item>
	<item name="tabTextAppearance">@style/DIY.TabTextAppearance</item>
	<item name="tabTextColor">#000066</item>
</style>
<!-- 自定义 TabText 的外观 -->
<style name="DIY.TabTextAppearance" parent="TextAppearance.Design.Tab">
	<item name="android:textSize">14sp</item>
	<item name="android:textColor">#006600</item>
	<item name="textAllCaps">false</item>
</style>

然后，在 Layout 中使用样式

<android.support.design.widget.TabLayout
	android:id="@+id/tl_title"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	style="@style/DIY.TabLayout"/>

有几个属性要解释一下：

tabGravity：用来设置 TabLayout 的布局方式，只有两个可选值fill 和 center，默认值是 fill
tabIndicatorColor：用来设置底部指示器的颜色
tabIndicatorHeight：用来设置底部指示器的高度
tabMode：用来设置 TabLayout 的布局模式，有两个取值
fixed：固定不可滚动
scrollable: 可滚动的

对应的 Java 方法：

setTabGravity()
setSelectedTabIndicatorColor()
setSelectedTabIndicatorHeight()
setTabMode():MODE_FIXED 或 MODE_SCROLLABLE

其他的属性都是用于设置 Tab 中文本的属性，这基本上可以参考 TextView。

6、给 TabLayout 加角标

其实就是利用 TabLayout.Tab 的 setCustomView() 方法，最好自己维护好为 Tab 设置的 CustomView 列表，以便更新数据。

简单的示例：

private void initData() {
	int size = mTitleArr.length;
	mTabItemViewList = new ArrayList<>(size);
	mViewPagerViewList = new ArrayList<>(size);
	// 添加 Tab，初始化 View 列表
	for (int i = 0; i < size; i++) {
		View tabView = LayoutInflater.from(this).inflate(R.layout.item_tablayout_item, null);
		TextView tabViewTV = (TextView) tabView.findViewById(R.id.tv_tab);
		tabViewTV.setText(mTitleArr[i]);
		mTabItemViewList.add(tabView);

		View vpView = LayoutInflater.from(this).inflate(R.layout.item_tablayoutdemo2_vp, null);
		TextView viViewTV = (TextView) vpView.findViewById(R.id.tv_text);
		viViewTV.setText(mTitleArr[i] + i);
		mViewPagerViewList.add(vpView);
	}
	mAdapter = new TabLayoutDemo2PagerAdapter(mViewPagerViewList);

	// 填充 ViewPager
	mContentVP.setAdapter(mAdapter);
	mTitleTL.setupWithViewPager(mContentVP);
	size = mTitleTL.getTabCount();
	for (int i = 0; i < size; i++) {
		TabLayout.Tab tab = mTitleTL.getTabAt(i);
		if (tab != null) {
			tab.setCustomView(mTabItemViewList.get(i));
		}
	}
	mContentVP.setCurrentItem(1);
}

注意事项

1、关于 TabMode
如果你发现你的 TabLayout 不能滚动，那么可能是没有设置 TabMode 为 MODE_SCROLLABLE 的缘故

2、关于 remove 方法
TabLayout 的 removeXxx 方法没有什么问题，这里要说的是当 TabLayout 与 ViewPager 一起使用的时候，ViewPager 不能同步刷新的问题。设想一下你在删除 Tab 的同时希望删除该 Tab 下 ViewPager 中的相应页面，这时你修改 ViewPager 的数据源，然后调用 ViewPager Adapter 的 notifyDataSetChanged()（ListView 中是这个思路，并且没什么问题），你会发现结果并不是你料想的那般。

对于该问题，不是一两句话可以说清楚的，你可以 Google 一下“ViewPager notifyDataSetChanged 无效”，有一大堆文章在讨论这个问题，但是都不能覆盖所有场景。所以，打算专门写一篇文章来讨论这个问题。

3、关于 setupWithViewPager 方法
在设置 TabLayout 与 ViewPager 联动的时候，有一种方式是，分别调用 ViewPager 的 addOnPageChangeListener() 方法关联 TabLayout，和 TabLayout 的 setOnTabSelectedListener() 方法关联 ViewPager；这样才能达到联动的目的。

还有一种方式是通过 TabLayout 的 setupWithViewPager() 方法，刚开始以为直接调用该方法即可完成联动（就是第一种方式的其他代码都不动，只是删除关联用到的两个方法）。试了一下，结果发现 Tab 的文本没有显示出来，下面的线条有了，而且可以联动。坑！有没有，我没打算去分析里面的原因了，直接给出正确的添加 Tab 的方式，注意是调用 setupWithViewPager() 方法的时候：

private void initData() {
	int size = mTitleArr.length;
	mViewList = new ArrayList<>(size);
	// 初始化 View 列表
	for (int i = 0; i < size; i++) {
		View view = LayoutInflater.from(this).inflate(R.layout.item_tablayoutdemo2_vp, null);
		TextView tv = (TextView) view.findViewById(R.id.tv_text);
		tv.setText(mTitleArr[i]);
		mViewList.add(view);
	}
	mAdapter = new TabLayoutDemo2PagerAdapter(mViewList);

	// 填充 ViewPager
	mContentVP.setAdapter(mAdapter);
	mTitleTL.setupWithViewPager(mContentVP);
	size = mTitleTL.getTabCount();
	for (int i = 0; i < size; i++) {
		TabLayout.Tab tab = mTitleTL.getTabAt(i);
		if (tab != null) {
			tab.setText(mTitleArr[i]);
		}
	}
	mContentVP.setCurrentItem(1);
}
``` 

**4、关于 setScrollPosition 方法**
该方法是用来设置 Tab 下那条线的位置的，来看下方法签名：
```java
public void setScrollPosition(int position, float positionOffset, boolean updateSelectedText)

这里想说明的问题是，该方法使用的时候容易引起误会，对第二个参数不理解。

第一个参数表示当前 Tab 的位置，第二个参数是偏移值，该值的取值范围是0到1的一个半开区间，最后一个参数表示是否置移动后位置所对应的Tab为选中状态。这里要说明的是 positionOffset 这个参数是一个倍数值，这里不打算分析其实现，有兴趣的可以去看看这篇文章TabLayout：另一种Tab的实现方式，里面解释得不错。

5、setTabGravity 方法
上面介绍了该方法的作用，要注意的是 setTabGravity 方法只有在 Mode 为 MODE_FIXED 的情况下才有用。

6、setTabTextColors 方法无效？
setTabTextColors 当然不是说真的无效，场景是这样的，如果你在 addTab 方法之后，再来调用该方法，这时会看到，该方法没有起作用（TabLayout 的 Bug 有没有？）。

当然这也不是什么无解的问题，我们完全可以通过使用自定义 View 的来作为 TabLayout 的 Item，那么这个控制权就全部在我们手上了。

小结

TabLayout 的介绍就到这里了，使用比较简单。

五、NavigationView

先看看效果：

简介

NavigationView 是兼容包中提供的用来实现导航菜单界面的新控件，看看该控件的特点：

导航抽屉，被设计用于应用导航
提供了一种通用的导航方式，体现了设计的一致性
导航菜单框架，使用menu资源填充数据
可以更简单高效的实现导航菜单

来看下官方介绍：

NavigationView 继承自 Framelayout，从继承结构来看，参考意义不大，好在官方给了示例代码，那了解下它特有的属性，然后用起来再说。

NavigationView 的特有属性：

简单使用

1、导入兼容包

1	compile 'com.android.support:design:23.3.0'

2、在 Layout 中使用

<?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/dl_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- Content -->
    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_title"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways" />
    </FrameLayout>

    <!-- Drawer -->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer_menu"/>
</android.support.v4.widget.DrawerLayout>

3、定义 headerLayout
在上面的 NavigationView 中使用了 app:headerLayout，该属性不是必须的，这里是为了更完整的演示如何使用。这个 headerLayout 就是一个自定义的布局，如：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="170dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:background="@mipmap/bg_drawer_header">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:id="@+id/iv_headimg"
        android:src="@mipmap/ic_logo"
        android:layout_above="@+id/switch_online"
        android:layout_alignParentStart="true" />
    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/switch_online"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:checked="false" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="DIY-green"
        android:id="@+id/tv_name"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

4、定义 menu
NavigationView 的 app:menu 属性用于指定自定义的菜单布局文件，一般是必选项，当然也可以在代码中动态设置。这个 menu 也不是什么新东西，直接看代码就明白了：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:checkableBehavior="single">
        <item
            android:id="@+id/drawer_home"
            android:checked="true"
            android:icon="@mipmap/ic_alarm_add_black"
            android:title="Alarm"/>
        <item
            android:id="@+id/drawer_favourite"
            android:icon="@mipmap/ic_cast_connected_black"
            android:title="Connected"/>
        <!-- 为 Item 添加子菜单，实现分组 -->
        <item
            android:id="@+id/section"
            android:icon="@mipmap/ic_more_horiz_grey"
            android:title="Group">
            <menu>
                <group
                    android:checkableBehavior="single">
                <item
                    android:id="@+id/drawer_downloaded"
                    android:icon="@mipmap/ic_computer_grey"
                    android:title="Computer"/>
                <item
                    android:id="@+id/drawer_more"
                    android:icon="@mipmap/ic_border_color_grey"
                    android:title="Border"/>
                </group>
            </menu>
        </item>
        <item
            android:id="@+id/drawer_settings"
            android:icon="@mipmap/ic_fullscreen_black"
            android:title="FullScreen"/>
    </group>
</menu>

上面示例代码中使用了 android:checkableBehavior=”single” 属性，是为了保证该 Group 下的 Item 为单选状态，这个会在注意事项里面详细介绍。

可以通过为 Item 添加子菜单来实现带有头部的分组效果，注意一下分组的效果，在该分组的最上面会添加一条分隔；还有就是虽然示例代码中给分组 Item 设置了 icon 属性，但是并不会显示。

5、设置 Menu Item 的点击监听
直接使用 NavigationView 的 setNavigationItemSelectedListener() 方法即可：

mLeftNavigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
	@Override public boolean onNavigationItemSelected(MenuItem menuItem) {
		Snackbar.make(mContentView, menuItem.getTitle() + " pressed", Snackbar.LENGTH_LONG).show();
		menuItem.setChecked(true);
		mRootDL.closeDrawers();
		return true;
	}
});

NavigationView 的封装性比较高，使用起来比较简单，代码不多，但是有些小细节需要注意。

注意事项

将 NavigationView 布局的内容延伸到状态栏实实现

先看下效果：

图中使用红线条圈出来的就是将 NavigationView 布局的内容延伸到状态栏实的效果。

要实现该效果，有几个要注意的地方：

android:fitsSystemWindows 属性
最好将 DrawerLayout 和 NavigationView 的该属性都设置为 true

values-v21 中的 style

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 该属性必须 -->
	<item name="android:windowTranslucentStatus">true</item>
	<item name="android:colorControlHighlight">@color/colorPrimary</item>
	<item name="android:windowSharedElementsUseOverlay">false</item>
</style>

要实现上述效果，按照这两步走就 OK 了。关于该问题更进一步的讨论，可以参考知乎上的一个提问： Android 5.0 如何实现将布局的内容延伸到状态栏实?，在这里就不展开讨论了。

有分组时 Item 单选实现

上面说了，将 Group 中的 android:checkableBehavior 设置为 “single” 是为了实现菜单项的单选。

但现在有个问题，如果在菜单项下面有子菜单，也就是有分组的情况时；如果仅在最外层使用 group 标签，如下

<group
	android:checkableBehavior="single">
        ...
</group>

包裹所有的菜单项和分组的话，是达不到单选效果的。（这里就不演示了，你可以自行修改示例项目去看看效果）

我的解决方案是将分组的 Item 也用 group 标签包裹，当然也得将 checkableBehavior 属性设置为 “single”，看代码：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- 最外层使用 group 标签 --->
    <group
        android:checkableBehavior="single">
        <item
            android:id="@+id/drawer_home"
            android:checked="true"
            android:icon="@mipmap/ic_alarm_add_black"
            android:title="Alarm"/>
        ...
        <item
            android:id="@+id/section"
            android:icon="@mipmap/ic_more_horiz_grey"
            android:title="Group">
            <menu>
				<!-- 在分组中使用 group 标签 --->
                <group
                    android:checkableBehavior="single">
                <item
                    android:id="@+id/drawer_downloaded"
                    android:icon="@mipmap/ic_computer_grey"
                    android:title="Computer"/>
                <item
                    android:id="@+id/drawer_more"
                    android:icon="@mipmap/ic_border_color_grey"
                    android:title="Border"/>
                </group>
            </menu>
        </item>
        ...
    </group>
</menu>