Android开发如何实现UI右上角黄色阴影样式的drawable可绘制资源

这类右上角的装饰样式两种实现方式都支持，更推荐用Android原生drawable实现，相比图片实现适配性更强、不会出现多分辨率下模糊的问题、占用的包体积也更小。

具体实现方案 #

方案1：XML drawable实现（无代码，适配性好） #

在res/drawable目录下新建XML文件，通过LayerList嵌套旋转的矩形即可实现对应效果，示例代码如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="120dp"
        android:height="40dp"
        android:gravity="top|end"
        android:top="8dp"
        android:end="-36dp">
        <rotate android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#FFC107" />
                <!-- 如果需要圆角可以加下面这行，调整半径即可 -->
                <corners android:radius="2dp"/>
            </shape>
        </rotate>
    </item>
</layer-list>

使用时直接把该drawable设置为父布局的背景，或者在布局右上角叠加一个ImageView加载该drawable即可，你可以自行调整代码里的宽高、偏移量、颜色、旋转角度匹配设计图的具体样式。

方案2：自定义Drawable/View实现（适合需要动态修改的场景） #

如果后续需要动态调整装饰的颜色、形状、或者在装饰上添加文字信息，可以通过自定义Drawable重写绘制逻辑实现，核心代码示例如下（Kotlin）：

import android.graphics.*
import android.graphics.drawable.Drawable

class CornerBadgeDrawable : Drawable() {
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.parseColor("#FFC107")
        style = Paint.Style.FILL
        // 如果需要阴影可加如下配置
        setShadowLayer(8f, 0f, 2f, Color.parseColor("#33000000"))
    }
    private val path = Path()

    override fun draw(canvas: Canvas) {
        val viewWidth = bounds.width()
        // 自定义路径调整装饰形状，以下示例为右上角三角形斜角
        path.reset()
        path.moveTo(viewWidth - 110f, 0f)
        path.lineTo(viewWidth.toFloat(), 0f)
        path.lineTo(viewWidth.toFloat(), 110f)
        path.close()
        canvas.drawPath(path, paint)
    }

    override fun setAlpha(alpha: Int) {
        paint.alpha = alpha
    }

    override fun setColorFilter(colorFilter: ColorFilter?) {
        paint.colorFilter = colorFilter
    }

    override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
}

图片实现注意事项 #

如果选择用图片实现，需要切出mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi共5套不同分辨率的资源，放到对应res/drawable-*的目录下，避免不同设备上加载出现拉伸模糊的问题。

内容的提问来源于stack exchange，提问作者Zeeshan Ali