Question

我想在我的应用中添加徽章，就像在iPhone中一样。

iPhone中使用的徽章的屏幕截图位于以下链接：

enter image description here

我已经在Android应用程序中完成了一些像徽章的图像，其屏幕截图位于以下链接中： enter image description here

这不是我想要的徽章，我想要像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 background

<?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 标签indicator.xml 是框架的标准drawable选项卡，我从sdk获得，我建议你应该也可以从sdk中的api文件夹中获取它，因为你还需要从drawable文件夹中复制一些图像，你可以找到它的 your_sdk_drive：\ SDK \平台\机器人-8

Answer 3

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

简短版本：

扩展TabWidget类并覆盖方法：drawChild（Canvas canvas，View child，long drawingTime）
在绘画中，您只需在画布上绘制一个位图。使用child.getRight（）获取子项的x位置，并减去徽章Bitmap的宽度。还要在上面绘制徽章编号的文本。
要保留每个标签的状态，您可以使用带有每个标签索引的键的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是一个椭圆形的drawable，填充了徽章所需的颜色

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

在android中为标签添加徽章

5 个答案: