零、前言
1.感觉切拼字符串是个很有意思的事，好的拼接方式可以自动生成一些很实用的东西 2.本文自定义控件并不是很高大上的东西，目的在于计录自定义控件的书写规范与行文流程 3.建议大家自定义控件时自定义属性有自己专属前缀，有利无害,何乐不为 4.本文是根据鸿洋在慕课网上的教程敲的：详见，自己修改并优化了一点逻辑和显示效果
先看一下效果：
圆形进度条.gif
横向进度条.gif
一、简单自定义属性生成器
1.玩安卓的应该都写过自定义控件的自定义属性：如下
自定义控件.png
我写着写着感觉好枯燥，基本上流程相似,也没有什么技术难度，想：这种事不就应该交给机器吗?
2.通过attrs.xml自动生成相应代码
秉承着
能用代码解决的问题，绝对不动手。能够靠智商解决的问题，绝对不靠体力的大无畏精神： 写了一个小工具,将代码里的内容自动生成一下：基本上就是字符串的切割和拼装，工具附在文尾使用方法与注意点： 1.拷贝到AndroidStudio的test里,将attrs.xml的文件路径设置一下，运行 2.自定义必须符合命名规则,如
z_pb_on_height,专属前缀如z_，单词间下划线连接即可 3.它并不是什么高大上的东西，只是简单的字符串切割拼组，只适用简单的自定义属性[dimension|color|boolean|string](不过一般的自定义属性也够用了)
自动生成.png
在开篇之前:先看一下Android系统内自定义控件的书写风格,毕竟跟原生看齐没有什么坏处 看一下LinearLayout的源码：
1.构造方法使用最多参数的那个，其他用this(XXX)调用
代码语言：javascript复制 public LinearLayout(Context context) {
this(context, null);
}
public LinearLayout(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public LinearLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr, 0);
}
public LinearLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
...
}2.自定义属性的书写
代码语言：javascript复制1).先将自定义属性的成员变量定义好 2).如果自定义属性不是很多，一个一个a.getXXX,默认值直接写在后面就行了 3).看了一下TextView的源码，自定义属性很多，它是先定义默认值的变量，再使用，而且用switch来对a.getXXX进行赋值
final TypedArray a = context.obtainStyledAttributes(
attrs, com.android.internal.R.styleable.LinearLayout, defStyleAttr, defStyleRes);
int index = a.getInt(com.android.internal.R.styleable.LinearLayout_orientation, -1);
if (index >= 0) {
setOrientation(index);
}
index = a.getInt(com.android.internal.R.styleable.LinearLayout_gravity, -1);
if (index >= 0) {
setGravity(index);
}
boolean baselineAligned = a.getBoolean(R.styleable.LinearLayout_baselineAligned, true);
if (!baselineAligned) {
setBaselineAligned(baselineAligned);
}
......
a.recycle();一、水平的进度条
条形进度条分析.png
1.自定义控件属性：values/attrs.xml
代码语言：javascript复制 <!--自定义进度条-->
<declare-styleable name="TolyProgressBar">
<!--进度条相关-->
<!--背景色-->
<attr name="z_pb_bg_color" format="color"/>
<!--背景高-->
<attr name="z_pb_bg_height" format="dimension"/>
<!--进度色-->
<attr name="z_pb_on_color" format="color"/>
<!--进度高-->
<attr name="z_pb_on_height" format="dimension"/>
<!--文本相关-->
<!--文字颜色-->
<attr name="z_pb_txt_color" format="color"/>
<!--文字大小-->
<attr name="z_pb_txt_size" format="dimension"/>
<!--文字两边的空距-->
<attr name="z_pb_txt_offset" format="dimension"/>
<!--文字是否消失-->
<attr name="z_pb_txt_gone" format="boolean"/>
</declare-styleable>2.初始代码：将进行一些常规处理
代码语言：javascript复制public class TolyProgressBar extends ProgressBar {
private Paint mPaint;
private int mPBWidth;
private RectF mRectF;
private Path mPath;
private float[] mFloat8Left;//左边圆角数组
private float[] mFloat8Right;//右边圆角数组
private float mProgressX;//进度理论值
private float mEndX;//进度条尾部
private int mTextWidth;//文字宽度
private boolean mLostRight;//是否不画右边
private String mText;//文字
private int mPbBgColor = 0xffC9C9C9;
private int mPbOnColor = 0xff54F340;
private int mPbOnHeight = dp(6);
private int mPbBgHeight = dp(6);
private int mPbTxtColor = 0xff525252;
private int mPbTxtSize = sp(10);
private int mPbTxtOffset = sp(10);
private boolean mPbTxtGone= false;
public TolyProgressBar(Context context) {
this(context, null);
}
public TolyProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TolyProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TolyProgressBar);
mPbOnHeight = (int) a.getDimension(R.styleable.TolyProgressBar_z_pb_on_height, mPbOnHeight);
mPbTxtOffset = (int) a.getDimension(R.styleable.TolyProgressBar_z_pb_txt_offset, mPbTxtOffset);
mPbOnColor = a.getColor(R.styleable.TolyProgressBar_z_pb_on_color, mPbOnColor);
mPbTxtSize = (int) a.getDimension(R.styleable.TolyProgressBar_z_pb_txt_size, mPbTxtSize);
mPbTxtColor = a.getColor(R.styleable.TolyProgressBar_z_pb_txt_color, mPbTxtColor);
mPbBgHeight = (int) a.getDimension(R.styleable.TolyProgressBar_z_pb_bg_height, mPbBgHeight);
mPbBgColor = a.getColor(R.styleable.TolyProgressBar_z_pb_bg_color, mPbBgColor);
mPbTxtGone = a.getBoolean(R.styleable.TolyProgressBar_z_pb_txt_gone, mPbTxtGone);
a.recycle();
init();
}
private void init() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setTextSize(mPbTxtSize);
mPaint.setColor(mPbOnColor);
mPaint.setStrokeWidth(mPbOnHeight);
mRectF = new RectF();
mPath = new Path();
mFloat8Left = new float[]{//仅左边两个圆角--为背景
mPbOnHeight / 2, mPbOnHeight / 2,//左上圆角x,y
0, 0,//右上圆角x,y
0, 0,//右下圆角x,y
mPbOnHeight / 2, mPbOnHeight / 2//左下圆角x,y
};
mFloat8Right = new float[]{
0, 0,//左上圆角x,y
mPbBgHeight / 2, mPbBgHeight / 2,//右上圆角x,y
mPbBgHeight / 2, mPbBgHeight / 2,//右下圆角x,y
0, 0//左下圆角x,y
};
}
}
private int sp(int sp) {
return (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, sp, getResources().getDisplayMetrics());
}
private int dp(int dp) {
return (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
}2.测量：
代码语言：javascript复制 @Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = measureHeight(heightMeasureSpec);
setMeasuredDimension(width, height);
mPBWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();//进度条实际宽度
} /**
* 测量高度
*
* @param heightMeasureSpec
* @return
*/
private int measureHeight(int heightMeasureSpec) {
int result = 0;
int mode = MeasureSpec.getMode(heightMeasureSpec);
int size = MeasureSpec.getSize(heightMeasureSpec);
if (mode == MeasureSpec.EXACTLY) {
//控件尺寸已经确定：如：
// android:layout_height="40dp"或"match_parent"
result = size;
} else {
int textHeight = (int) (mPaint.descent() - mPaint.ascent());
result = getPaddingTop() getPaddingBottom() Math.max(
Math.max(mPbBgHeight, mPbOnHeight), Math.abs(textHeight));
if (mode == MeasureSpec.AT_MOST) {//最多不超过
result = Math.min(result, size);
}
}
return result;
}3.绘制：
代码语言：javascript复制 @Override
protected synchronized void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.translate(getPaddingLeft(), getHeight() / 2);
parseBeforeDraw();//1.绘制前对数值进行计算以及控制的flag设置
if (getProgress() == 100) {//进度达到100后文字消失
whenOver();//2.
}
if (mEndX > 0) {//当进度条尾部>0绘制
drawProgress(canvas);//3.
}
if (!mPbTxtGone) {//绘制文字
mPaint.setColor(mPbTxtColor);
int y = (int) (-(mPaint.descent() mPaint.ascent()) / 2);
canvas.drawText(mText, mProgressX, y, mPaint);
} else {
mTextWidth = 0 - mPbTxtOffset;
}
if (!mLostRight) {//绘制右侧
drawRight(canvas);/4.
}
canvas.restore();
}1).praseBeforeDraw()
代码语言：javascript复制/**
* 对数值进行计算以及控制的flag设置
*/
private void parseBeforeDraw() {
mLostRight = false;//lostRight控制是否绘制右侧
float radio = getProgress() * 1.f / getMax();//当前百分比率
mProgressX = radio * mPBWidth;//进度条当前长度
mEndX = mProgressX - mPbTxtOffset / 2; //进度条当前长度-文字间隔的左半
mText = getProgress() "%";
if (mProgressX mTextWidth > mPBWidth) {
mProgressX = mPBWidth - mTextWidth;
mLostRight = true;
}
//文字宽度
mTextWidth = (int) mPaint.measureText(mText);
}2).whenOver()
代码语言：javascript复制/**
* 当结束是执行：
*/
private void whenOver() {
mPbTxtGone = true;
mFloat8Left = new float[]{//只有进度达到100时让进度圆角是四个
mPbBgHeight / 2, mPbBgHeight / 2,//左上圆角x,y
mPbBgHeight / 2, mPbBgHeight / 2,//右上圆角x,y
mPbBgHeight / 2, mPbBgHeight / 2,//右下圆角x,y
mPbBgHeight / 2, mPbBgHeight / 2//左下圆角x,y
};
}3).drawProgress()
代码语言：javascript复制/**
* 绘制左侧：(进度条)
*
* @param canvas
*/
private void drawProgress(Canvas canvas) {
mPath.reset();
mRectF.set(0, mPbOnHeight / 2, mEndX, -mPbOnHeight / 2);
mPath.addRoundRect(mRectF, mFloat8Left, Path.Direction.CW);//顺时针画
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mPbOnColor);
canvas.drawPath(mPath, mPaint);//使用path绘制一端是圆头的线
}4).drawRight()
代码语言：javascript复制/**
* 绘制左侧：(背景)
*
* @param canvas
*/
private void drawRight(Canvas canvas) {
float start = mProgressX mPbTxtOffset / 2 mTextWidth;
mPaint.setColor(mPbBgColor);
mPaint.setStrokeWidth(mPbBgHeight);
mPath.reset();
mRectF.set(start, mPbBgHeight / 2, mPBWidth, -mPbBgHeight / 2);
mPath.addRoundRect(mRectF, mFloat8Right, Path.Direction.CW);//顺时针画
canvas.drawPath(mPath, mPaint);//使用path绘制一端是圆头的线
}xml里使用：
代码语言：javascript复制<top.toly.reslib.my_design.logic.TolyProgressBar
android:id="@ id/id_toly_pb2"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:progress="20"
app:z_pb_bg_color="@color/red"
app:z_pb_bg_height="10dp"
app:z_pb_on_color="#224ee3"
app:z_pb_on_height="15dp"
app:z_pb_txt_color="@color/rosybrown"
app:z_pb_txt_offset="5dp"
app:z_pb_txt_size="10dp"/>三、圆形进度条
1.自定义属性
代码语言：javascript复制<!--圆形进度条-->
<declare-styleable name="TolyRoundProgressBar">
<!--进度条半径-->
<attr name="z_pb_radius" format="dimension"/>
</declare-styleable>2.代码实现：
代码语言：javascript复制/**
* 作者：张风捷特烈<br/>
* 时间：2018/11/9 0009:11:49<br/>
* 邮箱：1981462002@qq.com<br/>
* 说明：圆形进度条
*/
public class TolyRoundProgressBar extends TolyProgressBar {
private int mPbRadius = dp(30);//进度条半径
private int mMaxPaintWidth;
public TolyRoundProgressBar(Context context) {
this(context, null);
}
public TolyRoundProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TolyRoundProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TolyRoundProgressBar);
mPbRadius = (int) a.getDimension(R.styleable.TolyRoundProgressBar_z_pb_radius, mPbRadius);
mPbOnHeight = (int) (mPbBgHeight * 1.8f);//让进度大一点
a.recycle();
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setDither(true);
}
@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
mMaxPaintWidth = Math.max(mPbBgHeight, mPbOnHeight);
int expect = mPbRadius * 2 mMaxPaintWidth getPaddingLeft() getPaddingRight();
int width = resolveSize(expect, widthMeasureSpec);
int height = resolveSize(expect, heightMeasureSpec);
int realWidth = Math.min(width, height);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPbRadius = (realWidth - getPaddingLeft() - getPaddingRight() - mMaxPaintWidth) / 2;
setMeasuredDimension(realWidth, realWidth);
}
@Override
protected synchronized void onDraw(Canvas canvas) {
String txt = getProgress() "%";
float txtWidth = mPaint.measureText(txt);
float txtHeight = (mPaint.descent() mPaint.ascent()) / 2;
canvas.save();
canvas.translate(getPaddingLeft() mMaxPaintWidth / 2, getPaddingTop() mMaxPaintWidth / 2);
drawDot(canvas);
mPaint.setStyle(Paint.Style.STROKE);
//背景
mPaint.setColor(mPbBgColor);
mPaint.setStrokeWidth(mPbBgHeight);
canvas.drawCircle(mPbRadius, mPbRadius, mPbRadius, mPaint);
//进度条
mPaint.setColor(mPbOnColor);
mPaint.setStrokeWidth(mPbOnHeight);
float sweepAngle = getProgress() * 1.0f / getMax() * 360;//完成角度
canvas.drawArc(
0, 0, mPbRadius * 2, mPbRadius * 2,
-90, sweepAngle, false, mPaint);
//文字
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mPbTxtColor);
canvas.drawText(txt, mPbRadius - txtWidth / 2, mPbRadius - txtHeight / 2, mPaint);
canvas.restore();
}
/**
* 绘制一圈点
*
* @param canvas
*/
private void drawDot(Canvas canvas) {
canvas.save();
int num = 40;
canvas.translate(mPbRadius, mPbRadius);
for (int i = 0; i < num; i ) {
canvas.save();
int deg = 360 / num * i;
canvas.rotate(deg);
mPaint.setStrokeWidth(dp(3));
mPaint.setColor(mPbBgColor);
mPaint.setStrokeCap(Paint.Cap.ROUND);
if (i * (360 / num) < getProgress() * 1.f / getMax() * 360) {
mPaint.setColor(mPbOnColor);
}
canvas.drawLine(0, mPbRadius * 3 / 4, 0, mPbRadius * 4 / 5, mPaint);
canvas.restore();
}
canvas.restore();
}
}后记：捷文规范
1.本文成长记录及勘误表
项目源码 | 日期 | 备注 |
|---|---|---|
V0.1--无 | 2018-11-9 | Android原生绘图进度条 简单自定义属性代码生成器 |
2.更多关于我
笔名 | 微信 | 爱好 | |
|---|---|---|---|
张风捷特烈 | 1981462002 | zdl1994328 | 语言 |
我的github | 我的简书 | 我的CSDN | 个人网站 |
3.声明
1----本文由张风捷特烈原创,转载请注明 2----欢迎广大编程爱好者共同交流 3----个人能力有限，如有不正之处欢迎大家批评指证，必定虚心改正 4----看到这里，我在此感谢你的喜欢与支持
icon_wx_200.png
附录：简单自定义属性生成器
代码语言：javascript复制public class Attrs2Code {
@Test
public void main() {
File file = new File("C:\Users\Administrator\Desktop\attrs.xml");
initAttr("z_", file);
}
public static void initAttr(String preFix, File file) {
HashMap<String, String> format = format(preFix, file);
String className = format.get("className");
String result = format.get("result");
StringBuilder sb = new StringBuilder();
sb.append("TypedArray a = context.obtainStyledAttributes(attrs, R.styleable." className ");rn");
format.forEach((s, s2) -> {
String styleableName = className "_" preFix s;
if (s.contains("_")) {
String[] partStrArray = s.split("_");
s = "";
for (String part : partStrArray) {
String partStr = upAChar(part);
s = partStr;
}
}
if (s2.equals("dimension")) {
// mPbBgHeight = (int) a.getDimension(R.styleable.TolyProgressBar_z_pb_bg_height, mPbBgHeight);
sb.append("m" s " = (int) a.getDimension(R.styleable." styleableName ", m" s ");rn");
}
if (s2.equals("color")) {
// mPbTxtColor = a.getColor(R.styleable.TolyProgressBar_z_pb_txt_color, mPbTxtColor);
sb.append("m" s " = a.getColor(R.styleable." styleableName ", m" s ");rn");
}
if (s2.equals("boolean")) {
// mPbTxtColor = a.getColor(R.styleable.TolyProgressBar_z_pb_txt_color, mPbTxtColor);
sb.append("m" s " = a.getBoolean(R.styleable." styleableName ", m" s ");rn");
}
if (s2.equals("string")) {
// mPbTxtColor = a.getColor(R.styleable.TolyProgressBar_z_pb_txt_color, mPbTxtColor);
sb.append("m" s " = a.getString(R.styleable." styleableName ");rn");
}
});
sb.append("a.recycle();rn");
System.out.println(result);
System.out.println(sb.toString());
}
/**
* 读取文件 解析
*
* @param preFix 前缀
* @param file 文件路径
*/
public static HashMap<String, String> format(String preFix, File file) {
HashMap<String, String> container = new HashMap<>();
if (!file.exists() && file.isDirectory()) {
return null;
}
FileReader fr = null;
try {
fr = new FileReader(file);
//字符数组循环读取
char[] buf = new char[1024];
int len = 0;
StringBuilder sb = new StringBuilder();
while ((len = fr.read(buf)) != -1) {
sb.append(new String(buf, 0, len));
}
String className = sb.toString().split("<declare-styleable name="")[1];
className = className.substring(0, className.indexOf("">"));
container.put("className", className);
String[] split = sb.toString().split("<");
String part1 = "private";
String type = "";//类型
String name = "";
String result = "";
String def = "";//默认值
StringBuilder sb2 = new StringBuilder();
for (String s : split) {
if (s.contains(preFix)) {
result = s.split(preFix)[1];
name = result.substring(0, result.indexOf("""));
type = result.split("format="")[1];
type = type.substring(0, type.indexOf("""));
container.put(name, type);
if (type.contains("color") || type.contains("dimension") || type.contains("integer")) {
type = "int";
def = "0";
}
if (result.contains("fraction")) {
type = "float";
def = "0.f";
}
if (result.contains("string")) {
type = "String";
def = ""toly"";
}
if (result.contains("boolean")) {
type = "boolean";
def = "false";
}
if (name.contains("_")) {
String[] partStrArray = name.split("_");
name = "";
for (String part : partStrArray) {
String partStr = upAChar(part);
name = partStr;
}
sb2.append(part1 " " type " m" name "= " def ";rn");
}
container.put("result", sb2.toString());
}
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (fr != null) {
fr.close();
}
} catch (Exception e) {
e.printStackTrace();
}
}
return container;
}
/**
* 将字符串仅首字母大写
*
* @param str 待处理字符串
* @return 将字符串仅首字母大写
*/
public static String upAChar(String str) {
String a = str.substring(0, 1);
String tail = str.substring(1);
return a.toUpperCase() tail;
}
}
