如何实现Android的UI这样的图像布局？关于Android：clipChildren [英] How to achieve Android UI like this image layout? About android:clipChildren

问题描述

我想实现的就是这样的布局：

What I want to achieve is like this layout:

我试图用这个code，能实现这样的形象，但不幸的是，我失败了。
这是我的code的片段：

I have tried to use this code, to achieve like that image, but unfortunately, I failed. This is the snippet of my code:

 <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，但它仍然被裁剪。有人可以帮我吗？

You can see that, the "GET" label(with orange background) is clipped through the parent bound. I have set the android:clipChildren="false", but still it is clipped. Can somebody help me?

推荐答案

一个单一RelativeLayout的是要走的路。请记住，让事情尽可能的简单。在的RelativeLayout最后声明的元件对他人的顶部呈现。该XML应该如下（有点）满足您的需求，就像你需要调整图像和利润率和大小。

A single RelativeLayout is the way to go. Remember to keep things as simple as possible. In RelativeLayout the last declared elements are rendered on top of the others. The XML below should (kinda) fit your needs, just adjust images and margins and sizes as you require.

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

这篇关于如何实现Android的UI这样的图像布局？关于Android：clipChildren的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！