一、实现简单的文字标签
先看效果图：
实现效果图.png
1、创建布局：
<!--
TabLayout属性：
tab:tabBackground TabLayout的背景
tab:tabIndicatorColor 当前标签下的横线颜色
tab:tabSelectedTextColor 当前标签的字体颜色
tab:tabMode 设置TableLayout是否可以滚动（FIXED:不可左右滑动，用于标签较少时 ；SCROLLABLE：可左右滑动，用于标签较多时）
-->
<android.support.design.widget.TabLayout
android:id="@+id/table_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tab:tabBackground="@color/colorPrimary"
tab:tabIndicatorColor="@color/colorAccent"
tab:tabSelectedTextColor="@color/colorAccent"
tab:tabTextColor="@color/white" />
<!-- 与TabLayout相关联的ViewPager -->
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
2、设置标签的标题集合
List<String> titleList = new ArrayList<>();
titleList.add("新闻");
titleList.add("视频");
titleList.add("体育");
titleList.add("社会");
titleList.add("社会");
titleList.add("社会");
titleList.add("社会");
titleList.add("社会");
titleList.add("社会");
titleList.add("社会");
titleList.add("社会");
titleList.add("社会");
3、设置与标题栏一一对应的View（Fragment）集合
List<Fragment> viewList = new ArrayList<>();
viewList.add(new NewsFragment());
viewList.add(new FileFragment());
viewList.add(new SportsFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
viewList.add(new SocietyFragment());
4、创建ViewPager的FargmentPagerAdapter适配器
public class MyTableViewAdapter extends FragmentPagerAdapter {
List<Fragment> pagerList;
List<String> titleList;
public MyTableViewAdapter(FragmentManager fm , List<Fragment> pagerList , List<String> titleList) {
super(fm);
this.pagerList = pagerList;
this.titleList = titleList;
}
@Override
public int getCount() {
return pagerList != null ? pagerList.size() : 0;
}
@Override
public Fragment getItem(int position) {
return pagerList.get(position);
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
}
5、在代码中初始化TabLayout和ViewPager并进行设置
// 给TableLayout添加tab选项卡
for (int i = 0 ; i < tableTitleList.size() ; i++){
mTabLayout.addTab(mTabLayout.newTab().setText(tableTitleList.get(i)));
}
// 初始化ViewPager适配器
tableViewAdapter = new MyTableViewAdapter(getSupportFragmentManager(),tableViewList,tableTitleList);
// 给ViewPager设置适配器
mViewPager.setAdapter(tableViewAdapter);
// 设置TableLayout为可滚动（在ViewPager设置Adapter之后），也可在布局中添加tabMode属性
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
// 将TabLayout和ViewPager关联起来
mTabLayout.setupWithViewPager(mViewPager);
// 给Tabs设置适配器
mTabLayout.setTabsFromPagerAdapter(tableViewAdapter);
到此就可以跑起来了。
二、实现带有图标的标签
效果图：
带 icon的Tab.png
自定义的tab布局，各个tab的布局一样，只是ImgeView的图标有更换
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:id="@+id/tab_icon"
android:background="@drawable/selector_work_img"
android:layout_width="24dp"
android:layout_height="24dp" />
<TextView
android:id="@+id/tab_title"
android:textColor="@color/selector_tab_text_color"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
对于字体颜色的selector有点不一样，因为没有 android：corlor 属性，所以将该selector文件放到color文件夹来引用。
字体颜色的selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/text_checked" android:state_selected="true" />
<item android:color="@color/text_normal" android:state_selected="false" />
</selector>
icon的selector文件
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@mipmap/work_checked"/>
<item android:drawable="@mipmap/work_normal"/>
</selector>
修改fragmentPagerAdapter
public class MyTableViewAdapter extends FragmentPagerAdapter {
List<Fragment> pagerList;
List<String> titleList;
public MyTableViewAdapter(FragmentManager fm , List<Fragment> pagerList , List<String> titleList) {
super(fm);
this.pagerList = pagerList;
this.titleList = titleList;
}
@Override
public int getCount() {
return pagerList != null ? pagerList.size() : 0;
}
@Override
public Fragment getItem(int position) {
return pagerList.get(position);
}
@Override
public CharSequence getPageTitle(int position) {
// return titleList.get(position);
return null;
}
// 添加获取自定义view 的方法
public View getTabView(int position){
View view = null;
// 我这里因为有4个标签
if (position == 0){
view = LayoutInflater.from(mContext).inflate(R.layout.tab_work, null);
}else if (position == 1) {
view = LayoutInflater.from(mContext).inflate(R.layout.tab_qixin, null);
}else if (position == 2) {
view = LayoutInflater.from(mContext).inflate(R.layout.tab_share, null);
}else if (position == 3) {
view = LayoutInflater.from(mContext).inflate(R.layout.tab_contact, null);
}
TextView tv= (TextView) view.findViewById(R.id.tab_title);
tv.setText(titleList.get(position).getName());
return view;
}
}
在activity中初始化：
tableTitleList = homePresenter.getTableTitleList();
tableViewList = homePresenter.getTableViewList();
//设置tab模式，当前为系统默认模式
mTabLayout.setTabMode(TabLayout.MODE_FIXED);
// 初始化ViewPager适配器
tableViewAdapter = new MyTableViewAdapter(getSupportFragmentManager(),this,homePresenter);
// 给ViewPager设置适配器
homeViewpager.setAdapter(tableViewAdapter);
// 设置TableLayout为可滚动（在ViewPager设置Adapter之后），也可在布局中添加tabMode属性
// 将TabLayout和ViewPager关联起来。
mTabLayout.setupWithViewPager(homeViewpager);
// 默认选中第一项tab 初始未选中(初始没有选中效果)
mTabLayout.getTabAt(0).select();
// 给TableLayout添加tab选项卡
for (int i = 0 ; i < tableTitleList.size() ; i++){
TabLayout.Tab tab = mTabLayout.getTabAt(i);
tab.setCustomView(tableViewAdapter.getTabView(i));
}
参考：泡在网上的日子http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0731/3247.html
