2010-12-01 31 views
21

我设置具有以下可绘制背景的LinearLayout:Android的XML圆润剪切的边角

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <corners android:radius="10dp" /> 
    <solid android:color="#CCFFFFFF"/> 
</shape> 

我遇到的问题是在的LinearLayout内我有坐在它的底部另一个LinearLayout中元素的父。由于没有圆角,它的拐角延伸过父母的左下角和右下角。

对孩子的LinearLayout的背景绘制如下:

<?xml version="1.0" encoding="utf-8"?> 
<bitmap 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:src="@drawable/pedometer_stats_background" 
    android:tileMode="repeat" 
/> 

的问题是这样的:http://kttns.org/hn2zm设备上的非剪裁更为明显。

什么是完成剪裁的最佳方法?

+2

我猜它会被巧妙地使用填充和边距来解决 – schwiz 2010-12-01 19:23:15

回答

6

你的描述听起来就好像什么:

<LinearLayout android:shape="rounded"> 
    <LinearLayout android:background="@drawable/pedometer_stats_background"> 
    </LinearLayout> 
</LinearLayout> 

和内部布局是推动圆角之外,因为它不是圆的。你必须围绕你的位图的角落。如果你有一个重复的位图,你会想要定义一个九个补丁的drawable。圆角然后定义可扩展的图形部分。

http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

这会是很好,如果我们可以只添加一个位图的形状绘制并有被应用为皮肤上的任何形状,我们正在绘制。而且,我敢打赌,如果您知道自己在做什么,可以创建一个绘制位图的Shape子类,但不幸的是,这并不包含在Android中。

+0

感谢你们,我试图在没有定制位图的情况下离开。不能相信你不能阻止孩子流血。 – sgarman 2011-01-17 02:21:33

+0

好吧,你可以阻止它们,但它不是开箱即用的。用一点代码和独创性,你就可以创造出这样的东西。 – chubbsondubs 2012-11-12 14:26:16

26

我需要iPhone风格的圆形布局,背后有灰色背景。 (叹息 - 总是复制iPhone)

我很沮丧,我无法找到掩盖布局的方法。这里的大多数答案都表示使用背景图片,但这不是我所需要的。


编辑:以前的答案使用FrameLayout和设置android:foreground绘制建议。这在视图中引入了一些奇怪的填充。我更新了我的答案,使用更简单的RelativeLayout技术。


诀窍是使用RelativeLayout;把你的布局放在里面。 在您的布局下方,添加另一个ImageView,将其background设置为合适的遮罩图像帧。这将在您的其他布局的顶部绘制。

在我的情况下,我做了一个9Patch文件,它是一个灰色的背景,用一个透明的圆角矩形切出来。

frame

这为您的基础布局完美的面具。

XML代码如下 - 这是一个正常的布局XML文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_height="wrap_content" android:layout_width="fill_parent"> 

    <!-- this can be any layout that you want to mask --> 
    <LinearLayout android:id="@+id/mainLayout" 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent" android:orientation="vertical" 
     android:background="@android:color/white"> 

     <TextView android:layout_height="wrap_content" 
      android:layout_width="wrap_content" android:layout_gravity="center" 
      android:text="Random text..." /> 

    </LinearLayout> 

    <!-- FRAME TO MASK UNDERLYING VIEW --> 
    <ImageView android:layout_height="fill_parent" 
     android:layout_width="fill_parent" 
     android:background="@drawable/grey_frame" 
     android:layout_alignTop="@+id/mainLayout" 
     android:layout_alignBottom="@+id/mainLayout" /> 

</RelativeLayout> 

注意ImageView在底部,对准顶部&底部到主布局,与掩蔽图像组:

  • android:background="@drawable/grey_frame"

此引用我9Patch文件 - 和口罩的基本布局通过在前景中绘制。

下面是一个显示标准布局上的灰色圆角的示例。

maskedLayout

HTH

3

API级21(杰利贝恩)加入View.setClipToOutline。从上Defining Shadows and Clipping Views Android文档:

要夹的视图到可拉伸的形状,设置可绘制作为视图的背景...并调用View.setClipToOutline()方法。

我通过将父视图的背景设置为具有圆角半径的GradientDrawable来测试此功能,并且将子视图正确裁剪以匹配父项的相同圆角。