Question

我想设计以下UI。任何人都可以给我一个例子或建议一些实施的源代码吗？

Icon I want

Answer 1

Here is Project on Git Hub关于在不同项目上显示徽章，但在您的应用内（即TextView，TabHost，ImageView等等

关于在应用程序图标上显示徽章，这是不可能的，因为这不是显示通知的android方式。 android框架支持使用Status bar Notifications

处理通知

Answer 2

如果你想在左上角设置通知图标，它就像下一段代码一样简单：

Bitmap1必须大于bitmap2，在你的情况下我会建议它是一个透明背景的PNG图像，以允许通知气泡在图像的其余部分之外。

        private Bitmap overlay(Bitmap bitmap1, Bitmap bitmap2) {
            Bitmap bmOverlay = Bitmap.createBitmap(bitmap1.getWidth(), bitmap1.getHeight(), bitmap1.getConfig());
            Canvas canvas = new Canvas(bmOverlay);
            canvas.drawBitmap(bitmap1, new Matrix(), null);
            canvas.drawBitmap(bitmap2, new Matrix(), null);
            return bmOverlay;
        }

否则，如果您想要它在右上角，您应该尝试Canvas.drawBitmap的任何其他规范。

例如：

canvas.drawBitmap(Bitmap bitmap, float left, float top, Paint paint);

尝试做类似的事情：

private Bitmap overlay(Bitmap bitmap1, Bitmap bitmap2) {
            Bitmap bmOverlay = Bitmap.createBitmap(bitmap1.getWidth(), bitmap1.getHeight(), bitmap1.getConfig());
            Canvas canvas = new Canvas(bmOverlay);
            canvas.drawBitmap(bitmap1, new Matrix(), null);
            canvas.drawBitmap(bitmap2, bitmap1.getWidth()-bitmap2.getWidth(), 
                              0,null);
            return bmOverlay;
        }

如果您想要的是如何在XML上执行此操作，那么您应该创建一个RelativeLayout，然后在其上添加两个图像并将通知气泡对齐到右侧。这应该可以解决问题。您仍然需要具有透明背景的PNG图像。

我希望这对你想做的事情已经足够了。

Answer 3

您可以将RelativeLayout与两个孩子一起使用，一个用于图标，另一个用于徽章。该图标需要额外的填充，以使徽章略微位于其外部。徽章与parentTop和parentRight对齐。

Answer 4

以下是此应用小部件图标徽章计数显示的源代码。

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_widget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dip"
android:focusable="true" >

<ImageView
    android:id="@+id/icon"
    android:layout_width="60dip"
    android:layout_height="60dip"
    android:layout_marginTop="8dp"
    android:background="@drawable/logo"
    android:contentDescription="image"
    android:scaleType="center" />

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/icon"
    android:gravity="center"
    android:paddingLeft="3dp"
    android:paddingTop="10dp"
    android:shadowColor="#000000"
    android:shadowDx="1"
    android:shadowDy="1"
    android:shadowRadius="1.5"
    android:text="@string/app_name"
    android:textColor="#FFF" />

<TextView
    android:id="@+id/txt_count"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="-10dip"
    android:layout_toRightOf="@+id/icon"
    android:background="@drawable/badge_count2"
    android:contentDescription="badge"
    android:gravity="center"
    android:text="1"
    android:textColor="@color/White"
    android:textStyle="bold" />

</RelativeLayout>

并且您还需要这个badge_count2.xml可绘制文件。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<solid android:color="@color/red" >
</solid>

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

<padding
    android:bottom="2dp"
    android:left="7dp"
    android:right="7dp"
    android:top="3dp" />

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

Answer 5

这里有一个简单的库可用支持多种设备，如sony，samsung，moto等...尝试这个...这将工作...我试过并且工作正常... http://github.com/leolin310148/ShortcutBadger

用于图标通知的UI帮助

5 个答案: