Android

来源：互联网发布：社交网络强弱关系编辑：程序博客网时间：2024/06/05 15:22

效果图：

这里引用了网络的一个图，实际下面代码是去掉了边框，增加了灰色背景色。

原理：

新建一个画布
先画一个灰色矩形背景
然后根据设置的进度值，画对应进度值的蓝色背景
然后画中间文字值

代码：

布局xml:

<com.xinyan.personal.ui.view.AuthDotArcProgressBar                android:id="@+id/dot_progress"                android:layout_width="300dp"                android:layout_height="300dp"                android:layout_gravity="center_horizontal"/>

自定义布局View代码：

package com.xinyan.personal.ui.view;import android.content.Context;import android.content.res.Resources;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.graphics.RectF;import android.text.TextUtils;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.view.View;import android.view.WindowManager;import com.xinyan.personal.R;/** * Created by zst on 17/7/18. */public class VerticalProgressBar extends View {    private Paint paint;// 画笔    private int progress;// 进度值    private int width;// 宽度值    private int height;// 高度值    public VerticalProgressBar(Context context, AttributeSet attrs,                               int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    public VerticalProgressBar(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public VerticalProgressBar(Context context) {        super(context);        init();    }    private void init() {        paint = new Paint();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        //画布的高度和宽度        width = getMeasuredWidth() - 1;// 得到布局设置的宽度值        height = getMeasuredHeight() - 1;// 得到布局设置的高度值    }    @Override    protected void onDraw(Canvas canvas) {        //画背景        paint.setColor(getResources().getColor(R.color.line_e6e6e6));// 设置背景画笔颜色        canvas.drawRect(0, 0, width, height, paint);// 画背景矩形        //画进度        paint.setColor(getResources().getColor(R.color.line_feae1b));// 设置进度画笔颜色        canvas.drawRect(0, height - progress / 100f * height, width, height, paint);// 画矩形        //画四边        //canvas.drawLine(0, 0, width, 0, paint);// 画顶边        //canvas.drawLine(0, 0, 0, height, paint);// 画左边        //canvas.drawLine(width, 0, width, height, paint);// 画右边        //canvas.drawLine(0, height, width, height, paint);// 画底边        //设置中间字体        //paint.setColor(Color.RED);// 设置画笔颜色为红色        //paint.setTextSize(width / 3);// 设置文字大小        //canvas.drawText(progress + "%",(width - getTextWidth(progress + "%")) / 2, height / 2, paint);// 画文字        super.onDraw(canvas);    }    /**     * 拿到文字宽度     *     * @param str 传进来的字符串     *            return 宽度     */    private int getTextWidth(String str) {        // 计算文字所在矩形，可以得到宽高        Rect rect = new Rect();        paint.getTextBounds(str, 0, str.length(), rect);        return rect.width();    }    /**     * 设置progressbar进度     */    public void setProgress(int progress) {        this.progress = progress;        postInvalidate();    }}

调用代码：

VerticalProgressBar vpProgressBar = (VerticalProgressBar) findViewById(R.id.vp_progress);        new Thread(){            public void run() {                try {                    for (int i= 0;i<=100;i++) {                        Thread.sleep(50);//休息50毫秒                        vpProgressBar.setProgress(i);//更新进度条进度                    }                } catch (InterruptedException e) {                    e.printStackTrace();                }            };        }.start();

DrawRect()参数解析

drawRect(float left, float top, float right, float bottom, Paint paint)
解释：X轴为手机顶部，y轴为手机左边，各个参数的意思就是到这两边的距离（画布的两边）

阅读全文

0 0