将徽章添加到android中的选项卡

Question

我想像在 iPhone 中一样将徽章添加到我的应用中的选项卡。

iPhone中使用的徽章截图在以下链接：

我在 android app 中做了一些像徽章这样的图像，它的屏幕截图在以下链接中：

这不是我想要的徽章，我想要标签上的徽章，就像在 iPhone 中一样

有人可以建议我在 android 的选项卡中添加徽章吗？请帮我。

提前致谢。

Answer 1

这可以通过使用 Android ViewBadger 来实现。 Check This

Answer 2

这是如何在标签中添加徽章

的示例

chat_tab.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip" 
    android:layout_height="64dip"
    android:layout_weight="1" 
    android:layout_marginLeft="-3dip" 
    android:layout_marginRight="-3dip" 
    android:orientation="vertical" 
    android:background="@drawable/tab_indicator" >

    <ImageView
        android:id="@+id/chat_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/chat_icon"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:id="@+id/new_notifications" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/chat_icon"
        android:layout_toRightOf="@+id/chat_icon"
        android:layout_marginLeft="-8dp"
        android:layout_marginTop="0dp"
        android:paddingTop="2dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingBottom="2dp"
        android:textSize="8sp"
        android:textStyle="bold"
        android:textColor="@android:color/primary_text_dark"
        android:background="@drawable/badge"
        android:visibility="gone"/>

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chat"
        style="@android:attr/tabWidgetStyle"
        android:textColor="@android:color/tab_indicator_text"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>


</RelativeLayout>

这是 badge.xml（通知背景为红色圆圈），TextView id:new_notifications 背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval" >

    <stroke android:width="2dp" android:color="#FFFFFF" />

    <corners android:radius="10dp"/>

    <padding android:left="2dp" />

    <solid android:color="#ff2233"/>

</shape>

然后在代码中你可以简单地做

LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View chatTab = inflater.inflate(R.layout.chat_tab, null);

        tvNewNotifications = (TextView) chatTab.findViewById(R.id.new_notifications);

        intent = new Intent().setClass(MainTab.this, Chat.class);
        tabSpec = tabHost
                .newTabSpec("chat")
                .setIndicator(chatTab)
                .setContent(intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP));

如你所见，我的相对布局有一个背景@drawable/tab_indicator tab indicator.xml 是框架的标准可绘制标签，我从 sdk 获得，我建议你也应该得到它来自 sdk 中 api 的文件夹，因为您还需要从可绘制文件夹中复制一些图像，您可以找到它 your_sdk_drive:\sdk\platforms\android-8

Answer 3

我还在 android sdk 中寻找了解决方案，但没有找到，所以我为它编写了一个自定义 TabWidget。

简短版：

• 扩展TabWidget类，重写方法：drawChild(Canvas canvas, View child, long drawingTime)
• 在绘画中，您只需在画布上绘制一个位图。您使用 child.getRight() 获得孩子的 x 位置并减去您的徽章位图的宽度。还要在上面画出徽章编号的文字。
• 要保持每个选项卡的状态，您可以使用带有键的 HashMap 用于每个选项卡的索引。
• 为了能够从任何地方更新选项卡，我使用了一个单例类，其中包含我从主活动初始化的小部件。

更多信息可以在这里找到，包括示例 android 项目的源代码：

http://nilisoft.com/?p=622

享受吧！

Answer 4

你想重新绘制标签的图像看看这个答案Updating Android Tab Icons

Answer 5

在调整了一些其他解决方案后，我想出了一些简单的方法，希望这对某人有所帮助。

创建自定义选项卡布局 tab_badge.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent">

<TextView
    android:id="@+id/tab_badge"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:background="@drawable/badge_background"
    android:gravity="center"
    android:layout_centerVertical="true"
    android:textColor="@color/colorWhite"
    android:textSize="20sp"
    android:textStyle="bold"/>

<TextView
    android:id="@+id/tab_text"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textSize="16sp"
    android:textColor="@color/colorWhite"
    android:text="test"
    android:textStyle="bold"
    android:gravity="center"
    android:textAppearance="@style/Widget.AppCompat.Light.ActionBar.TabText"
    android:layout_toRightOf="@+id/tab_badge"/>

</RelativeLayout>

badge_background.xml 是一个椭圆形可绘制对象，其中填充了您想要的徽章颜色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<solid android:color="@color/colormaterialred500" />
</shape>

扩展 textview 获取 myBadgeView 类：

public class myBadgeView extends TextView {

private View target;

public myBadgeView(Context context, View target) {
    super(context);
    init(context, target);
}

private void init(Context context, View target) {
    this.target = target;
}

public void updateTabBadge(int badgeNumber) {
    if (badgeNumber > 0) {
        target.setVisibility(View.VISIBLE);
        ((TextView) target).setText(Integer.toString(badgeNumber));
    }
    else {
        target.setVisibility(View.GONE);
    }
}
}

在你的活动中声明tablayout如下：

tabLayout = (TabLayout) findViewById(R.id.tab_layout);
TabLayout.Tab tab1 = tabLayout.newTab();
    tab1.setCustomView(R.layout.tab_badge);
    TextView tab_text_1 = (TextView) tab1.getCustomView().findViewById(R.id.tab_text);
    tab_text_1.setText("Tab1");
    tabLayout.addTab(tab1);
    badge1 = new myBadgeView(this, tab1.getCustomView().findViewById(R.id.tab_badge)); tab1.getCustomView().findViewById(R.id.tab_badge);

 //set the badge for the tab
    badge1.updateTabBadge(badge_value_1);