【问题标题】:Circular gradient in androidandroid中的圆形渐变
【发布时间】:2011-01-29 00:42:55
【问题描述】:

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

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

<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


    【解决方案1】:
    <?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>
    

    【讨论】:

      【解决方案2】:

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

      【讨论】:

      • 它不仅有效,还解决了世界饥饿问题!谢谢!
      • 旁注:也可以在颜色中使用透明度字节。 #ff00ff00 到 #7f0000ff 将从完全不透明的红色变为半透明的蓝色。
      • android:gradientRadius="250" 将被忽略。您应该指向具有 px 或 dp 值的维度资源,例如:android:gradientRadius="@dimen/gradient_radius"
      • 感谢 Bolling,你说得对,android:gradientRadius="250" 根本不起作用,我猜它在旧版 Android 上的表现有所不同。
      【解决方案3】:

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

      【讨论】:

        【解决方案4】:

        这是带有渐变、描边和圆形的完整 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>
        

        【讨论】:

        • 很好的例子。谢谢。
        【解决方案5】:

        我总是发现图像在学习新概念时很有帮助,所以这是一个补充答案。

        %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 的宽度和高度的分数。

        文档

        这里有一些来自documentation 的注释,对事情进行了更多解释。

        android:gradientRadius

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

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

        可能是维度值,是附加的浮点数 带有诸如“14.5sp”之类的单位。可用单位有:px(像素)、dp (与密度无关的像素),sp(基于首选的缩放像素 字体大小)、in(英寸)和 mm(毫米)。

        可能是一个小数值,它是一个附加的浮点数 使用 % 或 %p,例如“14.5%”。 % 后缀总是意味着 基本尺寸的百分比;可选的 %p 后缀提供大小 相对于某个父容器。

        【讨论】:

        • 在 kikat 类型中,当您从渐变半径中删除 %p 时,radial 将起作用对于 Kikat android:gradientRadius="10"
        • 在 API 21 中,您确实需要 android:gradientRadius="10%p"(使用 p),否则会出现异常。也可以设置android:centerX="20%"
        • @CoolMind,您介意编辑答案并更新它以反映这些变化吗?我现在用 Flutter 做的更多,所以我一直没有更新我的 Android 答案。
        • @Suragch,感谢您的详细回答!我只想说你做得很好。并非每个作者都可以添加所有这些属性并描述它们的含义。
        【解决方案6】:

        如果您需要更多控制(例如多种颜色和定位),您也可以在代码中执行此操作。这是我的 Kotlin sn-p 创建可绘制径向渐变:

        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)
        

        【讨论】:

          【解决方案7】:

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

          【讨论】:

            【解决方案8】:

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

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

            【讨论】:

            • 这个答案应该被标记为解决方案。不管你想做一个径向渐变,做一个水平的!
            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2010-12-26
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多