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）

我很沮丧，因为我找不到屏蔽布局的方法。这里的大多数答案都说要使用背景图片，但这不是我需要的。

---

编辑：之前的答案建议使用FrameLayout 并设置android:foreground 可绘制对象。这在视图中引入了一些奇怪的填充。我已更新我的答案以使用更简单的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（棒棒糖）View.setClipToOutline。来自Defining Shadows and Clipping Views 上的 Android 文档：

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

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

Answer 3

你的描述听起来像这样：

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