注册

Android原生绘图进度条+简单自定义属性代码生成器

先一下效果：

圆形进度条.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)调用

 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.自定义属性的书写

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






















2.初始代码：将进行一些常规处理

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.测量：

    @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.绘制：

    @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()

/**

 * 对数值进行计算以及控制的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()

/**

 * 当结束是执行：

 */
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()

/**

 * 绘制左侧：(进度条)

 *

 * @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()

/**

 * 绘制左侧：(背景)

 *

 * @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里使用：

三、圆形进度条
1.自定义属性





2.代码实现：

/**

 * 作者：张风捷特烈


 * 时间：2018/11/9 0009:11:49


 * 邮箱：1981462002@qq.com


 * 说明：圆形进度条

 */
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();

    }

}



附录：简单自定义属性生成器

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 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 + ");\r\n");

        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 + ");\r\n");

            }
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 + ");\r\n");

            }
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 + ");\r\n");

            }
if (s2.equals("string")) {
// mPbTxtColor = a.getColor(R.styleable.TolyProgressBar_z_pb_txt_color, mPbTxtColor);

                sb.append("m" + s + " =  a.getString(R.styleable." + styleableName + ");\r\n");

            }

        });

        sb.append("a.recycle();\r\n");

        System.out.println(result);

        System.out.println(sb.toString());

    }

/**

     * 读取文件+解析

     *

     * @param preFix 前缀

     * @param file   文件路径

     */
public static HashMap format(String preFix, File file) {

        HashMap 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(""));

            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 + ";\r\n");

                    }

                    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;

    }

},>,>,>

代码下载:bobing107-IPhoneWatch_progressbar-master.zip

0
分享
2021-06-11

0 个评论

要回复文章请先登录或注册

一个开放、互助、协作、创意的社区

关于imGeek
关于专职工程师值守
社区财富榜
赞助商
友情链接
热门标签
京ICP备2023000793号