【问题标题】:Convert css gradient in to android gradient (xml)将css渐变转换为android渐变(xml)
【发布时间】:2018-06-23 21:28:46
【问题描述】:

我想将 css 渐变转换为 android xml 渐变(形状)文件

例如

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

<?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:endColorandroid:startColorandroid:centerColor如何定义这个百分比和css中呈现的各种颜色

是否有任何在线工具可以通过提供 css 输入生成 xml 文件。

【问题讨论】:

  • 虽然我认为@Matthew Schlachter给出的答案已经足够了。但是由于您还没有接受,我想知道您是否需要更多帮助?
  • @RoyalGriffin 嘿,我没有时间测试它。一旦我测试它,我会接受答案:)

标签: android css gradient


【解决方案1】:

我建议查看这个相关问题:Using a gradientDrawable with more than three colors set

使用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);

我链接的问题和official documentation 包含有关如何使用它的更多详细信息。

【讨论】:

  • 谢谢,我会测试并告诉你
  • 我也可以指路吗?
  • 据说你可以通过将宽度设置为0来将其设置为垂直,但我只将它用于水平渐变
【解决方案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 位 GRBcode 并附加 52% 的不透明度等价于 here 并附加给定的 RGBcode

例如 #f99185 52% 将变为 #f9918585,因为 52% 的十六进制数是 85

【讨论】:

  • 我知道百分比呢?
  • 谢谢,我认为在示例中应该是#85f99185 alpha 通道优先
猜你喜欢
  • 2019-10-29
  • 1970-01-01
  • 2016-04-21
  • 2020-02-03
  • 2017-12-15
  • 1970-01-01
  • 1970-01-01
  • 2018-09-14
相关资源
最近更新 更多