因?yàn)轫?xiàng)目需求需要做一個(gè)這樣的頁(yè)面

11.PNG

開(kāi)始想著直接用FragmentTabHost加BadgeView角標(biāo)來(lái)做非常方便实抡，但后來(lái)需求又說(shuō)這個(gè)頁(yè)面還要左右能滑動(dòng)脂矫，好吧吏垮。那就改用TabLayout來(lái)做吧捐腿，然后問(wèn)題就來(lái)了课锌，如果沒(méi)有那個(gè)數(shù)字角標(biāo)的話其實(shí)也是非常簡(jiǎn)單的厨内，只需要直接settext再seticon就行祈秕，但是這個(gè)角標(biāo)的問(wèn)題有點(diǎn)麻煩了。

開(kāi)始覺(jué)得用BadgeView吧雏胃，自定義樣式也有點(diǎn)麻煩请毛，而且添加起來(lái)也挺麻煩的，再加上網(wǎng)上各種方法都一大堆內(nèi)容瞭亮，實(shí)在是不方便的樣子方仿。

好吧，既然嫌麻煩那就用最簡(jiǎn)單的方法來(lái)做统翩，直接上干貨：

先是布局

<android.support.v7.widget.Toolbar
        android:id="@+id/tl_head"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:paddingTop="5dp"
        android:background="#fff">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_title"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                app:tabIndicatorColor="#fff"
                app:tabIndicatorHeight="0dp"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="#49b2ed"
                app:tabTextColor="#fff"
                app:tabTextAppearance="@style/TabText" />

        </RelativeLayout>

    </android.support.v7.widget.Toolbar>

    <!--<View-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="1dp"-->
    <!--android:background="#999" />-->

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        android:background="#fff"/>

核心代碼

//這個(gè)一定要在setAdapter之后執(zhí)行
private void setTabStyle() {
        for(int i = 0;i < mTitleArray.size();i++){//根據(jù)Tab數(shù)量循環(huán)來(lái)設(shè)置
            TabLayout.Tab tab = tab_title.getTabAt(i);
            if(tab != null) {
                View view = LayoutInflater.from(this).inflate(R.layout.tab_title_layout, null);
                ((TextView) view.findViewById(R.id.msgnum)).setText(String.valueOf(mGetCount[i]));//設(shè)置角標(biāo)數(shù)量
                ((TextView) view.findViewById(R.id.tv_title)).setText(mTitleArray.get(i));//設(shè)置Tab標(biāo)題
                if(i == 0) {//第一個(gè)默認(rèn)為選擇樣式
                    ((TextView) view.findViewById(R.id.tv_title)).setTextColor(getResources().getColor(R.color.colorCambridgeblue));//將第一個(gè)Tab標(biāo)題顏色設(shè)為藍(lán)色
                    ((AppCompatImageView) view.findViewById(R.id.tabicon)).setImageResource(mSelectArray[i]);//將第一個(gè)Tab圖標(biāo)設(shè)為藍(lán)色
                }else {
                    ((AppCompatImageView) view.findViewById(R.id.tabicon)).setImageResource(mUnSelectArray[i]);//將其他Tab圖標(biāo)設(shè)為灰色
                }
                tab.setCustomView(view);//最后添加view到Tab上面
            }
        }
}

item布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<TextView
    android:id="@+id/msgnum"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingHorizontal="5dp"
    android:textSize="12dp"
    android:layout_gravity="right"
    android:textColor="@color/colorCambridgeblue"
    android:background="@drawable/stroke_all_blue"/>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:orientation="vertical">
<android.support.v7.widget.AppCompatImageView
    android:id="@+id/tabicon"
    android:layout_width="25dp"
    android:layout_height="25dp"
    android:layout_gravity="center" />

<TextView
    android:id="@+id/tv_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="12dp"
    android:gravity="center"
    android:textColor="@color/colorGray"
    android:textStyle="bold"/>

</LinearLayout>

</FrameLayout>

到這里基本就出來(lái)效果了
最后添加一個(gè)滑動(dòng)時(shí)字體顏色和圖標(biāo)顏色改變的事件

@Override
public void onTabUnselected(TabLayout.Tab tab) {
    try {
        if (tab != null) {
            View view = tab.getCustomView();
            ((TextView) view.findViewById(R.id.tv_title)).setTextColor(getResources().getColor(R.color.colorGray));//設(shè)置一下文字顏色
            ((AppCompatImageView) view.findViewById(R.id.tabicon)).setImageResource(mUnSelectArray[tab.getPosition()]);//設(shè)置一下圖標(biāo)顏色
            tab.setCustomView(view);
        }
    }catch (Exception e){
        e.printStackTrace();
    }
}

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

@Override
public void onTabSelected(TabLayout.Tab tab) {
    try {
        if (tab != null) {
            View view = tab.getCustomView();
            ((TextView) view.findViewById(R.id.tv_title)).setTextColor(getResources().getColor(R.color.colorCambridgeblue));
            ((AppCompatImageView) view.findViewById(R.id.tabicon)).setImageResource(mSelectArray[tab.getPosition()]);
            tab.setCustomView(view);
        }
        vp_content.setCurrentItem(tab.getPosition());
    }catch (Exception e){
        e.printStackTrace();
    }
}

ok仙蚜，搞定
沒(méi)用任何第三方插件就能實(shí)現(xiàn)而且核心代碼就那么幾條，是不是很靈活