关于Android shape gradient背景渐变

通过Shape gradient标签来实现

首先来看gradient标签所有的渐变属性:

<gradient
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />

attributes:

  • android:angle Integer,代表渐变颜色的角度, 0 is left to right, 90 is bottom to top. 必须是45的整数倍. 默认是 0.该属性只有在type=linear情况下起作用,默认的type为linear。
  • android:startColor
Color. 颜色渐变的开始颜色
  • android:endColor
Color. 颜色渐变的结束颜色
  • android:centerColor
Color.  颜色渐变的中间颜色
  • android:centerX
Float.(0 - 1.0) 相对X的渐变位置。
  • android:centerY
Float.(0 - 1.0) 相对Y的渐变位置。 

centerX和centerY,这两个属性只有在type不为linear情况下起作用。

  • android:gradientRadius
Float. 渐变颜色的半径,单位应该是像素点。需要 android:type="radial"。

如果android:type="radial",没有设置android:gradientRadius,将会报错,error inflating class。

  • android:type
linear : 线性渐变
radial:A radial gradient. 放射性渐变(圆形渐变),起始颜色从cenralX,centralY点开始。
sweep:A sweeping line gradient. 扫描式渐变(扇形渐变)。
  • android:useLevel
使用LevelListDrawable时就要设置为true,设为false时才有渐变效果。

gradient的属性介绍完毕,下面看一下各种渐变的效果。

渐变的效果:

线性渐变的xml代码:

<gradient
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:startColor="#ff0000"
        android:type="linear"/>

放射性渐变xml代码:

<gradient
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:gradientRadius="100"
        android:startColor="#ff0000"
        android:type="radial"/>

扫描式渐变xml代码:

<gradient
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:startColor="#ff0000"
        android:type="sweep"/>

三种渐变效果,如图所示:

三种渐变效果

通过GradientDrawable来实现

了解GradientDrawable类

查看文档的时候,先找到ShapeDrawable类,发现xml属性只有几个,如图所示: ShapeDrawable Xml属性

和shape的xml属性对应不上,随后又找到GradientDrawable类,发现许多shape在xml中熟悉的属性,如图所示: GradientDrawable xml属性

在源码中找到:

setStroke(int width, @ColorInt int color)
setStroke(int width, ColorStateList colorStateList)
setStroke(int width, @ColorInt int color, float dashWidth, float dashGap)
setStroke(int width, ColorStateList colorStateList, float dashWidth, float dashGap)

对应的是shape xml里面的stroke标签。这里由于只是了解颜色渐变相关,所以仅仅对相关的方法做分析。

下面来看GradientDrawable颜色渐变相关的方法

setGradientType(@GradientType int gradient)

setGradientType对应gradient标签android:type属性,对应的值有:LINEAR_GRADIENT,RADIAL_GRADIENT,SWEEP_GRADIENT;分别是:线性渐变,放射性渐变,扫描式渐变。

setColor(@ColorInt int argb)
setColors(@ColorInt int[] colors)
setColor(@Nullable ColorStateList colorStateList)

setColors设置渐变的颜色,包含一种,至少两种颜色等。对应gradient标签android:startColor、android:centerColor和android:endColor;但是java方法好像更加灵活,可以放多于三种颜色。

setOrientation(Orientation orientation)

setOrientation设置线性渐变的方向。对应gradient标签android:angle,可以取的值有:

/**
 * 控制渐变相对于可绘制边界的方向
 */
public enum Orientation {
    /**
     * 从顶部到底部绘制渐变
     */
    TOP_BOTTOM,
    /**
     * 绘制从右上角到左下角的渐变
     */
    TR_BL,
    /**
     * 从右到左绘制渐变
     */
    RIGHT_LEFT,
    /**
     * 从右下角到左上角绘制渐变
     */
    BR_TL,
    /**
     * 从底部到顶部绘制渐变
     */
    BOTTOM_TOP,
    /**
     * 从左下角到右上角绘制渐变
     */
    BL_TR,
    /**
     * 从左到右绘制渐变
     */
    LEFT_RIGHT,
    /**
     * 绘制从左上角到右下角的渐变
     */
    TL_BR,
}
setGradientRadius(float gradientRadius)

setGradientRadius设置渐变的半径。,只有当渐变类型设置为{RADIAL_GRADIENT}时,半径才有效。对应gradient标签android:gradientRadius。

Java代码中设置渐变效果

线性渐变的xml代码:

int[] colors = new int[]{Color.parseColor("#FF0000"), Color.parseColor("#00FF00"),
                Color.parseColor("#0000FF")};
GradientDrawable linearDrawable = new GradientDrawable();
linearDrawable.setOrientation(GradientDrawable.Orientation.LEFT_RIGHT);
linearDrawable.setColors(colors);
linearDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
mGradient1.setBackground(linearDrawable);

放射性渐变xml代码:

GradientDrawable radialDrawable = new GradientDrawable();
radialDrawable.setColors(colors);
radialDrawable.setShape(GradientDrawable.OVAL);
radialDrawable.setGradientRadius(10f);
radialDrawable.setGradientType(GradientDrawable.RADIAL_GRADIENT);
mGradient2.setBackground(radialDrawable);

扫描式渐变xml代码:

GradientDrawable sweepDrawable = new GradientDrawable();
sweepDrawable.setColors(colors);
sweepDrawable.setGradientType(GradientDrawable.SWEEP_GRADIENT);
mGradient3.setBackground(sweepDrawable);

java代码设置的三种渐变效果,如图所示: 三种渐变效果

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值