Tablayout和ViewPager的结合使用Tablayout标题右上角加标记

目前项目中用到Tablayout和ViewPager的结合使用，本来这个很简单可以实现，但是项目要求Tablayout标题右上角加数字标记。这就不好弄了，怎么办呢，只能给标题重新设置布局，下面就讲讲给Tablayout标题重设布局的过程。

之前结合RecyclerView的使用http://blog.csdn.net/pengyu1801/article/details/51172254

核心实现

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.View;
import android.view.ViewGroup;
import android.view.ViewParent;

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

/**
 * 类名：
 * 类描述：实现TabLayout + viewpager + fragment 并TabLayout标题右上角有数字标记
 * 创建人：fly
 * 创建日期： 2017/2/2.
 * 版本：V1.0
 */
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private List mPageTitleList = new ArrayList();
    private List mFragmentList = new ArrayList();
    private List mBadgeCountList = new ArrayList();
    private List mBadgeViews;

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


    private int count = 0;

    @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(count++);
        mBadgeCountList.add(166);

        // 初始化对应的fragment
        for (int i = 0; i < mPageTitleList.size(); i++) {
            mFragmentList.add(PageFragment.getInstance(mPageTitleList.get(i)));
        }
    }

    private void initView() {
        findViewById(R.id.btn_add_badge).setOnClickListener(this);

        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mViewPager = (ViewPager) findViewById(R.id.view_pager);

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

//        initBadgeViews();
        setUpTabBadge();
    }

    /**初始化标题右上角标记*/
//    private void initBadgeViews() {
//        if (mBadgeViews == null) {
//            mBadgeViews = new ArrayList<>();
//            for (int i = 0; i < mFragmentList.size(); i++) {
//                BadgeView tmp = new BadgeView(this);
//                tmp.setBadgeMargin(0, 6, 10, 0);
//                tmp.setTextSize(10);
//                mBadgeViews.add(tmp);
//            }
//        }
//    }

    /**
     * 设置Tablayout上的标题的角标
     */
    private void setUpTabBadge() {
        // 1. 最简单
//        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. 最实用
        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));
        }

        // 需加上以下代码,不然会出现更新Tab角标后,选中的Tab字体颜色不是选中状态的颜色
        mTabLayout.getTabAt(mTabLayout.getSelectedTabPosition()).getCustomView().setSelected(true);
    }

    @Override
    public void onClick(View v) {
        mBadgeCountList.set(1, count++);
        setUpTabBadge();
    }
}

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.View;
import android.view.ViewGroup;
import android.view.ViewParent;

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

/**
 * 类名：
 * 类描述：实现TabLayout + viewpager + fragment 并TabLayout标题右上角有数字标记
 * 创建人：fly
 * 创建日期： 2017/2/2.
 * 版本：V1.0
 */
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private List mPageTitleList = new ArrayList();
    private List mFragmentList = new ArrayList();
    private List mBadgeCountList = new ArrayList();
    private List mBadgeViews;

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


    private int count = 0;

    @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(count++);
        mBadgeCountList.add(166);

        // 初始化对应的fragment
        for (int i = 0; i < mPageTitleList.size(); i++) {
            mFragmentList.add(PageFragment.getInstance(mPageTitleList.get(i)));
        }
    }

    private void initView() {
        findViewById(R.id.btn_add_badge).setOnClickListener(this);

        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mViewPager = (ViewPager) findViewById(R.id.view_pager);

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

//        initBadgeViews();
        setUpTabBadge();
    }

    /**初始化标题右上角标记*/
//    private void initBadgeViews() {
//        if (mBadgeViews == null) {
//            mBadgeViews = new ArrayList<>();
//            for (int i = 0; i < mFragmentList.size(); i++) {
//                BadgeView tmp = new BadgeView(this);
//                tmp.setBadgeMargin(0, 6, 10, 0);
//                tmp.setTextSize(10);
//                mBadgeViews.add(tmp);
//            }
//        }
//    }

    /**
     * 设置Tablayout上的标题的角标
     */
    private void setUpTabBadge() {
        // 1. 最简单
//        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. 最实用
        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));
        }

        // 需加上以下代码,不然会出现更新Tab角标后,选中的Tab字体颜色不是选中状态的颜色
        mTabLayout.getTabAt(mTabLayout.getSelectedTabPosition()).getCustomView().setSelected(true);
    }

    @Override
    public void onClick(View v) {
        mBadgeCountList.set(1, count++);
        setUpTabBadge();
    }
}

源码下载