Android中的圆形渐变

109

我正在尝试使渐变从屏幕中间以白色发出，并随着其向屏幕边缘移动而变为黑色。

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

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

使用“卵形”形状时，我至少具有圆形形状，但没有渐变效果。我该如何实现？”

android  gradient 
— pgsandstrom
source

Answers:

241

您可以使用来获得圆形渐变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>
— 丹·刘
source
108
它不仅有效，而且解决了世界饥饿问题！谢谢！
— pgsandstrom，2010年
2
旁注：也可以在颜色中使用透明度字节。＃ff00ff00至＃7f0000ff将从完全不透明的红色逐渐变为半透明的蓝色。
— 西蒙·福斯伯格
10
android：gradientRadius =“ 250”将被忽略。您应该指向具有px或dp值的dimen资源，例如：android：gradientRadius =“ @ dimen / gradient_radius”
— Bolling 2015年
2
感谢Bolling，您说对了android：gradientRadius =“ 250”根本无法工作，我猜它在较旧的Android版本上的表现有所不同。
— 贾斯汀
112

在学习新概念时，我总是觉得图片很有用，所以这是一个补充性的答案。

在此处输入图片说明

该%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_width="200dp"
    android:layout_height="100dp"
    android:background="@drawable/my_gradient_drawable"/>

中央

您可以使用以下方式更改半径的中心 

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

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

在此处输入图片说明

文献资料

以下是文档中的一些注释，对内容进行了进一步解释。

android:gradientRadius

渐变半径，仅与径向渐变一起使用。可以是明确的尺寸，也可以是相对于形状最小尺寸的分数。

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

可以是尺寸值，它是一个浮点数，后跟一个单位，例如“ 14.5sp”。可用的单位是：px（像素），dp（与密度无关的像素），sp（基于首选字体大小的缩放像素），英寸（英寸）和mm（毫米）。

可以是分数值，它是一个附加有％或％p的浮点数，例如“ 14.5％”。后缀％始终表示基本大小的百分比；可选的％p后缀提供相对于某些父容器的大小。

— 苏拉奇
source
当您从渐变半径中删除％p时，在kikat类型中使用radial将起作用对于Kikat android：gradientRadius =“ 10”
— mehmoodnisar125 '18
1
@ mehmoodnisar125，我在文档中添加了一条注释，说明了包含%或不包含之间的区别。
— Suragch '18
4

如果需要更多控制，例如多种颜色和位置，也可以在代码中进行操作。这是我的Kotlin代码段，用于创建可绘制的径向渐变：

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)
— 加斯珀·科伦茨
source
1

我猜你应该添加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>

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

— 女神
source
13
该答案应标记为解决方案。无论您要制作径向渐变，都要做一个水平渐变！
— erdomester
1 

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

— 纳兹穆尔
source
1

这是具有渐变，笔画和圆形形状的完整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:width="5dp"/>

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


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


</shape>
— 希哈卜·乌丁
source
好的例子。谢谢。
— Sinan Ceylan '18
-1 

<!-- 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>
— 希拉格·拉米
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.