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 drawable。这在视图中引入了一些奇怪的填充。我更新了我的答案，使用更简单的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，顶部对齐＆amp;底部到主布局，屏蔽图像设置：

• android:background="@drawable/grey_frame"

这引用了我的9Patch文件 - 并通过在前台绘制来屏蔽底层布局。

以下示例显示了标准布局上的灰色圆角。

HTH

Answer 2

你的描述听起来像这样：

<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

如果我们可以将一个位图添加到可绘制的形状并将其作为一个皮肤应用于我们绘制的任何形状，那就太好了。而且，我敢打赌，如果你知道你在做什么，你可以创建一个绘制位图的Shape子类，但不幸的是，它不包含在Android中。

Answer 3

API等级21（Lollipop）添加了View.setClipToOutline。来自Defining Shadows and Clipping Views上的Android文档：

  

要将视图剪切为可绘制的形状，请将drawable设置为视图的背景...并调用View.setClipToOutline（）方法。

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