tablayout 增加数字小标_Android中TabLayout添加小红点的示例代码

本文介绍了Android中TabLayout添加小红点的示例代码，分享给大家，具体如下

安卓原生的android.support.design.widget.TabLayout，配合ViewPager已经很好用了，但是有时我们会在内容更新时，在tab标题右上方加上一个红点等标记此tab内容有更新时，就需要给原生的TabLayout设置你定义的布局，用法和原生的一样，只是在代码中设置一下TabLayout的布局。

1.主布局文件

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

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto"

tools:context="com.bxkj.dylan.tablayoutreddot.MainActivity">

android:id="@+id/tabLayout"

app:tabBackground="@android:color/white"

app:tabTextColor="@color/colorBlack"

app:tabSelectedTextColor="@color/colorAccent"

app:tabMode="scrollable"

android:layout_width="match_parent"

android:layout_height="40dp" />

2.要显示小红点的自定义布局文件

android:layout_width="wrap_content"

android:layout_height="40dp"

android:layout_gravity="center"

android:orientation="horizontal">

android:id="@+id/tv_tab_title"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:gravity="center"

android:textColor="@color/colorBlack"

android:textSize="15sp" />

android:id="@+id/iv_tab_red"

android:layout_gravity="right"

android:layout_width="18dp"

android:text="5"

android:gravity="center"

android:textColor="@android:color/white"

android:layout_height="18dp"

android:background="@drawable/red_dot" />

3.设置TabLayout加载的各个Tab

import android.content.res.Resources;

import android.support.design.widget.TabLayout;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.TextView;

/**

* @author dylan

*/

public class MainActivity extends AppCompatActivity {

private TabLayout tabLayout;

private TextView tv_tab_title;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

tabLayout = findViewById(R.id.tabLayout);

initData();

}

private void initData() {

TabLayout.Tab tab = tabLayout.newTab().setText("全部");

tabLayout.addTab(tab);

//待付款栏目-加载自定义显示小红点的布局

tab = tabLayout.newTab();

tab.setCustomView(R.layout.tab_wait_for_pay);

tv_tab_title = tab.getCustomView().findViewById(R.id.tv_tab_title);

tv_tab_title.setText("待付款");

tabLayout.addTab(tab);

tab = tabLayout.newTab().setText("待发货");

tabLayout.addTab(tab);

tab = tabLayout.newTab().setText("待收货");

tabLayout.addTab(tab);

tab = tabLayout.newTab().setText("已完成");

tabLayout.addTab(tab);

tab = tabLayout.newTab().setText("已取消");

tabLayout.addTab(tab);

//添加tabLayout选中监听

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

@Override

public void onTabSelected(TabLayout.Tab tab) {

//设置选中时的文字颜色

if (tab.getCustomView() != null) {

tv_tab_title.setTextColor(getResources().getColor(R.color.colorAccent));

}

}

@Override

public void onTabUnselected(TabLayout.Tab tab) {

//设置未选中时的文字颜色

if (tab.getCustomView() != null) {

tv_tab_title.setTextColor(getResources().getColor(R.color.colorBlack));

}

}

@Override

public void onTabReselected(TabLayout.Tab tab) {

}

});

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。