tablayout 增加数字小标_为 TabLayout 添加角标的最简单方法

一、前言

在开发中，我们常常需要 ViewPager 结合 Fragment一起使用，来实现多页签的切换效果。在以前，我们有以下一系列第三方库来帮我们实现:

而现在，我们可以使用Design support library 库的 TabLayout 来实现了。

二、最终效果图

三、TabLayout 的使用

1. 添加依赖

由于 TabLayout 在 design 包内，所以首先需要在 app 目录下的 build.gradle 中添加以下依赖：

4dependencies {

...

compile 'com.android.support:design:23.4.0'

}

2. 创建布局

布局相当简单，只要添加 TabLayout 和 ViewPager 的布局即可：

23// layout/activity_main.xml

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:id="@+id/tab_layout"

style="@style/TabLayoutStyle"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

android:id="@+id/view_pager"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

android:background="@android:color/white"/>

还有其他的属性我习惯在style文件中设置：

13// values/styles.xml

@color/colorPrimary

@style/TabTextAppearence

0dp

16sp

false

3. 创建 Fragment1

38package 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 的布局：

9// layout/fragment_page.xml

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 的适配器1

47package 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 mFragmentList;

private List mPageTitleList;

private List mBadgeCountList;

public SimpleFragmentPagerAdapter(Context context,

FragmentManager fm,

List fragmentList,

List pageTitleList,

List 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. 设置 TabLayout1

57package 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 mPageTitleList = new ArrayList();

private List mFragmentList = new ArrayList();

private List mBadgeCountList = new ArrayList();

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

}

四、设置角标

1. 添加角标 Badge

添加角标的关键代码只需要一行：

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

完整代码只需要在设置完 TabLayout 和 ViewPager 后，遍历每一个 Tab，为 Tab 添加角标：

6private 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. 更新角标

在需要更新角标的地方，只要调用以下方法就可实现：

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

setUpTabBadge();

以上，就可以轻松地为 TabLayout 添加角标，并处理角标的更新了。

五、问题

1. 重复选中的状态

但是如果需要更新角标，那么在更新角标后，再点击另一个 Tab，会出现上一个Tab和当前Tab都是选中状态(如下图的 Tab1 和 Tab2)：

2. 角标位置不可控

而且如上图所示，角标的位置不好控制，有的离文字很近，有的离得很远，无法精确控制。

六、最实用的 TabLayout 加角标方法

1. 添加 getTabItemView() 方法

在重写的 FragmentPagerAdapter 中添加自定义 Tab 布局方法：

15public 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;

}

对应的自定义布局为：

29<?xml version="1.0" encoding="utf-8"?>

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content"/>

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"/>

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"/>

2. 设置自定义布局1

20private 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));

}

// 需加上以下代码,不然会出现更新 Tab 角标后,选中的 Tab 字体颜色不是选中状态的颜色

mTabLayout.getTabAt(mTabLayout.getSelectedTabPosition()).getCustomView().setSelected(true);

}

上面的示例会有两个坑：

一个坑是每次为 TabLayout 添加 Badge 后，会出现 Tab 的字体颜色不是选中状态的颜色，需要手动设置 Tab 为选中状态，可以参考上面的第 19 行代码解决，这应该是 TabLayout 的一个 Bug；

另一个坑是如果每次更新 Badge 的时候，直接重新 tab.setCustomView 的话，会出现 Badge 不更新，解决办法是先移除之前的自定义布局，然后再重新设置布局，具体可参考第 6-12 行代码解决。

七、总结

以上是自己在使用 TabLayout 的过程中发现的一些问题及解决办法，如果大家有更好的解决方法，或者还有别的坑，欢迎留言。

当然，大家也可以直接使用第三方控件来实现以上功能，现在主流的几个控件也都做得很好，也很省心。

八、参考资料

原文链接：https://blog.csdn.net/weixin_39810441/article/details/111495149