实现Tab界面上带数字的简单布局教程-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_15461/article/details/82141456

本文提供了一种实现Tab界面上带有数字指示器的布局方法，包括使用XML文件定义形状和文本，以及如何在代码中引用并设置计数器。适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好多人问怎么实现tab上有数字，其实很简单实现方法有很多，这里有布局实现吧，只是demo，希望大家明白原理res/drawable/shapecount.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <corners android:radius="20dp"  />    
  <solid android:color="#ff2233" />
</shape>

res/layout/tabicon.xml

<RelativeLayout
    android:orientation="vertical"
    android:background="@null"
    android:id="@+id/rlayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    <ImageView 
            android:id="@+id/icon"
            android:src="@android:drawable/ic_menu_mylocation" <!-- Just for test -->
            android:layout_margin="0dp"
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content"/>

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="50" android:textSize="12dp" android:textStyle="bold"  
        android:background="@drawable/shapecount"
        android:textColor="#FFFFFF"
        android:paddingLeft="3dp" android:paddingRight="3dp"
            android:layout_margin="0dp"
        android:layout_alignBottom="@+id/rlayout"
        android:id="@+id/txtCount" />

</RelativeLayout>

LayoutInflater inflater = LayoutInflater.from(this);

View view = inflater.inflate(R.layout.tabicon, null);
final TextView txtCount = (TextView) view.findViewById(R.id.txtCount);

spec = tabHost.newTabSpec("artists").setIndicator(view).setContent(intent);

tab上显示数字