為TabLayout添加角標的最簡單方法

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();
}

}</code></pre>

四、設置角標

1. 添加角標Badge

添加角標的關鍵代碼只需要一行：

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

完整代碼只需要在設置完TabLayout和ViewPager后，遍歷每一個Tab，為Tab添加角標：

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. 更新角標

在需要更新角標的地方，只要調用以下方法就可實現：

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

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

五、問題

1. 重復選中的狀態

但是如果需要更新角標，那么在 更新角標后 ，再點擊另一個Tab，會出現 上一個Tab 和 當前Tab 都是選中狀態（如下圖的Tab1和Tab2）：

2. 角標位置不可控

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

六、最實用的TabLayout加角標方法

1. 添加getTabItemView()方法

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