实现tablayout的新样式系统自带的tabitem

Tablayout添加新的样式。有图标和文字说明，并且和viewpage联动

 

布局文件：3个TabItem

<RelativeLayout
    android:id="@+id/main_content_frame_parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:gravity="center">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:tabIndicatorColor="@color/base_orange"
        app:tabIndicatorHeight="1dp"
        app:tabSelectedTextColor="@color/base_orange">

        <android.support.design.widget.TabItem
            android:id="@+id/tabitem_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/tab_home"
            android:text="主页" />

        <android.support.design.widget.TabItem
            android:id="@+id/tabitem_shopping"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/tab_shopping"
            android:text="购物车" />

        <android.support.design.widget.TabItem
            android:id="@+id/tabitem_mine"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/tab_person"
            android:text="我的" />
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/tabs" />
</RelativeLayout>

 

里面的icon的tab_person示例

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/ic_person_orange"/>
    <item android:state_selected="false" android:drawable="@drawable/ic_person_gray"/>
</selector>

 

代码里实现tab和viewpage的联动

private void init() {

    tabs = findViewById(R.id.tabs);
    titles.add("主页");
    titles.add("购物车");
    titles.add("我的");

    //构造适配器
    fragments = new ArrayList<>();
    fragments.add(new FragmentHome());
    fragments.add(new FragmentShopping());
    fragments.add(new FragmentMine());

    fragAdapter = new FragAdapter(getSupportFragmentManager(), titles, fragments);
    //设定适配器
    vp = findViewById(R.id.vp);
    vp.setAdapter(fragAdapter);
    tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
                vp.setCurrentItem(tab.getPosition());
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });

    vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            tabs.setScrollPosition(position,positionOffset,true);
    }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

}