将CSS渐变转换为Android渐变（XML）

Question

我可以帮您将CSS渐变转换为Android XML渐变（形状）文件。以下是需要翻译的内容：

例如：

background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);

to

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="0"
        android:endColor="#b12a5b"
        android:startColor="#ff867a"
        android:type="linear" />
</shape>

我不太了解 CSS，我只知道 Android，它只有三个颜色参数: android:endColor、android:startColor 和 android:centerColor。那么我该如何定义在 CSS 中呈现的颜色百分比和各种颜色呢？

有没有在线工具可以通过输入 CSS 生成 XML 文件呢？

- Sunny

---

虽然我认为@Matthew Schlachter给出的答案已经足够了。但是既然您还没有接受它，我想知道您是否需要更多的帮助？ - RoyalGriffin

@RoyalGriffin 嘿，我还没有时间测试它。一旦我测试过了，我会接受这个答案的 :) - Sunny

Answer 1

我建议您查看这个相关问题：使用GradientDrawable设置超过三种颜色 使用LinearGradient对象，您可以使用多种颜色和百分比停止定义渐变。

例如（来自我链接的问题）：

LinearGradient linearGradient = new LinearGradient(0, 0, width, height,
        new int[] { 
            0xFF1e5799, 
            0xFF207cca, 
            0xFF2989d8, 
            0xFF207cca }, //substitute the correct colors for these
        new float[] {
            0, 0.40f, 0.60f, 1 },
        Shader.TileMode.REPEAT);

我链接的问题和官方文档中包含了更多关于如何使用它的细节。

- Matthew Schlachter

---

谢谢，我会测试并告诉你。 - Sunny

我可以指示吗？ - Sunny

据说你可以通过将宽度设置为0来使其垂直，但我只在水平渐变中使用过它。 - Matthew Schlachter

Answer 2

我过去曾经使用过这个来绘制背景渐变

        View    layout  =   findViewById(R.id.mainLayout);

        GradientDrawable    gradientDrawable    =   new GradientDrawable(
                GradientDrawable.Orientation.TOP_BOTTOM,
                new int[]   {0xff45c0cc,0xff0054a6}
        );
        gradientDrawable.setCornerRadius(0f);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            layout.setBackground(gradientDrawable);
        }

我从给定的 CSS 中理解到 #f99185-52% 表示 52% 的透明度。在我的代码示例中，int[] 有一个十六进制代码。你可以使用 6 位 GRB 码并附加相当于 52% 不透明度的值从 这里 并将其附加到给定的 RGB 码后面。

例如：#f99185 52% 将变成 #f9918585，因为 52% 在十六进制中是 85

- Omer Haqqani

---

我知道这个关于百分比的问题吗？ - Sunny

谢谢，我认为在这个例子中应该是 #85f99185，透明通道先出现。 - Sunny