首页 文章

android中的循环渐变

提问于
浏览
87

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

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

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

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

7 回答

  • 2

    您可以使用 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

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

    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(基于首选字体大小的缩放像素),in(英寸)和mm(毫米) . 可以是小数值,它是附加%或%p的浮点数,例如“14.5%” . %后缀总是表示基本大小的百分比;可选的%p后缀提供相对于某个父容器的大小 .

  • 59

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

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

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

    这是完整的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>
    
  • 202
    <!-- 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>
    

相关问题