如何将CSS RadialGradient转换为Android Drawable？

我来帮你搞定这个转换！你的CSS径向渐变有明确的圆心位置和多色标，Android里可以通过XML Shape或者代码创建RadialGradient两种方式实现，下面分别说明：

一、XML Shape实现方式 #

首先纠正你现有代码里的小错误：CSS里的圆心X是24%，你写成36%了，得改回来。另外因为是多色标渐变，Shape的gradient标签需要用颜色数组和位置数组来定义，具体步骤如下：

1. 定义颜色和位置数组 #

在res/values/arrays.xml中添加以下内容（如果没有这个文件就新建一个）：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 对应CSS里的色值序列：#ffffff, #c0e3e0, #a4c4d7, #000000 -->
    <array name="radial_gradient_colors">
        <item>#ffffff</item>
        <item>#c0e3e0</item>
        <item>#a4c4d7</item>
        <item>#000000</item>
    </array>
    <!-- 对应每个色值的位置：0%, 20%, 61%, 100% -->
    <array name="radial_gradient_positions">
        <item>0.0</item>
        <item>0.2</item>
        <item>0.61</item>
        <item>1.0</item>
    </array>
</resources>

2. 完成Shape布局文件 #

在res/drawable下创建（或修改）你的shape文件，比如radial_gradient_bg.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:type="radial" <!-- 对应CSS的radial-gradient -->
        android:centerX="24%" <!-- 对应CSS的at 24% X -->
        android:centerY="50%" <!-- 对应CSS的at 50% Y -->
        android:colors="@array/radial_gradient_colors" <!-- 引用颜色数组 -->
        android:positions="@array/radial_gradient_positions" <!-- 引用位置数组 -->
        android:gradientRadius="100%" <!-- 设为100%保证圆形渐变覆盖整个容器，匹配CSS的circle -->
        android:useLevel="false" <!-- 必须设为false，否则渐变可能无法正常显示 -->
        android:tileMode="clamp" /> <!-- 超出渐变范围的区域用最后一种颜色填充，和CSS默认行为一致 -->

</shape>

3. 使用这个背景 #

在布局文件里直接引用即可：

<View
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/radial_gradient_bg" />

二、代码创建RadialGradient（适合动态场景） #

如果需要在代码中动态调整渐变参数（比如根据View尺寸变化），可以直接创建RadialGradient shader并设置给Paint：

import android.graphics.Color;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.graphics.Paint;
import android.view.View;

// 在自定义View的onDraw方法中或者初始化时：
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    
    int width = getWidth();
    int height = getHeight();
    
    // 创建径向渐变
    RadialGradient radialGradient = new RadialGradient(
        0.24f * width, // 圆心X：24%的View宽度
        0.5f * height, // 圆心Y：50%的View高度
        Math.max(width, height), // 半径：取宽高中较大值，确保覆盖整个View，对应CSS的circle
        new int[]{Color.WHITE, Color.parseColor("#c0e3e0"), Color.parseColor("#a4c4d7"), Color.BLACK},
        new float[]{0f, 0.2f, 0.61f, 1f}, // 对应每个颜色的位置比例
        Shader.TileMode.CLAMP
    );
    
    Paint paint = new Paint();
    paint.setShader(radialGradient);
    
    // 绘制填充整个View的矩形
    canvas.drawRect(0, 0, width, height, paint);
}

关键参数对应说明 #

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