一、概述
TabLayout继承关系.png
它也是design中新出的一个控件，用来实现选项卡切换的效果，以前我们常用RadioGroup+RadioButton或者TabHost等来实现，现在可以用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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.androidwanga.serenitynanian.serenityproject.TabLayoutActivity">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
</android.support.design.widget.CoordinatorLayout>
在Activity中的代码设置如下：
mTabLayout = (TabLayout) findViewById(R.id.ac_tablayout);
//最基本的使用
mTabLayout.addTab(mTabLayout.newTab().setText("tab1"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab2"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab3"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab4"));
基本的效果图.png
进本的使用方式还有另外一种，如下布局，直接在xml中填充布局选项：
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.androidwanga.serenitynanian.serenityproject.TabLayoutActivity">
<android.support.design.widget.TabLayout
app:tabMode="fixed"
android:id="@+id/ac_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:text="Tab1"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:text="Tab2"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:text="Tab3"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:text="Tab4"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.CoordinatorLayout>
一般情况下，布局的tab项是动态配置的，就不能这样使用，必须在代码中动态配置；
三、TabLayout常用的属性
- 1.app:tabIndicatorColor 设置指示器的颜色；
- 2.app:tabIndicatorHeight 设置指示器的高度；
- 3.app:tabTextColor 设置Tab文本默认的颜色，如果不设置，默认黑色；
- 4.app:tabSelectedTextColor 设置tab被选中的文本的颜色，如果不设置，默认是黑色；
- 5.app:tabTextAppearance 设置tab文本样式，一般需要为tab添加图标时使用，引用一个style布局，可以代替上面的3和4的设置，如果3、4、5同时设置，5将不起作用；
- 6.app:tabBackground 设置tab的背景色；
- 7.app:tabGravity 设置tab项的对齐方式
- 1.center 居中显示；
- 2.fill 填满显示；
- 8.app:tabMode 有两个值；
- 1.fixed 用于标题栏少于一屏幕的情况，每个tab将平分屏幕的宽度；
- 2.scrollable 用于标题栏一屏幕显示不下的情况，可以左右滚动；如果占不满一屏幕，只会占用一部分，效果不太好，具体的根据需求来设置；
- 9.app:tabContentStart 设置tab开始布局的位置距离左边的距离，此时tabMode必须为scrollable才有效果，否则无效果；
- 10.app:tabMinWidth 设置tab项的最小宽度；
- 11.app:tabMaxWidth 设置tab项的最大宽度；如果tabMaxWidth小于tabMinWidth，会以tabMaxWidth为准；
- 12.app:tabPadding 设置tab的内边距：
- app:tabPaddingStart
- 2.app:tabPaddingBottom
- 3.app:tabPaddingTop
- 4.app:tabPaddingEnd
备注：以上属性都能通过代码设置
四 、TabLayout中的代码配置tab项
TabLayout.newTab() 创建标签
TabLayout.addTab() 添加标签 ：因为TabLayout继承自HorizontalScrollView，所以可以直接添加View,内部使用addView（）；
TabLayout.removeTab() 删除标签
TabLayout.removeTabAt() 通过索引删除标签
TabLayout.removeAllTabs() 删除全部标签
五 、添加监听
TabLayout.addOnTabSelectedListener(TabLayout.OnTabSelectedListener listener) 添加监听器；
TabLayout.removeOnTabSelectedListener(abLayout.OnTabSelectedListener listener) 取消监听器；
TabLayout.clearOnTabSelectedListeners() 清除所有的监听；
六 、获取TabLayout的属性
TabLayout.getSelectedTabPosition() 获取当前选中的Tab的位置；
TabLayout.getTabAt(int index) 根据索引获取当前索引的Tab；
TabLayout.getTabCount() 获取tab的总数；
TabLayout.getTabMode() 获取tab的mode；有对应的set方法；
TabLayout.getTabTextColors() 获取对应tab的TextColor属性；有对应的set方法；
TabLayout.setupWithViewPager(ViewPager viewPager) 设置与之关联的ViewPager，随着ViewPager的滑动而滑动；
TabLayout和ViewPager常见的使用方式有两种：
1.ViewPager包裹TabLayout进行嵌套，不需要设置setupWithViewPager，如果嵌套了还设置了此方法，就会报错;
2.如果没有设置，则需要在ViewPager设置Adapter之后设置setupWithViewPager；
3.注意：只能ViewPager嵌套TabLayout,反了就会报错，因为TabLayout中只能嵌套TabItem；
七 、TabLatyou中的内部类：Tab
Tab表示TabLayout中的一个标签;具体的属性如下：
- boolean isSelected() tab是否被选中；
- 2.void setSelected() 设置tab为被选中状态；
- 3.Tab setText() 设置tab的文本内容；
- 4.String getText() 得到tab的文本内容；
- 5.Tab setIcon() 为tab设置图标；
- 6.Drawable getIcon() 获取tab的图标；
- 7.Tab setCustomView(int resId or View view) 设置自定义的View，参数为资源id或View对象；
- 8.int getPosition() 获取当前的位置；
八 、TabLayout自定义Tab布局--使用setCustomView
- 1.首先自定义一个布局，item_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="40dp"
android:src="@mipmap/ic_launcher_round"
android:layout_gravity="center"
android:id="@+id/item_imageview"
android:layout_height="40dp" />
<TextView
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:id="@+id/item_textview"
android:layout_gravity="center"
android:text="desc"
android:gravity="center"
android:layout_height="wrap_content" />
</LinearLayout>
- 2.其次，在FragmentPageAdapter中重写getPageTitle方法，返回null，其实不重写也行；然后自定义一个获取View的方法，如下：
/**
* 使用我们自定义的布局时，这里返回null
* @param position
* @return
*/
@Override
public CharSequence getPageTitle(int position) {
return null ;
}
/**
* 定义一个方法 返回tab中要显示的内容；
* 注意：在我们使用自定义的tab时，将getPagerTitle返回null，不设置也一样的
* @param position
* @return
*/
public View getCustomTabView(int position) {
View view = LayoutInflater.from(mContext).inflate(R.layout.item_tablayout, null);
ImageView image = (ImageView) view.findViewById(R.id.item_imageview);
TextView textView = (TextView) view.findViewById(R.id.item_textview);
textView.setText(titles.get(position));
image.setImageResource(images[0]);
return view ;
}
- 3.在Activity中给每一个tab项设置自定义的View即可；在setupWithViewPager方法之后调用上述方法给每一个Tab设置自定义View；
List<String> titles = new ArrayList<>();
for (int i = 'A';i<'z';i++) {
titles.add("" + (char) i);
}
List<Fragment> fragments = new ArrayList<>();
for (String title : titles) {
DemoFragment fragment = new DemoFragment().newInstance(title);
fragments.add(fragment);
}
DemoFragmentAdapter adapter = new DemoFragmentAdapter(this,getSupportFragmentManager(),titles,fragments);
mViewPager.setAdapter(adapter);
mTabLayout.setupWithViewPager(mViewPager);
/**
* 给每一个Tab设置自定义布局
*/
for (int i = 0;i<mTabLayout.getTabCount();i++) {
TabLayout.Tab tab_item = mTabLayout.getTabAt(i);
tab_item.setCustomView(adapter.getCustomTabView(i));
}
