机器人中的圆形梯度

小开

我想您应该添加 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>

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

小开

最佳答案

You can get a circular gradient using 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>

小开

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

小开

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

The %p means a percentage of the parent, that is, a percentage of the narrowest dimension of whatever view we set our drawable on. The images above were generated by changing the gradientRadius in this code

我的渐变绘画

<?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

渐变的半径，仅与径向渐变一起使用显式尺寸或相对于形状的分数值最小尺寸最小尺寸。

May be a floating point value, such as "1.2".

可以是一个维度值，它是附加的浮点数可用的单位是: px (像素) ，dp (密度无关像素) ，sp (缩放像素基于首选字体大小) ，英寸，毫米(毫米)。

可以是小数值，它是附加的浮点数例如“14.5%”。% 后缀总是表示一个基大小的百分比; 可选的% p 后缀提供一个大小相对于某个父容器。

小开

如果需要更多的控制，例如多种颜色和定位，也可以用代码来实现。下面是我的 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
}
}

Basic usage (but feel free to adjust with additional params):

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

小开

这里是完整的 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>

小开

<!-- 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>

小开

<?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>