Làm cách nào để đạt được giao diện người dùng Android như bố cục hình ảnh này? Về android: clipChildren

Question

Những gì tôi muốn đạt được cũng giống như cách bố trí này:

tôi đã cố gắng sử dụng mã này, để đạt được như hình ảnh đó, nhưng không may, tôi đã thất bại. Đây là đoạn mã của tôi:

<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> 

Bạn có thể thấy rằng, các "GET" nhãn (với nền màu cam) được cắt bớt thông qua phụ huynh bị ràng buộc. Tôi đã thiết lập android:clipChildren="false", nhưng nó vẫn bị cắt bớt. Ai đó có thể giúp tôi được không?

Answer 1

Một RelativeLayout duy nhất là con đường để đi . Hãy nhớ giữ mọi thứ càng đơn giản càng tốt. Trong RelativeLayout, các phần tử được khai báo cuối cùng được hiển thị trên các phần tử khác. XML dưới đây nên (kinda) phù hợp với nhu cầu của bạn, chỉ cần điều chỉnh hình ảnh và lề và kích cỡ theo yêu cầu của bạn.

<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

Bạn đã từng nghĩ đến việc sử dụng FrameLayout chưa ?? Điều đó làm cho bọc hình ảnh dễ dàng hơn ... (đã có một bố trí/view xuất hiện trên đầu của người khác) ... Đây là một hướng dẫn tốt ...

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