[英]How to achieve Android UI like this image layout? About android:clipChildren
What I want to achieve is like this layout: 我想要实现的就像这样的布局:
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>
You can see that, the "GET" label(with orange background) is clipped through the parent bound. 你可以看到,“GET”标签(橙色背景)通过父界限被剪裁。 I have set the
android:clipChildren="false"
, but still it is clipped. 我已经设置了
android:clipChildren="false"
,但它仍然被剪裁了。 Can somebody help me? 有人能帮助我吗?
A single RelativeLayout is the way to go. 一个RelativeLayout是要走的路。 Remember to keep things as simple as possible.
记住尽量保持简单。 In RelativeLayout the last declared elements are rendered on top of the others.
在RelativeLayout中,最后声明的元素呈现在其他元素之上。 The XML below should (kinda) fit your needs, just adjust images and margins and sizes as you require.
下面的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>
Have you thought about using FrameLayout?? 你有没有想过使用FrameLayout? That makes the overlaying of image easier... (making one layout/view appear on top of another)... Here is a good tutorial...
这使得图像的叠加更容易......(使一个布局/视图出现在另一个上面)...这是一个很好的教程......
http://mobile.tutsplus.com/tutorials/android/android-sdk_frame-layout/ http://mobile.tutsplus.com/tutorials/android/android-sdk_frame-layout/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.