介绍
今天就跟大家聊聊有关怎么在Android中通过自定义观点实现渐变色进度条,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<>强效果分解:
1。渐变色,看起来颜色变化并不复杂,使用LinearGradient应该可以实现。
2。圆头,无非是画两个圆,外圆使用渐变色的颜色,内圆固定为白色。
3。灰底,还没有走到的进度部分为灰色。
4。进度值,使用文本来显示,
5。弧形的头部,考虑使用直线进行连接,或者使用曲线,例如贝塞尔曲线;
我首先初步实现了进度条的模样,发现样子有了,却不太美观。
反思了一下,我只是个写代码的,对于哪种比例比较美观,是没有清晰的认识的,所以,还是参考原图吧。
<>强然后就进行了精细的测量:
将图像放大4倍,进行测量,然后获取到各部分的比例关系,具体过程就不细说了,说一下测量结果(按比例的):
视图总长300年,其中前面留空5,进度长258年,然后再留空5,显示文本占26岁后面留空6;
高度分为4个:
外圆:10
字高:9
内圆:6
线粗:5
考虑上下各留10空,则视图的高度为30。
考虑到视图整体的效果,可以由用户来设置长度值与高度值,按比例取最小值来进行绘图。
首先计算出一个单位的实际像素数,各部分按比例来显示即可。
还有一个弧形的头部,是怎么实现的呢?
在放大之后,能看出来图形比较简单,看不出有弧度,那么,使用一小段直线连接就可以了。
估算这小段直线:线粗为2,呈30度角,长为8 - 10即可,连接直线与弧顶,起点在弧顶之左下方。
注意:在进度的起点时,不能画出。避免出现一个很突兀的小尾巴。在2%进度之后,才开始画。
在文字的绘制过程中,遇到一个小问题,就是文字不居中,略微偏下,上网查了下,原因是这样的:我们绘制文本时,使用的这个函数:画布。drawText (“30%”, x, y,油漆);y
其中的参数是指字符串基线的的位置,不是文本的中心。通过计算可以调整为居中,如下:
//计算坐标使文字居中
FontMetrics FontMetrics =, mPaint.getFontMetrics (),,
float fontHeight =, fontMetrics.bottom 作用;fontMetrics.top;
float baseY =,高度/2,+,fontHeight/2,安康;fontMetrics.bottom; 按比例来绘制之后,就确实是原来那个修长优雅的感觉了。
实际运行后,发现字体偏小,不太适合竖屏观看,调大了些。
另外对于参数,做了如下几个自定义属性:
前景色:开始颜色,结束颜色。
进度条未走到时的默认颜色,
字体颜色。
属性xml如下:
& lt; ? xml version=?.0“,编码=皍tf-8" ?比;
& lt; resources>
,& lt; attr name=皊tartColor",格式=癱olor",/比;
,& lt; attr name=癳ndColor",格式=癱olor",/比;
,& lt; attr name=癰ackgroundColor",格式=癱olor",/比;
,& lt; attr name=皌extColor",格式=癱olor",/比;
,& lt; declare-styleable name=癎oodProgressView"比;
,& lt; attr name=皊tartColor",/比;
,& lt; attr name=癳ndColor",/比;
,& lt; attr name=癰ackgroundColor",/比;
,& lt; attr name=皌extColor",/祝辞,
,& lt;/declare-styleable>
& lt;/resources> 自定义视图文件:
package com.customview.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.Paint.Cap;
import android.graphics.Paint.FontMetrics;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import com.customview.R;
public class GoodProgressView extends 视图
{
,private int [], mColors =, {, Color.RED, Color.MAGENTA},//进度条颜色(渐变色的2个点)
,private int backgroundColor =, Color.GRAY;//进度条默认颜色
,private int textColor =, Color.GRAY;//文本颜色
,private Paint mPaint;//画笔
,private int progressValue=https://www.yisu.com/zixun/0;//进度值//私人RectF矩形;//绘制范围
公共GoodProgressView(上下文语境,AttributeSet attrs)
{
这(上下文、attrs 0);
}
公共GoodProgressView(上下文语境)
{
这(上下文,null);
}//获得我自定义的样式属性
公共GoodProgressView(上下文语境、AttributeSet attrs int defStyle)
{
超级(上下文、attrs defStyle);//获得我们所定义的自定义样式属性
TypedArray a=context.getTheme ()。obtainStyledAttributes (attrs R.styleable。GoodProgressView defStyle 0);
int n=a.getIndexCount ();
for (int i=0;我
