Design库-TabLayout控件用法

类似下面效果

之前 一直用 自定义控件（第三方库），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();
    }

}

最终效果 是个可滑动 联动效果