将徽章气泡放在按钮的左上方

时间:2010-08-22 14:01:22

标签: android

我正在尝试为我的某个活动按钮添加徽章。现在我正在尝试做xml。 带徽章的按钮应如下所示:

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中的Buttoms是这样的:

<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 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 个答案:

答案 0 :(得分:7)

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

通过

定位图像(带数字的圈数)和按钮
android:layout_gravity="top|left"
android:layout_marginTop="Xdp"
android:layout_marginLeft="Xdp"

给你的喜欢。

答案 1 :(得分:3)

我认为使用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