自定义View实战五：自定义进度条

最新推荐文章于 2022-10-26 14:44:27 发布
最新推荐文章于 2022-10-26 14:44:27 发布
阅读量262 收藏 1
点赞数 1
分类专栏： Andorid：自定义View
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songzi1228/article/details/90264233
版权

相关视频：

Android-打造炫酷进度条

本文参照以上视频进行编码！

效果图：

一、自定义属性设置：

<!---  自定义进度条  //-->

    <!--属性声明-->
    <attr name="progress_unreach_color" format="color" />
    <attr name="progress_unreach_height" format="dimension" />
    <attr name="progress_reach_color" format="color" />
    <attr name="progress_reach_height" format="dimension" />
    <attr name="progress_text_color" format="color" />
    <attr name="progress_text_size" format="dimension" />
    <attr name="progress_text_offset" format="dimension" />

    <!--属性使用-->
    <declare-styleable name="PhHorizontalProgressBar">
        <attr name="progress_unreach_color" />
        <attr name="progress_unreach_height" />
        <attr name="progress_reach_color" />
        <attr name="progress_reach_height" />
        <attr name="progress_text_color" />
        <attr name="progress_text_size" />
        <attr name="progress_text_offset" />
    </declare-styleable>

    <!--属性使用-->
    <declare-styleable name="PhRoundProgressBar">
        <attr name="radius" format="dimension" />
    </declare-styleable>

    <!---  自定义进度条  //-->

二、自定义View：

PhHorizontalProgressBar.java

public class PhHorizontalProgressBar extends ProgressBar {

    private static final int DEFAULT_TEXT_SIZE = 10;//sp
    private static final int DEFAULT_TEXT_COLOR = 0xFFFC00D1;
    private static final int DEFAULT_COLOR_UNREACH = 0xFFFC00D1;
    private static final int DEFAULT_HEIGHT_UNREACH = 2;//dp
    private static final int DEFAULT_COLOR_REACH = DEFAULT_TEXT_COLOR;
    private static final int DEFAULT_HEIGHT_REACH = 2;//dp
    private static final int DEFAULT_TEXT_OFFSET = 10;//dp

    protected int mTextSize = sp2px(DEFAULT_TEXT_SIZE);
    protected int mTextColor = DEFAULT_TEXT_COLOR;
    protected int mUnreachColor = DEFAULT_COLOR_UNREACH;
    protected int mUnreachHeight = dp2px(DEFAULT_HEIGHT_UNREACH);
    protected int mReachColor = DEFAULT_COLOR_REACH;
    protected int mReachHeight = dp2px(DEFAULT_HEIGHT_REACH);
    protected int mTextOffset = dp2px(DEFAULT_TEXT_OFFSET);

    protected Paint mPaint = new Paint();

    private int mRealWidth;

    public PhHorizontalProgressBar(Context context) {
        this(context, null);
    }

    public PhHorizontalProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PhHorizontalProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        obtainStyledAttrs(attrs);
    }

    /**
     * 获取自定义属性
     *
     * @param attrs
     */
    private void obtainStyledAttrs(AttributeSet attrs) {
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs,
                R.styleable.PhHorizontalProgressBar);

        mTextSize = (int) typedArray.getDimension(
                R.styleable.PhHorizontalProgressBar_progress_text_size, mTextSize);

        mTextColor = typedArray.getColor(
                R.styleable.PhHorizontalProgressBar_progress_text_color, mTextColor);

        mTextOffset = (int) typedArray.getDimension(
                R.styleable.PhHorizontalProgressBar_progress_text_offset, mTextOffset);

        mUnreachColor = typedArray.getColor(
                R.styleable.PhHorizontalProgressBar_progress_unreach_color, mUnreachColor);

        mUnreachHeight = (int) typedArray.getDimension(
                R.styleable.PhHorizontalProgressBar_progress_unreach_height, mUnreachHeight);

        mReachColor = typedArray.getColor(
                R.styleable.PhHorizontalProgressBar_progress_reach_color, mReachColor);

        mReachHeight = (int) typedArray.getDimension(
                R.styleable.PhHorizontalProgressBar_progress_reach_height, mReachHeight);

        typedArray.recycle();

        mPaint.setTextSize(mTextSize);
    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //在本案例中，由于是水平进度条，用户一定会给又给精确值来设置水平进度条的宽度，所以不用考虑宽度的mode
//        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = measureHeight(heightMeasureSpec);
        setMeasuredDimension(width, height);

        //实际绘制的区域宽度
        mRealWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
    }

    private int measureHeight(int heightMeasureSpec) {
        int result = 0;
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        int size = MeasureSpec.getSize(heightMeasureSpec);

        if (mode == MeasureSpec.EXACTLY) {
            result = size;
        } else {
            //需要自己测量高度，而高度是由reach高度、unreach高度和字体高度三者的最大值决定的
            int textHeight = (int) (mPaint.descent() - mPaint.ascent());
            result = getPaddingTop() + getPaddingBottom() +
                    Math.max(
                            Math.max(mReachHeight, mUnreachHeight),
                            Math.abs(textHeight));
            if (mode == MeasureSpec.AT_MOST) {
                //测量值不能超过给定的size值
                result = Math.min(result, size);
            }
        }
        return result;
    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {
        //不需要这个，我们要完全自己控制draw的过程，所以可以注释掉或者删除
        //super.onDraw(canvas);
        canvas.save();
        //画布移动到的位置
        canvas.translate(getPaddingLeft(), getHeight() / 2);

        //是否需要绘制unreachBar，若干reachBar和文本的宽度大于progressBar（即进度条已经达到100%，
        // 就不需要绘制unreachBar了）
        boolean noNeedUnreach = false;

        // draw reach bar
        String text = getProgress() + "%";
        int textWidth = (int) mPaint.measureText(text);

        float radio = getProgress() * 1.0f / getMax();
        float progressX = radio * mRealWidth;
        if (progressX + textWidth > mRealWidth) {
            progressX = mRealWidth - textWidth;
            noNeedUnreach = true;
        }

        float endX = progressX - mTextOffset / 2;
        if (endX > 0) {
            mPaint.setColor(mReachColor);
            mPaint.setStrokeWidth(mReachHeight);
            canvas.drawLine(0, 0, endX, 0, mPaint);
        }

        //draw text
        mPaint.setColor(mTextColor);
        int y = (int) (-(mPaint.descent() + mPaint.ascent()) / 2);
        canvas.drawText(text, progressX, y, mPaint);

        // draw unreach bar
        if (!noNeedUnreach) {
            float start = progressX + mTextOffset / 2 + textWidth;
            mPaint.setColor(mUnreachColor);
            mPaint.setStrokeWidth(mUnreachHeight);
            canvas.drawLine(start, 0, mRealWidth, 0, mPaint);
        }

        canvas.restore();


    }

    protected int dp2px(int dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal,
                getResources().getDisplayMetrics());
    }

    protected int sp2px(int spVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal,
                getResources().getDisplayMetrics());
    }


}

 PhRoundProgressBar .java

public class PhRoundProgressBar extends PhHorizontalProgressBar {

    private int mRadius = dp2px(30);

    private int mMaxPaintWidth;

    public PhRoundProgressBar(Context context) {
        this(context, null);
    }

    public PhRoundProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PhRoundProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //让ProgressBar变得更大
        mReachHeight = (int) (mUnreachHeight * 2.5f);

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.PhRoundProgressBar);
        mRadius = (int) typedArray.getDimension(R.styleable.PhRoundProgressBar_radius, mRadius);
        typedArray.recycle();

        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        //设置连接处为弧形
        mPaint.setStrokeCap(Paint.Cap.ROUND);

    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        mMaxPaintWidth = Math.max(mReachHeight, mUnreachHeight);
        //默认四个padding一致
        int expect = mRadius * 2 + getPaddingLeft() + getPaddingRight();

        int width = resolveSize(expect, widthMeasureSpec);
        int height = resolveSize(expect, heightMeasureSpec);

        int realWidth = Math.min(width, height);

        mRadius = (realWidth - getPaddingLeft() - getPaddingRight() - mMaxPaintWidth) / 2;

        setMeasuredDimension(realWidth, realWidth);
    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {
        String text = getProgress() + "%";
        float textWidth = mPaint.measureText(text);
        float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;

        canvas.save();
        canvas.translate(getPaddingLeft() + mMaxPaintWidth / 2,
                getPaddingRight() + mMaxPaintWidth / 2);
        mPaint.setStyle(Paint.Style.STROKE);

        //draw unreach bar
        mPaint.setColor(mUnreachColor);
        mPaint.setStrokeWidth(mUnreachHeight);
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);

        //draw reach bar
        mPaint.setColor(mReachColor);
        mPaint.setStrokeWidth(mReachHeight);
        float sweepAngle = getProgress() * 1.0f / getMax() * 360;
        canvas.drawArc(new RectF(0, 0, mRadius * 2, mRadius * 2),
                0, sweepAngle, false, mPaint);

        //draw text
        mPaint.setColor(mTextColor);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawText(text, mRadius - textWidth / 2, mRadius - textHeight, mPaint);

        canvas.restore();


    }
}

三、使用：

xml中使用：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <com.gs.common3.activity.bView.customView.progress.PhHorizontalProgressBar
            android:id="@+id/id_progress1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:progress="50"
            android:padding="15dp"
            app:progress_reach_color="#ffff0000"
            app:progress_text_color="#ffff0000"
            app:progress_unreach_color="#44ff0000"
            />

        <com.gs.common3.activity.bView.customView.progress.PhHorizontalProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:progress="100"
            android:padding="15dp"
            app:progress_reach_color="#ffff0000"
            app:progress_text_color="#ffff0000"
            app:progress_unreach_color="#44ff0000"
            />

        <com.gs.common3.activity.bView.customView.progress.PhHorizontalProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:progress="30"
            android:padding="15dp"
            app:progress_reach_color="#ffff0000"
            app:progress_text_color="#ffff0000"
            app:progress_unreach_color="#44ff0000"
            />

        <com.gs.common3.activity.bView.customView.progress.PhRoundProgressBar
            android:id="@+id/id_progress2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:progress="0"
            android:padding="15dp"
            app:radius="60dp"
            app:progress_reach_color="#ffff0000"
            app:progress_text_color="#ffff0000"
            app:progress_unreach_color="#44ff0000"
            />

        <com.gs.common3.activity.bView.customView.progress.PhRoundProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:progress="80"
            android:padding="15dp"
            app:radius="60dp"
            app:progress_reach_color="#ffff0000"
            app:progress_text_color="#ffff0000"
            app:progress_unreach_color="#44ff0000"
            />


    </LinearLayout>


</ScrollView>

public class CustomViewTest1Activity extends AppCompatActivity {

    @BindView(R.id.id_progress1)
    PhHorizontalProgressBar idProgress1;
    @BindView(R.id.id_progress2)
    PhRoundProgressBar idProgress2;

    private static final int MSG_UPDATE = 0x110;

    @SuppressLint("HandlerLeak")
    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            int progress = idProgress1.getProgress();
            idProgress1.setProgress(++progress);
            idProgress2.setProgress(++progress);
            if (progress >= 100) {
                mHandler.removeMessages(MSG_UPDATE);
            }
            mHandler.sendEmptyMessageDelayed(MSG_UPDATE, 100);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_view_test1);
        ButterKnife.bind(this);

        mHandler.sendEmptyMessage(MSG_UPDATE);
    }


}

 

songzi1228
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF MVVM 把数据从ViewModel转递数值制作进度条
⊱MinG⊰ の 博
03-03 548
开发工具与关键技术：Microsoft Visual Studio 2017、WPF 这里就举个例子，在按钮的样式模板里面加上一个进度条，然后点击按钮时，ViewModel里面声明的一个int类型的值就开始变化，我就会用下面的方法把这个值传递到这个按钮的样式模板里面的进度条那来做这个进度条的进度值。 首先在工程中创建一个静态类： using System; using System.Collections.Generic; using System.Drawing; using System.Linq;
自定义View之实现进度条（ProgressBar）
最新发布
xiaokang666的博客
11-23 591
自定义View之实现进度条（ProgressBar）
android 自定义view的进度条,Android 自定义View---进度条
weixin_35285401的博客
05-25 207
简介Android系统内置的控件有时候无法满足我们的效果，这时候可以自定义View。自定义View可以通过几种方式实现：继承View重写OnDraw方法继承ViewGroup实现特殊的Layout继承特定的View(比如TextView)继承特定的ViewGroup(比如LinearLayout)本文实现一个通过继承View实现自定义的加载进度条，效果如下图所示：(gif录的有点卡，真机上不会)自...
Android自定义view的实战
陈柱的博客
02-27 323
Android自定义控件的分析和解决问题的思路，我们需要提高的是分析问题和解决问题的能力，功能实现只是最后的结果
自定义view实战(7)：大小自动变换的类ViewPager
silencefly的博客
10-26 502
自定义view实战(7)：通过大小自动变换的类ViewPager，加深下对自定义view的理解，并学习一下view层级提升问题
Android 仿饿了么加入购物车特效控件(自定义View实战)
01-22
利用 纯自定义View，实现的仿饿了么加入购物车控件，自带闪转腾挪动画的按钮。
Android自定义View系列之实战
sunbinkang的博客
01-12 1902
public class CommonTitleBarLayout extends LinearLayout { public CommonTitleBarLayout(Context context) { this(context, null); } public CommonTitleBarLayout(Context context, @Nullable AttributeSet attrs) { this(context, attrs, .
自定义View实战（一） 汽车速度仪表盘（修改后）
05-12
自定义View实战（一） 汽车速度仪表盘（修改后） 自定义View实战（一） 汽车速度仪表盘（修改后） 自定义View实战（一） 汽车速度仪表盘（修改后）
WPF+C# 实现视频播放器最全功能（视频的进度条，截屏，视频定位。。）
07-30
实现的功能有：视频播放器播放的进度条，截屏，暂停，停止，静音，音量，视频定位
自定义View实战八：绘制矩形框
01-03
目录 1、效果展示： 2、代码展示： 2.1、BorderedText.java 2.2、DrawRectFView.java 2.3、xml 2.4、DrawRectFActivity.java 1、效果展示： 2、代码展示： 2.1、BorderedText.java public class BorderedText { private final Paint interiorPaint; private final Paint exteriorPaint; private final float textSize; /** * Creates a left-a
Android高手进阶之自定义View，自定义属性（带进度的圆形进度条）源码
08-25
自定义android进度条，带有进度指示，项目详情：http://blog.csdn.net/xiaanming/article/details/10298163
Android自定义View实战（1）
01-21
Android自定义View实战包含太极图、旋转动画、帧动画、缩放动画、透明度变化动画、组合动画。更多可以看一下我的博客：https://blog.csdn.net/qq_16519957/article/details/86493786 或者github:https://github.com/307572384/vietest
【Android 自定义 View】--＞进度条合集
Kevin Learn Android
09-30 971
一个高级 Android 工程师除了要会使用 Google 原生的 View ，必须会根据实际项目的酷炫效果自己去写一些自定义 View 来解决问题，今天来给大家带来一些自定义进度条合集。
Android 自定义View 渐变进度条
秃头还奋进的博客
08-04 1255
Android 自定义View 渐变进度条
自定义View(二)---实践总结
静下心来吧，让自己变强大点！
04-04 421
实践敲码是检验自己掌握的唯一标准。
Android自定义View之进度条（带进度提示框）
热门推荐
白哥哥的博客
10-21 1万+
Android自定义水平进度条，带当前进度值的提示框
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值