超简单tab切换--tablayout的使用

最近开始使用Tablayout,发现超好用,写一篇文章纪念一下.
先上效果图:

先看布局文件:

<LinearLayout    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"    android:orientation="vertical"    tools:context="com.example.ma1.toolbardemo.tablayout.TabLayoutActivity">    <android.support.v7.widget.Toolbar        android:id="@+id/tab_toolbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"/>    <android.support.v4.view.ViewPager        android:id="@+id/tab_viewapger"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"/>    <android.support.design.widget.TabLayout        android:id="@+id/tab_tablayout"        android:layout_width="match_parent"        android:layout_height="60dp"        app:tabSelectedTextColor="#ff0000"        app:tabTextColor="#0000ff"/></LinearLayout>

下边是activity:

public class TabLayoutActivity extends AppCompatActivity {    private Toolbar mToolbar;    private ViewPager mViewapger;    private TabLayout mTablayout;    private List<CoorFragment> mFragments;    private String[] mTitle = new String[]{"Tab1", "Tab2", "Tab3"};    //这里int数据里边可以写drawable,是图片的选择器    private int[] pic = new int[]{R.drawable.img_tab_selector, R.mipmap.ic_msg_env, R.mipmap.ic_msg_mange};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_tab_layout);        initView();    }    private void initView() {        mToolbar = (Toolbar) findViewById(R.id.tab_toolbar);        mViewapger = (ViewPager) findViewById(R.id.tab_viewapger);        mTablayout = (TabLayout) findViewById(R.id.tab_tablayout);        //初始化toolbar        mToolbar.setTitle("TabLayout练习");        //初始化fragment        initFragment();        //初始化viewpager        TabViewPagerAdapter adapter = new TabViewPagerAdapter(getSupportFragmentManager(), mFragments);        mViewapger.setAdapter(adapter);        //绑定viewpager到TabLayout中        mTablayout.setupWithViewPager(mViewapger);        //tablayout绑定标题和图标        for (int i = 0; i < mTitle.length; i++) {            mTablayout.getTabAt(i).setText(mTitle[i]).setIcon(pic[i]);        }    }    private void initFragment() {        mFragments = new ArrayList<>();        for (String title : mTitle) {            mFragments.add(CoorFragment.newInstance(title));        }    }}

activity需要继承AppCompatActivity,切换的时候tab的颜色改变写在xml中,用app:tabSelectedTextColor 和app:tabTextColor.而图片的点击的切换效果需要写drawable,在activity中

private int[] pic = new int[]{R.drawable.img_tab_selector, R.mipmap.ic_msg_env, R.mipmap.ic_msg_mange};

把int数组里的图片的资源地址改为drawable.

下面是drawable文件img_tab_selector.xml

<?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/ic_message_remind_manage_user"/>        <item android:state_selected="false" android:drawable="@mipmap/ic_launcher"/></selector>

最后是ViewPagerAdapter的代码:

public class TabViewPagerAdapter extends FragmentPagerAdapter {    private List<CoorFragment> mFragments;    public TabViewPagerAdapter(FragmentManager fm , List<CoorFragment> fragments) {        super(fm);        mFragments = fragments;    }    @Override    public Fragment getItem(int position) {        return mFragments.get(position);    }    @Override    public int getCount() {        return mFragments.size();    }}

记住,tab上边绑定标题,可以在ViewPagerAdapter中重写getPageTitle()方法,就是在初始化ViewPagerAdapter的时候传入title的文字数组,在getPageTitle()方法中返回传入的title数组的对应的值; 另一种方法就是本文中所使用的方法,就是在activity中,通过title数组的循环,拿到tablayout对应的tab,设置text的值和icon:

for (int i = 0; i < mTitle.length; i++) {            mTablayout.getTabAt(i).setText(mTitle[i]).setIcon(pic[i]);        }