如何在Android Drawable文件中定义带白背景的透明圆形？解决环形问题

当然可以！完全通过XML Drawable就能实现你想要的所有效果，我来给你详细拆解方案，附带代码和效果对比说明。

一、实现「环形+外部区域背景」的Drawable #

要做出清晰的环形效果，同时让环形之外的区域显示自定义背景，最直观的方式是用layer-list叠加多个shape，底层做外部背景，上层做环形主体：

代码示例 #

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 第一层：环形外部的背景色（可替换成你需要的颜色） -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#F0F0F0" />
        </shape>
    </item>
    <!-- 第二层：环形主体（中间空心，有厚度） -->
    <item
        android:top="20dp"
        android:left="20dp"
        android:right="20dp"
        android:bottom="20dp">
        <shape android:shape="oval">
            <!-- 环形的厚度和颜色 -->
            <stroke
                android:width="12dp"
                android:color="#2196F3" />
            <!-- 中间空心设为透明，透出底层背景或视图内容 -->
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

原理说明 #

• 底层的矩形shape负责填充整个视图的背景（也就是你要的「圆形外部区域背景」）
• 上层的椭圆形shape通过stroke设置环形的厚度和颜色，solid设为透明实现中间空心
• 通过top/left/right/bottom的padding可以灵活调整环形在视图中的位置和大小

二、定义「带有白色背景的透明圆形」的Drawable #

这个需求分两种常见场景，我都给你提供实现：

场景1：白色背景上的透明圆形洞（矩形背景+中间透明圆） #

适合需要在白色背景上挖一个圆形透明区域的情况：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 白色背景层 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
    <!-- 中间透明圆形 -->
    <item
        android:top="15dp"
        android:left="15dp"
        android:right="15dp"
        android:bottom="15dp">
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

场景2：白色边框的透明圆形（中间空心，边框白色） #

适合需要一个白色边框、中间完全透明的圆形：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!-- 白色边框的厚度和颜色 -->
    <stroke
        android:width="4dp"
        android:color="#FFFFFF" />
    <!-- 中间区域透明 -->
    <solid android:color="@android:color/transparent" />
</shape>

三、当前效果 vs 期望效果对比 #

假设你当前的Drawable效果是以下情况，对应调整后就能达到期望：

你可以根据自己的实际当前效果，调整上述代码中的stroke宽度、padding值、颜色参数，就能完美匹配需求啦！

内容的提问来源于stack exchange，提问作者Yanxiang Zhu