超简单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]);
        }