android中的圆形渐变

Posted 2023-02-16

【中文标题】android中的圆形渐变

【英文标题】：Circular gradient in android

【发布时间】：2011-01-29 00:42:55

【问题描述】：

我正在尝试制作一个渐变，它从屏幕中间发出白色，并在向屏幕边缘移动时变为黑色。

当我制作这样的“正常”渐变时，我一直在尝试不同的形状：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#E9E9E9" android:endColor="#D4D4D4"
        android:angle="270"/>
</shape>

当使用“椭圆”形状时，我至少得到了一个圆形，但没有渐变效果。我怎样才能做到这一点？'

【参考方案1】：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle">

    <gradient
        android:endColor="@color/color1"
        android:gradientRadius="250dp"
        android:startColor="#8F15DA"
        android:type="radial" />

    <corners
        android:bottomLeftRadius="50dp"
        android:bottomRightRadius="50dp"
        android:radius="3dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="50dp" />
</shape>

【参考方案2】：

您可以使用android:type="radial" 获得圆形渐变：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:type="radial" android:gradientRadius="250dp"
        android:startColor="#E9E9E9" android:endColor="#D4D4D4" />
</shape>

【讨论】：

它不仅有效，还解决了世界饥饿问题！谢谢！

旁注：也可以在颜色中使用透明度字节。 #ff00ff00 到 #7f0000ff 将从完全不透明的红色变为半透明的蓝色。

android:gradientRadius="250" 将被忽略。您应该指向具有 px 或 dp 值的维度资源，例如：android:gradientRadius="@dimen/gradient_radius"

感谢 Bolling，你说得对，android:gradientRadius="250" 根本不起作用，我猜它在旧版 Android 上的表现有所不同。

【参考方案3】：

<!-- Drop Shadow Stack -->
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#00CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#10CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#20CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#30CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#50CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>

<!-- Background -->
<item>
    <shape android:shape="oval">
        <gradient
            android:startColor="@color/colorAccent_1"
            android:centerColor="@color/colorAccent_2"
            android:endColor="@color/colorAccent_3"
            android:angle="45"
            />
        <corners android:radius="3dp" />
    </shape>
</item>

<color name="colorAccent_1">#6f64d6</color>
<color name="colorAccent_2">#7668F8</color>
<color name="colorAccent_3">#6F63FF</color>

【参考方案4】：

这是带有渐变、描边和圆形的完整 xml。

<?xml version="1.0" encoding="utf-8"?>

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

    <!-- You can use gradient with below attributes-->
    <gradient
        android:angle="90"
        android:centerColor="#555994"
        android:endColor="#b5b6d2"
        android:startColor="#555994"
        android:type="linear" />

    <!-- You can omit below tag if you don't need stroke -->
   <stroke android:color="#3b91d7" android:/>

    <!-- Set the same value for both width and height to get a circular shape -->
    <size android: android:/>


    <!--if you need only a single color filled shape-->
    <solid android:color="#e42828"/>


</shape>

【讨论】：

很好的例子。谢谢。

【参考方案5】：

我总是发现图像在学习新概念时很有帮助，所以这是一个补充答案。

%p 表示父级的百分比，即我们设置可绘制对象的任何视图的最窄尺寸的百分比。上面的图片是通过更改此代码中的gradientRadius 生成的

my_gradient_drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="radial"
        android:gradientRadius="10%p"
        android:startColor="#f6ee19"
        android:endColor="#115ede" />
</shape>

可以像这样在视图的background 属性上设置

<View
    android:layout_
    android:layout_
    android:background="@drawable/my_gradient_drawable"/>

居中

你可以用

改变半径的中心

android:centerX="0.2"
android:centerY="0.7"

其中小数分别是x 和y 的宽度和高度的分数。

文档

这里有一些来自documentation 的注释，对事情进行了更多解释。

android:gradientRadius

渐变的半径，仅用于径向渐变。可能是一个 显式尺寸或相对于形状的小数值 最小尺寸。

可能是浮点值，例如“1.2”。

可能是维度值，是附加的浮点数 带有诸如“14.5sp”之类的单位。可用单位有：px（像素）、dp （与密度无关的像素），sp（基于首选的缩放像素 字体大小）、in（英寸）和 mm（毫米）。

可能是一个小数值，它是一个附加的浮点数 使用 % 或 %p，例如“14.5%”。 % 后缀总是意味着 基本尺寸的百分比；可选的 %p 后缀提供大小 相对于某个父容器。

【讨论】：

在 kikat 类型中，当您从渐变半径中删除 %p 时，radial 将起作用对于 Kikat android:gradientRadius="10"

在 API 21 中，您确实需要 android:gradientRadius="10%p"（使用 p），否则会出现异常。也可以设置android:centerX="20%"。

@CoolMind，您介意编辑答案并更新它以反映这些变化吗？我现在用 Flutter 做的更多，所以我一直没有更新我的 Android 答案。

@Suragch，感谢您的详细回答！我只想说你做得很好。并非每个作者都可以添加所有这些属性并描述它们的含义。

【参考方案6】：

如果您需要更多控制（例如多种颜色和定位），您也可以在代码中执行此操作。这是我的 Kotlin sn-p 创建可绘制径向渐变：

object ShaderUtils 
    private class RadialShaderFactory(private val colors: IntArray, val positionX: Float,
                                      val positionY: Float, val size: Float): ShapeDrawable.ShaderFactory() 

        override fun resize(width: Int, height: Int): Shader 
            return RadialGradient(
                    width * positionX,
                    height * positionY,
                    minOf(width, height) * size,
                    colors,
                    null,
                    Shader.TileMode.CLAMP)
        
    

    fun radialGradientBackground(vararg colors: Int, positionX: Float = 0.5f, positionY: Float = 0.5f,
                                 size: Float = 1.0f): PaintDrawable 
        val radialGradientBackground = PaintDrawable()
        radialGradientBackground.shape = RectShape()
        radialGradientBackground.shaderFactory = RadialShaderFactory(colors, positionX, positionY, size)
        return radialGradientBackground
    

基本用法（但可以随意调整其他参数）：

view.background = ShaderUtils.radialGradientBackground(Color.TRANSPARENT, BLACK)

【参考方案7】：

<gradient
    android:centerColor="#c1c1c1"
    android:endColor="#4f4f4f"
    android:gradientRadius="400"
    android:startColor="#c1c1c1"
    android:type="radial" >
</gradient>

【参考方案8】：

我猜你应该添加 android:centerColor

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
  android:startColor="#FFFFFF"
  android:centerColor="#000000"
  android:endColor="#FFFFFF"
  android:angle="0" />
</shape>

此示例显示从白色到黑色再到白色的水平渐变。

【讨论】：

这个答案应该被标记为解决方案。不管你想做一个径向渐变，做一个水平的！