1、需求
TabLayout+Viewpager+Fragment，在tab中显示一个红点，用来标识是否有新消息未读，需要实时刷新。又或者tab中显示的内容需要自定义，不止显示文字，文字还需要不同的背景变换。
2、TabLayout相关属性
2.1 、 继承关系
2.2 、 和viewpager关联使用
最重要的使用方法：setupWithViewPager (ViewPager viewPager)
2.3 、 控件属性
咱依次来看（其实看属性名，大概就知道这是干啥使的），当然TabLayout不光有这些属性，它父类有的它都可以使用。
android.support.design:tabBackground — 设置的背景。
android.support.design:tabContentStart — 相对起始位置tab的Y轴偏移量。
android.support.design:tabGravity — tab的布局方式，两个值GRAVITY_CENTER （内容中心显示） 和 GRAVITY_FILL （内容尽可能充满TabLayout）。
android.support.design:tabIndicatorColor — 设置tab指示器(tab的下划线)的颜色。
android.support.design:tabIndicatorHeight — 设置tab指示器(tab的下划线)的高度。
android.support.design:tabMaxWidth — 设置tab选项卡的最大宽度。
android.support.design:tabMinWidth — 设置tab选项卡的最小宽度。
android.support.design:tabMode — 设置布局中tab选项卡的行为模式，两个常量MODE_FIXED （固定的tab）和 MODE_SCROLLABLE（滑动的tab）。
android.support.design:tabPadding — 设置tab的内边距（上下左右）。
android.support.design:tabPaddingBottom — 设置tab的底部内边距。
android.support.design:tabPaddingEnd — 设置tab的右侧内边距。
android.support.design:tabPaddingStart — 设置tab的左侧内边距。
android.support.design:tabPaddingTop — 设置tab的上方内边距。
android.support.design:tabSelectedTextColor — 设置tab被选中时的文本颜色。
android.support.design:tabTextColor — 设置tab默认的文本颜色。
android.support.design:tabTextAppearance — 设置tab的TextAppearance样式的引用，可以引用另一个资源，形式为“@ [+]
[package：] type / name”或主题属性，格式为“？[package：] type / name”。。
2.4 、 公共方法
addOnTabSelectedListener（TabLayout.OnTabSelectedListener listener）
添加一个TabLayout.OnTabSelectedListener监听事件，当tab选择更改时，它将被调用。addTab（TabLayout.Tab tab，boolean setSelected）
向此布局添加选项卡。addTab（TabLayout.Tab tab，int position）
向此布局添加选项卡。addTab（TabLayout.Tab tab）
向此布局添加选项卡。addTab（TabLayout.Tab tab，int position，boolean setSelected）
向此布局添加选项卡。addView（View child，int index）
添加子视图到指定位置。addView（View child）
添加子视图。addView（View child，ViewGroup.LayoutParams params）
添加具有指定布局参数的子视图。addView（View child，int index，ViewGroup.LayoutParams params）
添加具有指定布局参数的子视图。clearOnTabSelectedListeners（）
删除所有以前添加的TabLayout.OnTabSelectedListeners。FrameLayout.LayoutParams generateLayoutParams（AttributeSet attrs）
根据提供的属性集返回一组新的布局参数。int getSelectedTabPosition（）
返回当前所选标签的位置。TabLayout.Tab getTabAt（int index）
返回指定位置的tab。int getTabCount（）
返回当前在操作栏中注册的选项卡数。int getTabGravity（）
返回当前的标签tab的布局方式，GRAVITY_CENTER （内容中心显示） 和 GRAVITY_FILL （内容尽可能充满TabLayout）。int getTabMode（）
返回tab选项卡的行为模式,MODE_FIXED* （固定的tab）和 MODE_SCROLLABLE（滑动的tab）。ColorStateList getTabTextColors（）
获取用于选项卡的不同状态（正常，已选择）的文本颜色。TabLayout.Tab newTab ()
创建并返回一个新的TabLayout.Tab。removeAllTabs（）
从操作栏中删除所有选项卡，并取消选择当前选项卡。removeOnTabSelectedListener（TabLayout.OnTabSelectedListener listener）
删除以前通过addOnTabSelectedListener（OnTabSelectedListener）添加的给定
TabLayout.OnTabSelectedListener，tab选中监听器。removeTab（TabLayout.Tab tab）
从布局中删除选项卡。removeTabAt（int position）
从布局中删除选项卡。setOnTabSelectedListener（TabLayout.OnTabSelectedListener listener）
API方法24.0.0中已弃用此方法。使用addOnTabSelectedListener（OnTabSelectedListener）和removeOnTabSelectedListener（OnTabSelectedListener）。setScrollPosition（int position，float positionOffset，boolean updateSelectedText）
设置选项卡的滚动位置，当标签tab显示为滚动容器（如ViewPager）的一部分时，此功能非常有用。
参数:
位置int：当前滚动位置
positionOffset float：表示从位置偏移的[0, 1)的值。
updateSelectedText boolean：是否更新文本的选择状态。。setSelectedTabIndicatorColor（int color）
设置选中的tab的指示器（下划线）颜色。setSelectedTabIndicatorHeight（int height）
设置选中的tab的指示器的高度。setTabGravity（int gravity）
设置TabLayout的布局方式，GRAVITY_CENTER （内容中心显示） 和 GRAVITY_FILL （内容尽可能充满TabLayout）。。setTabMode（int mode）
设置tab选项卡的行为模式,MODE_FIXED* （固定的tab）和 MODE_SCROLLABLE（滑动的tab）。setTabTextColors（int normalColor，int selectedColor）
设置用于选项卡的不同状态（常规，选定）的文本颜色。setTabTextColors（ColorStateList textColor）
设置用于选项卡的不同状态（常规，选定）的文本颜色。setTabsFromPagerAdapter（PagerAdapter adapter）
API方法23.2.0中已弃用此方法。使用setupWithViewPager（ViewPager）将TabLayout与ViewPager链接在一起。当使用该方法时，当更改PagerAdapter时，TabLayout将自动更新。setupWithViewPager（ViewPager viewPager，boolean autoRefresh）
将TabLayout与ViewPager链接在一起，当更改PagerAdapter时，TabLayout是否更新由autoRefresh决定。setupWithViewPager（ViewPager viewPager）
将TabLayout与ViewPager链接在一起。shouldDelayChildPressedState（）
如果此ViewGroup的子代或子孙后代按下的状态应该被延迟，则返回true。 一般来说，应该对可以滚动的容器（如List）进行此操作。 这防止当用户实际上尝试滚动内容时出现按压状态。 由于兼容性原因，默认实现返回true。 不滚动的子类通常会覆盖此方法并返回false。
3、实际使用
列举几种在项目中用的实例
3.1、 主界面底部菜单栏
要点：自定义TabLayout中的tab
3.1.1 、 TabLayout中的tab布局文件
<?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:gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="2dp"
android:paddingTop="2dp">
<ImageView
android:id="@+id/imgView"
android:layout_width="20dp"
android:layout_height="18dp"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:lines="1"
android:text="首页"
android:textColor="@drawable/btm_text_color"
android:textSize="@dimen/size_12sp" />
</LinearLayout>
3.1.2 、 tab中的选择器
- tab的文本选择器btm_text_color
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Non focused states -->
<item
android:color="@color/colorGray"
android:state_focused="false"
android:state_pressed="false"
android:state_selected="false" />
<item
android:color="@color/base_color"
android:state_focused="false"
android:state_pressed="false"
android:state_selected="true" /> <!-- Focused states --> <item
android:color="@color/colorGray"
android:state_focused="true"
android:state_pressed="false"
android:state_selected="false" />
<item
android:color="@color/base_color"
android:state_focused="true"
android:state_pressed="false"
android:state_selected="true" /> <!-- Pressed -->
<item
android:color="@color/base_color"
android:state_pressed="true" />
</selector>
- tab图标选择器示例
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/score_normal"
android:state_selected="false" />
<item
android:drawable="@drawable/score_selected"
android:state_selected="true" />
</selector>
3.1.3 、 viewpager适配器MyFragmentPagerAdapter
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private Context context;
private String[] mTitles = new String[]{"首页", "分类", "积分商城", "外卖", "购物车"};
public MyFragmentPagerAdapter(FragmentManager fm, Context context) {
super(fm);
this.context = context;
}
private ShopcarFragment carFragment;
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return HomeFragment.newInstance();
case 1:
return TypeFragment.newInstance();
case 2:
return ScoreMallFragment.newInstance();
case 3:
return TakeoutFragment.newInstance();
case 4:
if (carFragment == null) {
carFragment = ShopcarFragment.newInstance();
}
return carFragment;
default:
return HomeFragment.newInstance();
}
}
@Override
public int getItemPosition(Object object) {
if (object instanceof ScoreMallFragment) {
return POSITION_NONE; // 刷新
}
return POSITION_UNCHANGED;
}
@Override
public int getCount() {
return mTitles.length;
}
//ViewPager与TabLayout绑定后，这里获取到PageTitle就是Tab的Text
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
private int[] imageResId = {R.drawable.selecter_home_tab, R.drawable.selecter_mall_tab, R.drawable.selecter_score_tab, R.drawable.selecter_takeout_tab, R.drawable.selecter_car_tab};
public View getTabView(int position) {
View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
TextView tv = (TextView) v.findViewById(R.id.textView);
tv.setText(mTitles[position]);
ImageView img = (ImageView) v.findViewById(R.id.imgView);
img.setImageResource(imageResId[position]);
return v;
}
}
3.1.4 、 MainActivtiy中使用
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.main_viewPager);
mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), MainActivity.this);
mViewPager.setAdapter(myFragmentPagerAdapter);
//将TabLayout与ViewPager绑定在一起
mTabLayout.setupWithViewPager(mViewPager);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
TabLayout.Tab tab = mTabLayout.getTabAt(i);
if (tab != null) {
tab.setCustomView(myFragmentPagerAdapter.getTabView(i));
}
//------------------------------跳到指定的fragment--------------------------
if (isScore && 2 == i) {
mViewPager.setCurrentItem(i);
}
if (isCar && 4 == i) {
mViewPager.setCurrentItem(i);
}
}
//------------------------------------------------------------------------------------
if (!isScore && !isCar) {
mViewPager.setCurrentItem(1);
mViewPager.setCurrentItem(0);
}
}
3.2、 TabLayout常用导航栏
重点：获取自定义tab中的控件，进行相关操作
3.2.1 、 TabLayout中的tab布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:lines="1"
android:paddingRight="@dimen/length_5dp"
android:text="首页"
android:textColor="@drawable/selecter_order_text"
android:textSize="@dimen/size_16sp" />
<TextView
android:id="@+id/has_new_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toEndOf="@+id/textView"
android:layout_toRightOf="@+id/textView"
android:text="●"
android:textColor="@color/colorRed"
android:textSize="12sp"
android:visibility="invisible" />
</RelativeLayout>
3.2.2 、 tab中的文本选择器
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Non focused states -->
<item
android:color="@color/colorBlack"
android:state_focused="false"
android:state_pressed="false"
android:state_selected="false" />
<item
android:color="@color/colorRed"
android:state_focused="false"
android:state_pressed="false"
android:state_selected="true" /> <!-- Focused states --> <item
android:color="@color/colorBlack"
android:state_focused="true"
android:state_pressed="false"
android:state_selected="false" />
<item
android:color="@color/colorRed"
android:state_focused="true"
android:state_pressed="false"
android:state_selected="true" /> <!-- Pressed -->
<item
android:color="@color/colorRed"
android:state_pressed="true" />
</selector>
3.2.3 、 viewpager适配器MyMsgAdapter
public class MyMsgAdapter extends FragmentPagerAdapter {
private Context context;
private Handler tabHandler;
private String[] mTitles = new String[]{"交易消息", "系统消息"};
public MyMsgAdapter(FragmentManager fm, Context context, Handler handler) {
super(fm);
this.context = context;
this.tabHandler = handler;
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return MsgBuyFragment.newInstance(tabHandler);
case 1:
return MsgSystemFragment.newInstance(tabHandler);
default:
return MsgBuyFragment.newInstance(tabHandler);
}
}
@Override
public int getCount() {
return mTitles.length;
}
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
public View getTabView(int position) {
View v = LayoutInflater.from(context).inflate(R.layout.msg_tab, null);
TextView tv = (TextView) v.findViewById(R.id.textView);
tv.setText(mTitles[position]);
return v;
}
}
3.2.4 、MyMsgActivity中使用
重点是刷新消息的时候，获取自定义tab中的相关控件。最主要的就是tab的两个方法，setCustomView()和getCustomView()，设置tab的自定义布局和获取tab的自定义布局
private void initView() {
//使用适配器将ViewPager与Fragment绑定在一起
adapter = new MyMsgAdapter(getSupportFragmentManager(), MyMsgActivity.this, tabHandler);
viewPagerMsg.setAdapter(adapter);
//将TabLayout与ViewPager绑定在一起
tablayoutMsg.setupWithViewPager(viewPagerMsg);
for (int i = 0; i < tablayoutMsg.getTabCount(); i++) {
TabLayout.Tab tab = tablayoutMsg.getTabAt(i);
if (tab != null) {
tab.setCustomView(adapter.getTabView(i));
}
}
}
private int notReadSys = 0;
private int notReadBuy = 0;
private Handler tabHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
switch (msg.what) {
case mConstants.REFRESH_MSG_TAB:
int msgNum = (int) msg.getData().get("msgNum");
String msgType = (String) msg.getData().get(mConstants.TYPE_MSG);
if (mConstants.SYS_MSG.equals(msgType)) {
notReadSys = msgNum;
} else if (mConstants.BUY_MSG.equals(msgType)) {
notReadBuy = msgNum;
}
updateUnreadLabel();
break;
default:
break;
}
}
};
/**
* 刷新未读消息数
*/
public void updateUnreadLabel() {
for (int i = 0; i < tablayoutMsg.getTabCount(); i++) {
TabLayout.Tab tab = tablayoutMsg.getTabAt(i);
TextView hasNewMsg = (TextView) tab.getCustomView().findViewById(R.id.has_new_msg);
hasNewMsg.setVisibility(View.INVISIBLE);
if (0 == i) {
if (notReadBuy > 0) {
hasNewMsg.setVisibility(View.VISIBLE);
}
}
if (1 == i) {
if (notReadSys > 0) {
hasNewMsg.setVisibility(View.VISIBLE);
}
}
}
}
4、补充：TabLayout.Tab
4.1、继承关系
4.2、TabLayout.Tab的公共方法
这里的方法，就不做中文说明了，看方法名就知道了，而且上面已经讲到了setCustomView()和getCustomView()两个方法。
