如何实现像这种图像布局的Android UI？ 关于android：clipChildren

Question

我想要实现的就像这样的布局：

我试图使用这个代码来实现这样的图像，但不幸的是，我失败了。 这是我的代码片段：

 <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:clipChildren="false"
        >



        <RelativeLayout
            android:id="@+id/text_area_third"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/round_corner_background"
            android:focusable="false"
            android:paddingBottom="5dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingTop="5dp" >

            <TextView
                android:id="@+id/text_download_purch_third"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignRight="@+id/acron_icon"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="30dp"
                android:layout_marginTop="10dp"
                android:gravity="left"
                android:maxLines="2"
                android:text="1asdasdasdasdadsasdasdadasdasdasdasdasdasdasdasd"
                android:textColor="@color/black"
                android:textSize="10sp"
                android:textStyle="normal" />

            <ImageView
                android:id="@+id/acron_icon"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_margin="5dp"
                android:layout_marginTop="10dp"
                android:background="@drawable/acron"
                android:scaleType="fitCenter" />
        </RelativeLayout>

         <LinearLayout
             android:layout_alignTop="@+id/text_area_third"
             android:layout_alignLeft="@+id/text_area_third"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="@color/orange"
             android:layout_marginLeft="-10dp"
             android:layout_marginTop="-10dp"
             android:padding="3dp" >

             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="GET"
                 android:textColor="@color/white"
                 android:textSize="13sp"
                 android:textStyle="bold" />
         </LinearLayout>

    </RelativeLayout>

你可以看到，“GET”标签（橙色背景）通过父界限被剪裁。 我已经设置了android:clipChildren="false" ，但它仍然被剪裁了。 有人能帮助我吗？

Answer 1

一个RelativeLayout是要走的路。 记住尽量保持简单。 在RelativeLayout中，最后声明的元素呈现在其他元素之上。 下面的XML应该（有点）满足您的需求，只需根据需要调整图像和边距和大小。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="180dp"
    android:layout_height="60dp"
    android:background="#DDD" >

    <TextView
        android:id="@+id/text_download_purch_third"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="3dp"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/round_corner_background"
        android:maxLines="2"
        android:paddingLeft="4dp"
        android:paddingRight="25dp"
        android:paddingTop="16dp"
        android:text="1asdasdasdasdadsasdasdadasdasdasdasdasdasdasdasd"
        android:textColor="@color/black"
        android:textSize="10sp"
        android:textStyle="normal" />

    <ImageView
        android:id="@+id/acron_icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_margin="5dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/acron"
        android:scaleType="fitCenter" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="4dp"
        android:background="#FFA0A0"
        android:padding="2dp"
        android:text="GET!"
        android:textColor="@color/white"
        android:textSize="13sp"
        android:textStyle="bold" />

</RelativeLayout>

Answer 2

你有没有想过使用FrameLayout？ 这使得图像的叠加更容易......（使一个布局/视图出现在另一个上面）...这是一个很好的教程......

http://mobile.tutsplus.com/tutorials/android/android-sdk_frame-layout/