代码之家  ›  专栏  ›  技术社区  ›  pgsandstrom

android中的圆形渐变

  •  87
  • pgsandstrom  · 技术社区  · 15 年前

    我试着做一个渐变,从屏幕中间发出白色,当它向屏幕边缘移动时变成黑色。

    当我做这样的“正常”渐变时,我一直在尝试不同的形状:

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

    当使用“椭圆形”形状时,我至少得到了一个圆形,但没有梯度效应。我怎样才能做到这一点?”

    6 回复  |  直到 6 年前
        1
  •  199
  •   Dan Lew    15 年前

    你可以用 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>
    
        2
  •  57
  •   Suragch Shmidt    7 年前

    当我学习一个新概念的时候,我总是觉得图片很有帮助,所以这是一个补充的答案。

    enter image description here

    这个 %p 意思是父母的一个百分比,也就是说,在我们设定的任何视图中,最窄维度的一个百分比。上面的图像是通过改变 gradientRadius 在本代码中

    我的梯度图

    <?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 分别是。

    enter image description here

    文档

    以下是 documentation 再解释一点。

    android:gradientRadius

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

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

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

    可以是小数,它是附加的浮点数 使用%或%p,例如“14.5%”。%后缀始终表示 基本大小的百分比;可选的%p后缀提供大小 相对于某个父容器。

        3
  •  2
  •   Gasper    7 年前

    如果需要更多的控制,例如多个颜色和位置,也可以在代码中执行此操作。这是我的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)
    
        4
  •  1
  •   dhesse    15 年前

    我想你应该加上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>
    

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

        5
  •  1
  •   Nazmul    8 年前

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

        6
  •  1
  •   Shihab Uddin    6 年前

    这是完整的带有渐变、stoke&circular形状的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>