為TabLayout添加角標(biāo)的最簡單方法

一、前言

在開發(fā)中，我們常常需要ViewPager結(jié)合Fragment一起使用，來實現(xiàn)多頁簽的切換效果。在以前，我們有以下一系列第三方庫來幫我們實現(xiàn):

而現(xiàn)在，我們可以使用Design support library庫的TabLayout來實現(xiàn)了。

二、最終效果圖

三、TabLayout的使用

1. 添加依賴

由于TabLayout在design包內(nèi)，所以首先需要在app目錄下的build.gradle中添加以下依賴：

dependencies {
    ...
    compile 'com.android.support:design:23.4.0'
}

2. 創(chuàng)建布局

布局相當(dāng)簡單，只要添加TabLayout和ViewPager的布局即可：

layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        style="@style/TabLayoutStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white"/>
</LinearLayout>

還有其他的屬性我習(xí)慣在style文件中設(shè)置：

values/styles.xml

<!-- TabLayout樣式 -->
    <style name="TabLayoutStyle" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorColor">@color/colorPrimary</item>
        <item name="tabSelectedTextColor">@color/colorPrimary</item>
        <item name="tabTextAppearance">@style/TabTextAppearence</item>
        <item name="tabPaddingEnd">0dp</item>
    </style>
    <style name="TabTextAppearence" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">16sp</item>
        <item name="textAllCaps">false</item>
    </style>

3. 創(chuàng)建Fragment

package com.sherlockshi.badgedtablayoutpractise;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Author: SherlockShi
 * Date:   2016-11-01 16:31
 * Description:
 */
public class PageFragment extends Fragment {

    private static final String PAGE_NAME_KEY = "PAGE_NAME_KEY";

    public static PageFragment getInstance(String pageName) {
        Bundle args = new Bundle();
        args.putString(PAGE_NAME_KEY, pageName);
        PageFragment pageFragment = new PageFragment();
        pageFragment.setArguments(args);

        return pageFragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
        TextView textView = (TextView) view.findViewById(R.id.tv_page_name);
        textView.setText(getArguments().getString(PAGE_NAME_KEY));

        return view;
    }
}

其中Fragment的布局layout/fragment_page.xml:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/tv_page_name"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"/>

4. ViewPager的適配器

package com.sherlockshi.badgedtablayoutpractise;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Author: SherlockShi
 * Date:   2016-11-01 17:38
 * Description:
 */
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {

    private Context mContext;
    private List<Fragment> mFragmentList;
    private List<String> mPageTitleList;
    private List<Integer> mBadgeCountList;

    public SimpleFragmentPagerAdapter(Context context,
                                      FragmentManager fm,
                                      List<Fragment> fragmentList,
                                      List<String> pageTitleList,
                                      List<Integer> badgeCountList) {
        super(fm);
        this.mContext = context;
        this.mFragmentList = fragmentList;
        this.mPageTitleList = pageTitleList;
        this.mBadgeCountList = badgeCountList;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mPageTitleList.get(position);
    }
}

5. 設(shè)置TabLayout

package com.sherlockshi.badgedtablayoutpractise;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private List<String> mPageTitleList = new ArrayList<String>();
    private List<Fragment> mFragmentList = new ArrayList<Fragment>();
    private List<Integer> mBadgeCountList = new ArrayList<Integer>();

    private SimpleFragmentPagerAdapter mPagerAdapter;
    private TabLayout mTabLayout;
    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initFragments();
        initView();
    }

    private void initFragments() {
        mPageTitleList.add("Tab1");
        mPageTitleList.add("Tab2");
        mPageTitleList.add("Tab3");

        mBadgeCountList.add(6);
        mBadgeCountList.add(16);
        mBadgeCountList.add(166);

        for (int i = 0; i < mPageTitleList.size(); i++) {
            mFragmentList.add(PageFragment.getInstance(mPageTitleList.get(i)));
        }
    }

    private void initView() {
        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mViewPager = (ViewPager) findViewById(R.id.view_pager);

        mPagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), mFragmentList, mPageTitleList);
        mViewPager.setAdapter(mPagerAdapter);
        mTabLayout.setupWithViewPager(mViewPager);

        initBadgeViews();
        setUpTabBadge();
    }
}

四、設(shè)置角標(biāo)

1. 添加角標(biāo)Badge

添加角標(biāo)的關(guān)鍵代碼只需要一行：

mBadgeViews.get(i).setTargetView(((ViewGroup) mTabLayout.getChildAt(0)).getChildAt(i));

完整代碼只需要在設(shè)置完TabLayout和ViewPager后，遍歷每一個Tab，為Tab添加角標(biāo)：

private void setUpTabBadge() {
    for (int i = 0; i < mFragmentList.size(); i++) {
        mBadgeViews.get(i).setTargetView(((ViewGroup) mTabLayout.getChildAt(0)).getChildAt(i));
        mBadgeViews.get(i).setText(formatBadgeNumber(mBadgeCountList.get(i)));
    }
}

2. 更新角標(biāo)

在需要更新角標(biāo)的地方，只要調(diào)用以下方法就可實現(xiàn)：

mBadgeCountList.set(1, count++);
setUpTabBadge();

以上，就可以輕松地為TabLayout添加角標(biāo)，并處理角標(biāo)的更新了。

五、問題

1. 重復(fù)選中的狀態(tài)

但是如果需要更新角標(biāo)，那么在更新角標(biāo)后，再點擊另一個Tab，會出現(xiàn)上一個Tab和當(dāng)前Tab都是選中狀態(tài)（如下圖的Tab1和Tab2）：

2. 角標(biāo)位置不可控

而且如上圖所示，角標(biāo)的位置不好控制，有的離文字很近，有的離得很遠，無法精確控制。

六、最實用的TabLayout加角標(biāo)方法

1. 添加getTabItemView()方法

在重寫的FragmentPagerAdapter中添加自定義Tab布局方法：

public View getTabItemView(int position) {
    View view = LayoutInflater.from(mContext).inflate(R.layout.tab_layout_item, null);
    TextView textView = (TextView) view.findViewById(R.id.textview);
    textView.setText(mPageTitleList.get(position));

    View target = view.findViewById(R.id.badgeview_target);

    BadgeView badgeView = new BadgeView(mContext);
    badgeView.setTargetView(target);
    badgeView.setBadgeMargin(0, 6, 10, 0);
    badgeView.setTextSize(10);
    badgeView.setText(formatBadgeNumber(mBadgeCountList.get(position)));

    return view;
}

對應(yīng)的自定義布局為：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <!-- LinearLayout的Height必須為wrap_content,如果為match_parent,那么在第二次加載Badge的時候,Tab布局會出現(xiàn)問題 -->

    <View
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="-30dp"
        android:textColor="@color/tab_text_color_selector"/>

    <View
        android:id="@+id/badgeview_target"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="40dp"
        android:layout_marginLeft="4dp"
        android:layout_gravity="center"/>
</LinearLayout>

2. 設(shè)置自定義布局

private void setUpTabBadge() {
    for (int i = 0; i < mFragmentList.size(); i++) {
        TabLayout.Tab tab = mTabLayout.getTabAt(i);

        // 更新Badge前,先remove原來的customView,否則Badge無法更新
        View customView = tab.getCustomView();
        if (customView != null) {
            ViewParent parent = customView.getParent();
            if (parent != null) {
                ((ViewGroup) parent).removeView(customView);
            }
        }

        // 更新CustomView
        tab.setCustomView(mPagerAdapter.getTabItemView(i));
    }

    // 需加上以下代碼,不然會出現(xiàn)更新Tab角標(biāo)后,選中的Tab字體顏色不是選中狀態(tài)的顏色
    mTabLayout.getTabAt(mTabLayout.getSelectedTabPosition()).getCustomView().setSelected(true);
}

上面的示例會有兩個坑：

  • 一個坑是每次為TabLayout添加Badge后，會出現(xiàn)Tab的字體顏色不是選中狀態(tài)的顏色，需要手動設(shè)置Tab為選中狀態(tài)，可以參考上面的第19行代碼解決，這應(yīng)該是TabLayout的一個Bug；
  • 另一個坑是如果每次更新Badge的時候，直接重新tab.setCustomView的話，會出現(xiàn)Badge不更新，解決辦法是先移除之前的自定義布局，然后再重新設(shè)置布局，具體可參考第6-12行代碼解決。

七、總結(jié)

以上是自己在使用TabLayout的過程中發(fā)現(xiàn)的一些問題及解決辦法，如果大家有更好的解決方法，或者還有別的坑，歡迎留言。

當(dāng)然，大家也可以直接使用第三方控件來實現(xiàn)以上功能，現(xiàn)在主流的幾個控件也都做得很好，也很省心。

項目代碼已共享到Github：BadgedTabLayoutPractise

八、參考資料

android design library提供的TabLayout的用法

Google Play Style Tabs using TabLayout

Android Tablayout tabs with notification badge like whatsApp

PS：歡迎關(guān)注SherlockShi博客

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,921評論 25贊 709
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 47,144評論 22贊 665
  • 最近做了一個Android UI相關(guān)開源項目庫匯總，里面集合了OpenDigg 上的優(yōu)質(zhì)的Android開源項目庫...
    OpenDigg閱讀 17,611評論 6贊 222
  • 我不介意你慢動作 也不介意這次先擦肩而過 吃一人份的飯 刷一人份的碗 真的我并沒有覺得孤單 逛一人份的街 買一人份...
    陀陀刺猬閱讀 711評論 10贊 9
  • 07.28 距小垃圾第一次坐過山車整一年，那天像是完成人生夢想一樣，開心...
    歪早安先生閱讀 1,514評論 2贊 14

友情鏈接更多精彩內(nèi)容