android中的循环渐变

时间:2010-03-18 13:24:19

标签: android gradient

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

当我制作像这样的“普通”渐变时,我一直在尝试不同的形状:

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

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

8 个答案:

答案 0 :(得分:209)

您可以使用android:type="radial"获得循环渐变:

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

答案 1 :(得分:64)

在学习新概念时,我总能找到有用的图像,所以这是一个补充答案。

enter image description here

%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"

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

enter image description here

文档

以下是documentation的一些注意事项。

  

android:gradientRadius

     

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

     

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

     

可以是维值,也就是附加的浮点数   有一个单位,如“14.5sp”。可用单位为:px(像素),dp   (与密度无关的像素),sp(基于优选的缩放像素)   字体大小),英寸(mm)和毫米(毫米)。

     

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

答案 2 :(得分:2)

如果您需要更多控制,例如多种颜色和定位,您也可以在代码中执行此操作。这是我的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)

答案 3 :(得分: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>

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

答案 4 :(得分:1)

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

答案 5 :(得分: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>

答案 6 :(得分:0)

with t as (select to_char(num) as txt from tableA where num = 33)
select txt, case when regexp_like(txt, '^-?[[:digit:],.]*$') then 'Numeric' else 'Non-Numeric' end as type
FROM t;

select num bulk collect into my_nums from tableA where num != 33;

答案 7 :(得分:0)

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