类似下面效果
之前 一直用 自定义控件（第三方库），RadioGroup等等来实现类似效果 ，谷歌官方出了TabHost来实现
使用方法：
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="1dp"
app:tabIndicatorColor="@color/txt_bule"
app:tabIndicatorHeight="2dp"
app:tabSelectedTextColor="@color/txt_bule"
app:tabTextColor="@color/txt_gray" />常用属性
app:tabSelectedTextColor 改变选中字体的颜色
app:tabTextColor 未选中字体的颜色
app:tabIndicatorColor 指示器（下划线）颜色
app:tabIndicatorHeight 指示器的高度
app:tabBackground 整个TabLayout的颜色
内部字体大小
app:tabTextAppearance=”@android:style/TextAppearance.Holo.Large”
添加图标
tabLayout.addTab(tabLayout.newTab().setText(“Tab 1”).setIcon(R.mipmap.ic_launcher));
当tab 数量很多时，设置可以滑动
app:tabMode=”scrollable”
设置Tab内部的子控件的Padding：
app:tabPadding=”xxdp”
app:tabPaddingTop=”xxdp”
app:tabPaddingStart=”xxdp”
app:tabPaddingEnd=”xxdp”
app:tabPaddingBottom=”xxdp”
内容的显示模式
app:tabGravity=”center”//居中，如果是fill，则是充满
Tab的宽度限制
设置最大的tab宽度：
app:tabMaxWidth=”xxdp”
设置最小的tab宽度：
app:tabMinWidth=”xxdp”
TabLayout的监听事件
tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {
@Override
public voidonTabSelected(TabLayout.Tab tab) {
//选中了tab的逻辑
}
@Override
public voidonTabUnselected(TabLayout.Tab tab) {
//未选中tab的逻辑
}
@Override
public voidonTabReselected(TabLayout.Tab tab) {
//再次选中tab的逻辑
}
});
和ViewPager的联动
最后也是最重要的：
tabLayout.setupWithViewPager(Viewpager);//关键代码实现效果 ：
TabLayout 其实也可以实现 没有下划线 随着滑动改变背景颜色的效果
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="40dp"
app:tabIndicatorHeight="0dp"//设置下划线高度为0
app:tabBackground="@drawable/backcolor_white2bule_sel"//设置背景色是可变的
app:tabSelectedTextColor="@color/txt_black"
app:tabTextColor="@color/white" />backcolor_white2bule_sel 实现方式 如下
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/white" android:state_checked="true"/>
<item android:drawable="@color/white" android:state_selected="true" />
<item android:drawable="@color/back" />
</selector>DEMO 实现viewPager 联动
activity 实现
public class DetailActivity extends Activity {
private ViewPager viewPager;
private TabLayout tabLayout;
private ViewToolsAdapter adapter;
private List<Fragment> fragmentList;
private List<String> tableList;
private EmergencyFllowFragment mEmergencyFllowFragment = new EmergencyFllowFragment();
private EmergencyDetailFragment mEmergencyDetailFragment = new EmergencyDetailFragment();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_event_emergency_detail);
initView();
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
fragmentList = new ArrayList<>();
fragmentList.add(mEmergencyDetailFragment);
fragmentList.add(mEmergencyFllowFragment);
tableList = new ArrayList<>();
tableList.add("详情");
tableList.add("跟踪");
adapter = new ViewToolsAdapter(getSupportFragmentManager(),fragmentList,tableList);
viewPager.setAdapter(adapter);
tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setTabMode(TabLayout.MODE_FIXED); //填充效果 MODE_FIXED
tabLayout.setupWithViewPager(viewPager); //关联viewPager//toolbar的基础上 才会呈现，没有toolbar直接用
}
}Adapter 实现
public class ViewToolsAdapter extends FragmentPagerAdapter {
private List<Fragment> fragmentList;
private List<String> tableList;
public ViewToolsAdapter(FragmentManager fm, List<Fragment> fragmentList, List<String> tableList) {
super(fm);
this.fragmentList = fragmentList;
this.tableList = tableList;
}
//此方法用来显示tab上的名字
@Override
public CharSequence getPageTitle(int position) {
return tableList.get(position);
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
}