作者:李旺成
时间:2016年4月22日
接上篇:AndroidStudyDemo之Android6.x新控件介绍(一)
四、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、导入兼容包
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 下那条线的位置的,来看下方法签名:
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、导入兼容包
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>
NavigationView 配合 DrawerLayout 来实现侧滑菜单是不错的选择,更关键的是这些都是 Google 官方提供的控件,兼容性方面会好点。
小结
本来打算只用两篇来介绍 Android 6.x 中的新控件的,但是考虑到有不少控件都是 MaterialDesign 中的比较重要的成员,所以,会稍微介绍详细点。
Android 6.x 的新控件介绍还有一篇,这将是 Android 6.x 系列介绍的最后一篇了。
未完待续...
项目地址
附件
参考
TabLayout:另一种Tab的实现方式
使用Desgin包组件 TabLayout助你轻松打造网易搜狐顶部导航栏
Material Design之NavigationView和DrawerLayout实现侧滑菜单栏
使用TabLayout实现底部Tab布局
android design library提供的TabLayout的用法
Android Design Support Library初探,NavigationView实践
Android 5.0 如何实现将布局的内容延伸到状态栏实?
Design Support Library (I): Navigation View的使用