如何實現像這種圖像布局的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/