Android 如何创建 Badges (Item Counts)

帮助用户添加提示通知

在本次学习中，我们的目标是为Android应用程序创建一个Badge (Item Count)函数。徽章实际上用于显示通知、消息和产品数量。如今，许多Android应用程序都使用了徽章。没有简单的方法来实现它，所以我们将通过自己编码来实现它。

要求：

1. JDK 7.0 or above.
2. Android Studio 2.0.

步骤：

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

item_count.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://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 并添加相对布局、按钮和文本。您的 Activity_main.xml 文件应如下所示。您还需要在 Drawable 文件夹中为此布局添加所需的图像。

<?xml version="1.0" encoding="utf-8"?>
<!--Adding Badge (Item Count)/Notification Count to Android Button-->
<RelativeLayout xmlns:android="http://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>

在 LinearLayout中添加 

      <LinearLayout
            android:layout_width="110dp"
            android:layout_height="match_parent"
            android:id="@+id/we_center_center"
            android:orientation="vertical"
            android:background="#F0F0F0"
            >           
 <android.widget.Button
                android:id="@+id/query_trading"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:textColor="@color/white"
                android:background="@drawable/btn_color_blueselector"
                android:onClick="clickButtonView"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="15dp"
                android:text="查交易"
                />

               <RelativeLayout
                   android:id="@+id/relative_layout"
                   android:layout_width="wrap_content"
                   android:layout_marginTop="13dp"
                   android:layout_height="40dp">

                    <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        >
                        <android.widget.Button
                            android:id="@+id/query_pending_order"
                            android:layout_width="wrap_content"
                            android:layout_height="30dp"
                            android:textColor="@color/white"
                            android:background="@drawable/btn_color_blueselector"
                            android:onClick="clickButtonView"
                            android:layout_marginLeft="15dp"
                            android:text="购物车"
                            android:layout_centerVertical="true"
                            android:layout_alignParentBottom="true"
                            />
                    </RelativeLayout>
                    <RelativeLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        >
                        <TextView
                            android:id="@+id/badge_notification_1"
                            android:layout_width="20dip"
                            android:layout_height="20dip"
                            android:layout_alignRight="@id/relative_layout"
                            android:background="@drawable/item_count"
                            android:text="0"
                            android:textColor="#FFF"
                            android:textSize="9sp"
                            android:layout_marginLeft="80dp"
                            tools:ignore="NotSibling"
                            android:layout_centerVertical="true"
                            android:layout_alignParentTop="true"
                            />
                    </RelativeLayout>

               </RelativeLayout>
</LinearLayout>

 运行后效果图：

您的 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);
    }
}

现在，当您运行应用程序时，您将看到如下屏幕截图