因為項目需求需要做一個這樣的頁面

11.PNG

開始想著直接用FragmentTabHost加BadgeView角標來做非常方便，但后來需求又說這個頁面還要左右能滑動，好吧。那就改用TabLayout來做吧，然后問題就來了，如果沒有那個數(shù)字角標的話其實也是非常簡單的，只需要直接settext再seticon就行，但是這個角標的問題有點麻煩了。

開始覺得用BadgeView吧，自定義樣式也有點麻煩，而且添加起來也挺麻煩的，再加上網(wǎng)上各種方法都一大堆內容，實在是不方便的樣子。

好吧，既然嫌麻煩那就用最簡單的方法來做，直接上干貨：

先是布局

<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"/>

核心代碼

//這個一定要在setAdapter之后執(zhí)行
private void setTabStyle() {
        for(int i = 0;i < mTitleArray.size();i++){//根據(jù)Tab數(shù)量循環(huán)來設置
            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ù)量
                ((TextView) view.findViewById(R.id.tv_title)).setText(mTitleArray.get(i));//設置Tab標題
                if(i == 0) {//第一個默認為選擇樣式
                    ((TextView) view.findViewById(R.id.tv_title)).setTextColor(getResources().getColor(R.color.colorCambridgeblue));//將第一個Tab標題顏色設為藍色
                    ((AppCompatImageView) view.findViewById(R.id.tabicon)).setImageResource(mSelectArray[i]);//將第一個Tab圖標設為藍色
                }else {
                    ((AppCompatImageView) view.findViewById(R.id.tabicon)).setImageResource(mUnSelectArray[i]);//將其他Tab圖標設為灰色
                }
                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>

到這里基本就出來效果了
最后添加一個滑動時字體顏色和圖標顏色改變的事件

@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));//設置一下文字顏色
            ((AppCompatImageView) view.findViewById(R.id.tabicon)).setImageResource(mUnSelectArray[tab.getPosition()]);//設置一下圖標顏色
            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，搞定
沒用任何第三方插件就能實現(xiàn)而且核心代碼就那么幾條，是不是很靈活