如何在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: 關于移動開發，這些產品你可以關注>>

關于移動開發的最新資訊和產品推薦，請<>!