最簡單的TabLayout自定義樣式(加角標)方法

摘要： 因為專案需求需要做一個這樣的頁面 11.PNG 開始想著直接用FragmentTabHost加BadgeView角標來做非常方便，但後來需求又說這個頁面還要左右能滑動，好吧。那就改用TabLayout來做吧，然後問題就來了，如果沒有那個數字角標的...

因為專案需求需要做一個這樣的頁面

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

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

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

先是佈局

<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之後執行
private void setTabStyle() {
for(int i = 0;i < mTitleArray.size();i++){//根據Tab數量迴圈來設定
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]));//設定角標數量
((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，搞定

沒用任何第三方外掛就能實現而且核心程式碼就那麼幾條，是不是很靈活