如何实现像这样的图像布局的Android用户界面？关于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/