代码之家 › 专栏 › 技术社区 › Macarse

在按钮的左上侧放置徽章气泡

android

Macarse · 技术社区 · 14 年前

带徽章的按钮应如下所示:

alt text

我已经用一个 RelativeLayout

<RelativeLayout android:layout_width="wrap_content" 
            android:layout_height="wrap_content">

            <ImageView android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:src="@drawable/badge"
                android:layout_centerInParent="true"/>

             <TextView android:layout_width="wrap_content" 
                       android:layout_height="wrap_content"
                       android:textStyle="bold"
                       android:text="2"
                       android:layout_centerInParent="true" />
         </RelativeLayout>

但我找不到一种方法将它放在那里,并使用相同的xml使它在纵向和横向上工作。

臀部 Activity 它们是这样的:

<Button android:id="@+id/new_releases_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_button_selector"
            android:text="@string/new_releases_title"
            android:textColor="#FFFFFF"
            android:textSize="20sp"
            android:gravity="center_vertical"
            android:paddingLeft="12dp"
            android:layout_marginTop="15dp"
            android:layout_below="@id/coming_soon_button"
            android:onClick="newReleaseClick"
            android:layout_centerHorizontal="true" />

        <Button android:id="@+id/top_sellers_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_button_selector"
            android:text="@string/top_sellers_title"
            android:textColor="#FFFFFF"
            android:textSize="20sp"
            android:gravity="center_vertical"
            android:paddingLeft="12dp"
            android:layout_marginTop="15dp"
            android:layout_below="@id/new_releases_button"
            android:onClick="topSellersClick"
            android:layout_centerHorizontal="true" />

以下是两个资源:

alt text

我应该如何处理xml?

编辑: 目前为止最好的方法,但仍然不起作用:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <Button android:id="@+id/discounts_button"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:background="@drawable/ic_button_selector"
                android:text="@string/discounts_title"
                android:textColor="#FFFFFF"
                android:textSize="20sp"
                android:onClick="discountsClick"
                android:layout_marginTop="40dp"
                android:layout_marginLeft="20dp"/>

        <RelativeLayout android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:layout_gravity="top|left">

            <ImageView android:layout_width="wrap_content" 
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:src="@drawable/badge"
                    android:layout_centerInParent="true"/>

             <TextView android:layout_width="wrap_content" 
                           android:layout_height="wrap_content"
                           android:textStyle="bold"
                           android:text="20"
                           android:layout_centerInParent="true" />
         </RelativeLayout>
</FrameLayout>

2 回复 | 直到 14 年前

Mathias Conradt 14 年前

使用 FrameLayout (而不是RelativeLayout)并将按钮和图像放入其中。

定位图像(带编号的圆环)并通过

android:layout_gravity="top|left"
android:layout_marginTop="Xdp"
android:layout_marginLeft="Xdp"

Macarse 14 年前

我想说使用FrameLayout应该很容易:

<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content"
     android:layout_centerHorizontal="true" android:layout_marginTop="15dp">
      <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="15dip">
       <Button android:id="@+id/new_releases_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_button_selector"
        android:text="@string/new_releases_title"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:gravity="center_vertical"
        android:paddingLeft="12dp"
        android:layout_below="@id/coming_soon_button"
        android:onClick="newReleaseClick"/>
     </FrameLayout>
     <RelativeLayout android:layout_width="wrap_content" 
        android:layout_height="wrap_content">
        <ImageView android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:src="@drawable/badge"
            android:layout_centerInParent="true"/>
         <TextView android:layout_width="wrap_content" 
                   android:layout_height="wrap_content"
                   android:textStyle="bold"
                   android:text="2"
                   android:layout_centerInParent="true" />
     </RelativeLayout>
</FrameLayout>

编辑:

添加 android:layout_gravity="top|left" 将如下所示:

alt text