如何在Android创建Badges（项目计数）

---

在本教程中，我们旨在为Android应用程序创建一个Badge（项目计数）功能。Badges是用来显示通知、信息的数量和产品数。这些天许多Android应用程序使用badges。这个没有简单的方法来做，所以我们会通过我们自己编码来完成。

要求

1. JDK 7.0或以上。
2. Android Studio 2.0。

步骤：

在Drawable文件夹中，创建一个名为item_count的XML文件和创建一个8 dp圆角半径的矩形。

item_count.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="//schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="8dp" />
    <solid android:color="#f20000" />
    <stroke
        android:width="2dip"
        android:color="#FFF" />
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
</shape>

修改activity_main.xml和添加Relativelayout、Buttons和文本。你的activity_main.xml文件应该像下面这样。你还要在Drawable文件夹中为这个布局添加所需的图像。

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<!--Adding Badge (Item Count)/Notification Count to Android Button-->
<RelativeLayout xmlns:android="//schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="16dp">
    <RelativeLayout
        android:id="@+id/badge_layout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RelativeLayout
            android:id="@+id/relative_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <Button
                android:id="@+id/button1"
                android:layout_width="65dip"
                android:layout_height="65dip"
                android:background="@drawable/chat_icon" />
        </RelativeLayout>
        <TextView
            android:id="@+id/badge_notification_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@id/relative_layout"
            android:background="@drawable/item_count"
            android:text="16"
            android:textColor="#FFF"
            android:textSize="16sp"
            android:textStyle="bold" />
    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/badge2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:layout_toRightOf="@+id/badge_layout1">
        <RelativeLayout
            android:id="@+id/relative_layout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <Button
                android:id="@+id/myButton1"
                android:layout_width="65dip"
                android:layout_height="65dip"
                android:background="@drawable/email_icon" />
        </RelativeLayout>
        <TextView
            android:id="@+id/badge_notification_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@id/relative_layout1"
            android:background="@drawable/item_count"
            android:text="21"
            android:textColor="#FFF"
            android:textSize="16sp"
            android:textStyle="bold" />
    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/badge4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/badge_layout1"
        android:layout_marginTop="50dp">
        <RelativeLayout
            android:id="@+id/relative_layout3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <Button
                android:id="@+id/myButton4"
                android:layout_width="wrap_content"
                android:layout_height="65dip"
                android:background="#4169E1"
                android:elevation="4dp"
                android:paddingLeft="50dp"
                android:paddingRight="50dp"
                android:text="Notification"
                android:textColor="#fff" />
        </RelativeLayout>
        <TextView
            android:id="@+id/badge_notification_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/relative_layout3"
            android:background="@drawable/item_count"
            android:text="427"
            android:textColor="#FFF"
            android:textSize="16sp"
            android:textStyle="bold" />
    </RelativeLayout>
</RelativeLayout>

你的MainActivity.java文件应该看起来像这样：

MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

现在，当你运行你的应用程序时，你将看到下面这样的屏幕截图：

要求

本文翻译自：

 

PS: 关于移动开发，这些产品你可以关注>>

关于移动开发的最新资讯和产品推荐，请<>!