Android XML圆角剪裁

Question

我已经设置了一个具有以下可绘制背景的LinearLayout:

<?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元素位于它的父元素的底部.由于没有圆角,其角落延伸超过父母的左下角和右下角.

Child 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非剪辑更明显.

完成剪辑的最佳方法是什么？

Answer 1

2018年更新

在过去的7年中,情况发生了很大变化.

现在处理这种类型布局的最佳方法是使用CardView内置支持圆角和许多其他更新的UI功能.

应用cardCornerRadius属性将角设置为圆形.

<android.support.v7.widget.CardView
    .......
    app:cardCornerRadius="16dp">

</android.support.v7.widget.CardView>

原版的

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

我很沮丧,我找不到掩盖布局的方法.这里的大多数答案都说使用背景图像,但这不是我需要的.

编辑:上一个答案建议使用a FrameLayout并设置android:foregrounddrawable.这在视图中引入了一些奇怪的填充.我更新了我的答案,使用更简单的RelativeLayout技术.

诀窍是使用RelativeLayout; 将您的布​​局放在其中.在布局下方,添加另一个ImageView,将其设置background为合适的遮罩图像框.这将在您的其他布局之上绘制.

在我的例子中,我制作了一个9Patch文件,它是一个灰色的背景,切出一个透明的圆角矩形.

这为您的底层布局创建了完美的遮罩.

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文件 - 并通过在前台绘制来掩盖底层布局.

这是一个示例,显示标准布局上的灰色圆角.

心连心

Answer 2

API级别21（Lollipop）已添加View.setClipToOutline。从Android文档中的“ 定义阴影和剪切视图”：

要将视图裁剪为可绘制对象的形状，请将可绘制对象设置为视图的背景...，然后调用View.setClipToOutline（）方法。

我通过将父视图的背景设置为具有拐角半径的GradientDrawable进行了测试，并且正确修剪了子视图以匹配父视图的相同圆角。

Answer 3

你的描述听起来像这样:

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

并且内部布局在圆角外推,因为它不是圆形的.你必须围绕位图的角落.如果你有一个重复的位图,你会想看看定义一个9补丁drawable.围绕您的角落然后定义可以展开的图形部分.

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

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