渐变色的使用
需求：
- FM中未插入耳机界面使用渐变色的背景，状态栏保持一致(全屏效果)
渐变色的绘制
使用xml中的shape属性进行绘制
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#4954e4"
android:endColor="#13a9f8"
android:angle="270"/>
</shape>
其中的angle为方向，270为从上到下，180是从右向左
startcolor是起始的颜色值
endcolor为最终的颜色值
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle">
<gradient android:type="radial"
android:gradientRadius="250"
android:startColor=""
android:endColor=""/>
</shape>
android:type="radial"类型的使用会有不同的效果
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#509245" android:centerColor="#3e8532"
android:endColor="#509245" android:type="linear" android:angle="90"
android:centerX="0.5" android:centerY="0.5" />
<padding android:left="7dp" android:top="7dp" android:right="7dp"
android:bottom="7dp" />
<corners android:radius="4dp" />
</shape>
android:shape配置的是图形的形式，主要包括方形、圆形等。
- gradient节点主要配置起点颜色和终点颜色、中间点的坐标及颜色，渐变角度(90°为上下渐变，0为左右渐变)
与标签相互排斥
- android:angle——渐变的角度，默认为0，其值必须为45的倍数，0表示从左到右，90表示从下到上，具体的效果需要自行体验，总之角度会影响渐变的方向；
- android:centerX——渐变的中心点的横坐标；
- android:centerY——渐变的中心点的纵坐标，渐变的中心点会影响渐变的具体效果；
- android:startColor——渐变的起始色；
- android:centerColor——渐变的中间色；
- android:endColo——渐变的结束色；
- android:gradientRadius——渐变半径，仅当android:type= "radial"时有效；
- android:useLevel——一般为false，当Drawable作为StateListDrawable使用时为true；
- android:type——渐变的类别，有linear（线性渐变）、radial（径向渐变）、sweep（扫描线渐变）三种，其中默认值为线性渐变。
- padding节点主要配置上下左右边距。
- corner节点配置四周圆角的半径。
实例
用相对布局 或者帧布局包括 图片在下 蒙版在上
<ImageView
android:id="@+id/ivHeaderPhoto"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="@mipmap/test" />
<ImageView
android:id="@+id/ivHeaderPhoto2"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="@drawable/shape_01" />
java代码上的使用
android.graphics包中提供了有关Gradient类，包含LinearGradient线性渐变、RadialGradient径向渐变、SweepGradient梯度渐变，三者军继承于android.graphics.Shader
- LinearGradient线性渐变
/** Create a shader that draws a linear gradient along a line.
@param x0 The x-coordinate for the start of the gradient line
@param y0 The y-coordinate for the start of the gradient line
@param x1 The x-coordinate for the end of the gradient line
@param y1 The y-coordinate for the end of the gradient line
@param colors The colors to be distributed along the gradient line
@param positions May be null. The relative positions [0..1] of
each corresponding color in the colors array. If this is null,
the the colors are distributed evenly along the gradient line.
@param tile The Shader tiling mode
*/
public LinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[],
TileMode tile) {
...
}
/** Create a shader that draws a linear gradient along a line.
@param x0 The x-coordinate for the start of the gradient line
@param y0 The y-coordinate for the start of the gradient line
@param x1 The x-coordinate for the end of the gradient line
@param y1 The y-coordinate for the end of the gradient line
@param color0 The color at the start of the gradient line.
@param color1 The color at the end of the gradient line.
@param tile The Shader tiling mode
*/
public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1,
TileMode tile) {
...
}
tile–着色器平铺模式
实例
Paint paint =new Paint();
//两个坐标形成变量，规定了渐变的方向和间距大小，着色器为镜像
LinearGradient linearGradient =new LinearGradient(0,0,200,0, Color.RED,Color.BLUE, Shader.TileMode.MIRROR);
paint.setShader(linearGradient);
paint.setStrokeWidth(50);
canvas.drawLine(0,getMeasuredHeight()/2,getMeasuredWidth(),getMeasuredHeight()/2, paint);
效果图
2. RadialGradient径向渐变
/** Create a shader that draws a radial gradient given the center and radius.
@param centerX The x-coordinate of the center of the radius
@param centerY The y-coordinate of the center of the radius
@param radius Must be positive. The radius of the circle for this gradient.
@param colors The colors to be distributed between the center and edge of the circle
@param stops May be <code>null</code>. Valid values are between <code>0.0f</code> and
<code>1.0f</code>. The relative position of each corresponding color in
the colors array. If <code>null</code>, colors are distributed evenly
between the center and edge of the circle.
@param tileMode The Shader tiling mode
*/
public RadialGradient(float centerX, float centerY, float radius,
@NonNull int colors[], @Nullable float stops[], @NonNull TileMode tileMode) {
...
}
/** Create a shader that draws a radial gradient given the center and radius.
@param centerX The x-coordinate of the center of the radius
@param centerY The y-coordinate of the center of the radius
@param radius Must be positive. The radius of the circle for this gradient
@param centerColor The color at the center of the circle.
@param edgeColor The color at the edge of the circle.
@param tileMode The Shader tiling mode
*/
public RadialGradient(float centerX, float centerY, float radius,
int centerColor, int edgeColor, @NonNull TileMode tileMode) {
...
}
实例
paint =new Paint();
radialGradient =new RadialGradient(240,360,200, new int[]{Color.BLUE, Color.GREEN, Color.RED },null, Shader.TileMode.CLAMP);
paint.setShader(radialGradient);
canvas.drawCircle(240,360,200,paint);
效果图
3. SweepGradient梯度渐变
/**
* A subclass of Shader that draws a sweep gradient around a center point.
*
* @param cx The x-coordinate of the center
* @param cy The y-coordinate of the center
* @param colors The colors to be distributed between around the center.
* There must be at least 2 colors in the array.
* @param positions May be NULL. The relative position of
* each corresponding color in the colors array, beginning
* with 0 and ending with 1.0. If the values are not
* monotonic, the drawing may produce unexpected results.
* If positions is NULL, then the colors are automatically
* spaced evenly.
*/
public SweepGradient(float cx, float cy,
int colors[], float positions[]) {
...
}
/**
* A subclass of Shader that draws a sweep gradient around a center point.
*
* @param cx The x-coordinate of the center
* @param cy The y-coordinate of the center
* @param color0 The color to use at the start of the sweep
* @param color1 The color to use at the end of the sweep
*/
public SweepGradient(float cx, float cy, int color0, int color1) {
...
}
实例
paint =new Paint();
int[] colors = new int[]{Color.GREEN, Color.GREEN, Color.BLUE, Color.RED, Color.RED};
sweepGradient = new SweepGradient(240, 360,colors,null);
paint.setShader(sweepGradient);
canvas.drawCircle(x,y,200,paint);
效果图