带消息数量的TabLayout

先发图

下面开始贴代码

布局部分

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/px_100"
        android:background="@color/cff3e19">
        <android.support.design.widget.TabLayout
            android:layout_centerInParent="true"
            android:id="@+id/tablayout"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/px_60"
            style="@style/TabLayoutStyle"/>
    </RelativeLayout>
	<android.support.v4.view.ViewPager
    	android:id="@+id/viewpager"
    	android:layout_width="match_parent"
    	android:layout_height="match_parent"
    	app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</LinearLayout>

程序主要代码

 /**
  * 设置Tablayout上的标题的角标
  */
    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
            View view = LayoutInflater.from(mContext).inflate(R.layout.tab_layout_item, null);
            TextView textView = (TextView) view.findViewById(R.id.textview);
            textView.setText(protypes.get(i).getName());
            TextView target = (TextView) view.findViewById(R.id.badgeview_target);
            if (!TextUtils.isEmpty(protypes.get(i).getCount())) {
                if ("0".equals(protypes.get(i).getCount())) {
                    target.setVisibility(View.GONE);
                } else {
                    target.setVisibility(VISIBLE);
                    if (protypes.get(i).getCount().length() == 1) {
                        target.setPadding(10, 1, 10, 1);
                    }
                    target.setText(protypes.get(i).getCount());
                }
            } else {
                target.setVisibility(View.GONE);
            }
            tab.setCustomView(view);
        }

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

tab_layout_item代码

<?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="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:paddingLeft="@dimen/px_10"
    android:paddingRight="@dimen/px_10"
    >
    <!-- LinearLayout的Height必须为wrap_content,如果为match_parent,那么在第二次加载Badge的时候,Tab布局会出现问题 -->

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="16sp"
        android:textStyle="bold"
        android:textColor="@color/white"
        tools:text="abc"/>

    <TextView
        android:gravity="center"
        android:id="@+id/badgeview_target"
        android:minWidth="@dimen/px_20"
        android:paddingTop="0.5dp"
        android:paddingBottom="0.5dp"
        android:paddingLeft="1dp"
        android:paddingRight="1dp"
        android:textColor="@color/cff3e19"
        android:textSize="10sp"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/px_8"
        android:layout_gravity="center"
        android:background="@drawable/abshape_white"
        />
</LinearLayout>

设置tabview下面横线的padding

 public  void setIndicator(Context context, TabLayout tabs, int leftDip, int rightDip) {
        Class<?> tabLayout = tabs.getClass();
        Field tabStrip = null;
        try {
            tabStrip = tabLayout.getDeclaredField("mTabStrip");
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        }

        tabStrip.setAccessible(true);
        LinearLayout ll_tab = null;
        try {
            ll_tab = (LinearLayout) tabStrip.get(tabs);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }

        int left = (int) (getDisplayMetrics(context).density * leftDip);
        int right = (int) (getDisplayMetrics(context).density * rightDip);

        for (int i = 0; i < ll_tab.getChildCount(); i++) {
            View child = ll_tab.getChildAt(i);
            child.setPadding(0, 0, 0, 0);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
            params.leftMargin = left;
            params.rightMargin = right;
            child.setLayoutParams(params);
            child.invalidate();
        }
    }

目前线上版本运行没有出现问题,有问题请留言