Android 自定义进度条

最新推荐文章于 2020-02-25 00:13:38 发布
最新推荐文章于 2020-02-25 00:13:38 发布
阅读量475 收藏
点赞数 1
分类专栏： Android 文章标签： android 控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014630987/article/details/75298993
版权

Android 自定义进度条

为什么要自定义控件：

  1. 特定的显示风格
  2. 处理特有的用户交互
  3. 优化我们的布局
  4. 封装

如何自定义控件：

  1. 自定义属性的声明与获取
  2. 测量onMeasure
  3. 布局onLayout(ViewGroup)
  4. 绘制onDraw
  5. onTouch
  6. onInterceptTouchEvent(ViewGroup)
  7. 状态的恢复与保存

这里写图片描述

从上面这张图来分析需要自定义哪些属性

  • 分析自定义属性：
    • 左边进度条的颜色、宽度
    • 右边进度条的颜色、宽度
    • 中间文字的颜色、字体大小
    • 文字与进度条的间隙
  • 在 res/values/attrs.xml 定义声明
  • 在layout 文件中使用
  • 在View 的构造方法中进行获取

水平进度条

  1. 自定义属性，在values文件夹下建立一个attrs.xml 资源文件，并声明属性
  2. 建立一个自定义View类，并添加两个参数的构造器
  3. 在attrs.xml 文件中声明该view使用那些属性

attrs.xml文件内容

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--声明属性-->
    <attr name="progress_unreach_color" format="color"></attr>
    <attr name="progress_unreach_height" format="dimension"></attr>
    <attr name="progress_reach_color" format="color"></attr>
    <attr name="progress_reach_height" format="dimension"></attr>
    <attr name="progress_text_color" format="color"></attr>
    <attr name="progress_text_size" format="dimension"></attr>
    <attr name="progress_text_offset" format="dimension"></attr>

    <!--在自定义view中使用定义的属性-->
    <declare-styleable name="HorizontalProgressbarWithProgress">
        <attr name="progress_unreach_color" ></attr>
        <attr name="progress_unreach_height" ></attr>
        <attr name="progress_reach_color" ></attr>
        <attr name="progress_reach_height" ></attr>
        <attr name="progress_text_color" ></attr>
        <attr name="progress_text_size" ></attr>
        <attr name="progress_text_offset" ></attr>
    </declare-styleable>
</resources>

自定义view 一步步实现

  1. 构造器
public HorizontalProgressbarWithProgress(Context context) {
    this(context, null);
}
public HorizontalProgressbarWithProgress(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public HorizontalProgressbarWithProgress(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mTextSize = textSize;
}
  1. 默认属性值，和上面自定义属性值对应
private static final int DEFAULT_TEXT_SIZE = 10; //sp
private static final int DEFAULT_TEXT_COLOE = 0xFFFC00D1;
private static final int DEFAULT_COLOR_UNREACH = 0xFFD3D6DA;
private static final int DEFAULT_HEIGHT_UNREACH = 2; //dp
private static final int DEFAULT_COLOR_REACH = DEFAULT_TEXT_COLOE;
private static final int DEFAULT_HEIGHT_REACH = 2; //dp
private static final int DEFAULT_TEXT_OFFSET = 10; //dp
  1. 两个单位转换工具方法 ——dp2px、sp2px，实际绘制时使用像素来绘制，因此需要把dp、sp等单位转为px
// dp 单位转为px
    private int dp2px(int dpval) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpval, getResources().getDisplayMetrics());
    }

    // sp 转为px
    private int sp2px(int spval) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spval, getResources().getDisplayMetrics());
    }
  1. 将默认属性值转为像素值
// 像素单位值
private int mTextSize = sp2px(DEFAULT_TEXT_SIZE);
private int mTextColor = DEFAULT_TEXT_COLOE;
private int mUnreachColor = DEFAULT_COLOR_UNREACH;
private int mUnreachHeight = dp2px(DEFAULT_HEIGHT_UNREACH);
private int mReachColor = DEFAULT_COLOR_REACH;
private int mReachHeight = dp2px(DEFAULT_HEIGHT_REACH);
private int mTextOffset = dp2px(DEFAULT_TEXT_OFFSET);
  1. 其他类属性
private Paint mPaint = new Paint();
private int mRealWidth; // 控件实际可绘制宽度，控件宽度 - padding，
                            // 在onMeasure中赋值，在onDraw中使用
  1. 在构造函数中获取属性，这里我单独写一个方法，在构造器中调用
/**
* 获取自定义属性
* @param attrs
*/
private void obtainStyleAttrs(AttributeSet attrs) {
        TypedArray ta = getContext().obtainStyledAttributes(attrs,
                R.styleable.HorizontalProgressbarWithProgress);

        mTextSize = (int) ta.getDimension(
                R.styleable.HorizontalProgressbarWithProgress_progress_text_size,
                mTextSize);
        mTextColor = ta.getColor(
                R.styleable.HorizontalProgressbarWithProgress_progress_text_color,
                mTextColor);
        mTextOffset = (int) ta.getDimension(
               R.styleable.HorizontalProgressbarWithProgress_progress_text_offset,
                mTextOffset);
        mUnreachColor = ta.getColor(              R.styleable.HorizontalProgressbarWithProgress_progress_unreach_color,
                mUnreachColor);
        mUnreachHeight = (int) ta.getDimension(                R.styleable.HorizontalProgressbarWithProgress_progress_unreach_height,
                mUnreachHeight);
        mReachColor = ta.getColor(                R.styleable.HorizontalProgressbarWithProgress_progress_reach_color,
                mReachColor);
        mReachHeight = (int) ta.getDimension(                R.styleable.HorizontalProgressbarWithProgress_progress_reach_height,
                mReachHeight);

}
  1. 尺寸测量
@Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthval = MeasureSpec.getSize(widthMeasureSpec);

        int height = measureHeight(heightMeasureSpec);

        // 设置测量的宽度和高度
        setMeasuredDimension(widthval, 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 {
            // 自己计算值
            int textHeight = (int) (mPaint.descent() - mPaint.ascent());
            result = getPaddingTop() + // 上边距
                    getPaddingBottom() + // 下边距
                    Math.max(Math.max(mReachHeight, mUnreachHeight),
                            Math.abs(textHeight)); //
            // 为该模式,计算的值不能超过给定的size
            if (mode == MeasureSpec.AT_MOST) {
                result = Math.min(result, size);
            }
        }

        return result;
    }
  1. 实现onDraw方法
 @Override
    protected synchronized void onDraw(Canvas canvas) {
        canvas.save();
        // 移动画布
        canvas.translate(getPaddingLeft(), getHeight()/2);

        boolean noNeedUnrech = false;

        String text = getProgress() + "%";
        // 进度条进度比例
        float radio = getProgress() * 1.0f / getMax();
        // 测量文字宽度
        int textWidth = (int) mPaint.measureText(text);
        // 计算已完成进度条宽度
        float progressX = radio * mRealWidth;
        // 判断是否绘制为完成进度条
        if (progressX + textWidth > mRealWidth) {
            progressX = mRealWidth - textWidth;
            noNeedUnrech = true;
        }

        // 绘制已完成进度条
        float endX =  progressX - mTextOffset / 2;
        if (endX > 0) {
            mPaint.setColor(mReachColor);
            mPaint.setStrokeWidth(mReachHeight);
            canvas.drawLine(0, 0, endX, 0, mPaint);
        }

        // 绘制文本
        mPaint.setColor(mTextColor);
        // 让文字基线处于中心
        int y = (int) (-(mPaint.descent() + mPaint.ascent())/2);
        canvas.drawText(text, progressX, y, mPaint);

        if (!noNeedUnrech) {
            float  start = (int) (progressX + textWidth + mTextOffset/2);
            mPaint.setColor(mUnreachColor);
            mPaint.setStrokeWidth(mUnreachHeight);
            canvas.drawLine(start, 0, mRealWidth, 0, mPaint);
        }
        canvas.restore();
    }

  1. 在activity中和其他系统控件一样使用

    <?xml version="1.0" encoding="utf-8"?>
<ScrollView
   xmlns:android="http://schemas.android.com/apk/res/android"
   <!-- 给自定义属性添加命名空间 -->
   xmlns:hyman="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="com.example.song.progressbar.MainActivity">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       >
       <com.example.view.HorizontalProgressbarWithProgress
           android:id="@+id/id_prohress01"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:progress="50"
           android:padding="5dp"
           android:layout_marginTop="30dp"
           hyman:progress_reach_color="#ffff0000"
           hyman:progress_text_color="#ffff0000"
           hyman:progress_unreach_color="#44ff0000"
           />
</ScrollView>

圆形进度条

该实现方法和水平进度条类似，只是绘制不同形状，在这里添加了一个圆形半径的属性,且继承自水平进度条，在测量尺寸时，没有像水平进度条那样对测量模式、尺寸进行详细的测量，而是使用resolveSize(except, widthMeasureSpec)；方法。

public class RoundProgressbarWithProgress extends HorizontalProgressbarWithProgress {

    private int mRadius ;
    private int mRealWidth;
    private int mMaxPaintWidth;
    public RoundProgressbarWithProgress(Context context) {
        this(context, null);
    }

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

    public RoundProgressbarWithProgress(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray ta = getContext().obtainStyledAttributes(attrs,
                R.styleable.RoundProgressbarWithProgress);
        mRadius = (int) ta.getDimension(R.styleable.RoundProgressbarWithProgress_radius,
                20);
        ta.recycle();
    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 获取两个画笔的最大值，
        mMaxPaintWidth = Math.max(mReachHeight, mUnreachHeight);
        // 计算期望的控件大小
        int except = mRadius * 2 + mMaxPaintWidth + getPaddingLeft() + getPaddingRight();

        // 解析控件实际尺寸
        int width = resolveSize(except, widthMeasureSpec);
        int height = resolveSize(except, heightMeasureSpec);

        mRealWidth = Math.max(width, height);

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

        setMeasuredDimension(mRealWidth, mRealWidth);
    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {
        canvas.save();
        canvas.translate(getPaddingLeft()+mMaxPaintWidth/2, getPaddingLeft() + mMaxPaintWidth/2);

        String text = getProgress() + "%";
        int textWidth = (int) mPaint.measureText(text);
        int textHeight = (int) ((mPaint.descent() +  mPaint.ascent()) / 2);

        mPaint.setStyle(Paint.Style.STROKE);
        // 绘制未完成进度条的圆
        mPaint.setColor(mUnreachColor);
        mPaint.setStrokeWidth(mUnreachHeight);
        mPaint.setAntiAlias(true);
        mPaint.setDither(false);
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);

        // 绘制已完成圆弧
        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);

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

        canvas.restore();
    }
}
冉茂松
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android自定义进度条
10-27
该资源实现了一个android平台使用自定义view实现了一个自定义进度条的功能，希望大家喜欢。详情请参考博客http://blog.csdn.net/mockingbirds/article/details/49454279
Android自定义进度条效果
08-27
Android自定义进度条效果详解 Android自定义进度条效果是Android开发中一个常见的需求，主要用于展示进度条的变化过程。以下是Android自定义进度条效果的知识点总结： 1. 自定义进度条效果的思路 在实现Android...
Android自定义进度条
非鹭千里
10-19 568
在Android中的控件种类已经足够我们使用，但是有时候大家需要根据美工的设计来改变一些控件的颜色，式样，以及背景图片 最近正好有这方面的需要，用了很久时间，找到了改变基本颜色以及图片的方法 下面以SeekBar为例，为大家描述一下我的做法 首先在layout文件夹中的main.xml内容如下 Xml代码  xml version="1.0" e
Android自定义进度条的圆角横向进度条实例详解
09-01
首先，我们理解一下Android中的自定义进度条是如何工作的。 1. **自定义进度条的核心概念** - **invalidate()方法**：这个方法用于指示一个View需要重绘，它会将该View添加到UI线程的重绘队列中。当你修改了View的...
Android自定义进度条样式一
08-20
本主题将深入探讨如何创建一个自定义的进度条样式，即“Android自定义进度条样式一”。我们将讨论以下几个关键知识点： 1. **自定义View的原理** 自定义进度条本质上是自定义一个Android的View类。在Android中，你...
android自定义进度条渐变圆形
09-03
在Android开发中，自定义视图是实现特定UI效果的重要手段，本示例中的"android自定义进度条渐变圆形"是一个很好的实践案例，它展示了如何创建一个具有渐变色的圆形进度条。这种进度条常用于显示任务的完成度或扫描...
Android 自定义进度条
05-22
Android 自定义进度条
安卓自定义进度条
ibey0nd的专栏
08-17 952
先看下系统的源码 name="Widget.ProgressBar.Horizontal"> name="android:indeterminateOnly">false name="android:progressDrawable">@android:drawable/progress_horizontal name="android
Android--自定义进度条
本人随手记录，内容只是个人看懂程度，对内容有任何疑问请勿打扰
02-25 190
实际上我们平时看的进度条是图片。比如进度条的背景，然后还有进度条的进度，进度本质上就是一张图片，持续变宽的过程。 这里没有去写例子，只是稍微的理解了下 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值