【学习笔记】Android-打造炫酷进度条（条形）

最新推荐文章于 2022-10-21 09:00:09 发布
最新推荐文章于 2022-10-21 09:00:09 发布
阅读量3.7k 收藏 3
点赞数 2
分类专栏： android 中级 文章标签： 自定义控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chjr1000/article/details/52011103
版权

本文是我在慕课网上学习《Android-打造炫酷进度条》整理的源代码，和视频中的源代码主体一致，仅修改了部分参数。

效果图如下所示（实际进度条是连续的）。


源文件

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>

    <declare-styleable name="HorizontalProgressbar">
        <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>
HorizontalProgressbar

package com.androidk.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.widget.ProgressBar;

import com.androidk.myprogressbar.R;

/**
 * Created by Administrator on 16-7-23.
 */
public class HorizontalProgressbar extends ProgressBar {

    String TAG = "HorizontalProgressbar";
    //定义默认值
    private static final int DEFAULT_TEXT_SIZE = 10;//sp
    private static final int DEFAULT_TEXT_COLOR = 0xFFFC00D1;
    private static final int DEFAULT_COLOR_UNREACH = 0xFFD3D6DA;
    private static final int DEFAULT_HEIGHT_UNREACH = 3;//dp
    private static final int DEFAULT_COLOR_REACH = DEFAULT_TEXT_COLOR;
    private static final int DEFAULT_HEIGHT_REACH = 3;//dp
    private static final int DEFAULT_TEXT_OFFSET = 10;//dp
    //定义变量
    private int mTextSize = sp2px(DEFAULT_TEXT_SIZE);
    private int mTextColor = DEFAULT_TEXT_COLOR;
    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);

    //画笔
    private Paint mPaint = new Paint();
    private int mRealWidth;


    public HorizontalProgressbar(Context context) {
        this(context,null);
        Log.i(TAG,"一个参数构造方法");
    }

    public HorizontalProgressbar(Context context, AttributeSet attrs) {
        this(context, attrs,0);
        Log.i(TAG,"两个参数构造方法");
    }

    public HorizontalProgressbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        Log.i(TAG,"三个参数构造方法");
        obtainStyledAttrs(attrs);
        
    }
    /*
    * 获取自定义属性
    * */
    private void obtainStyledAttrs(AttributeSet attrs) {

        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.HorizontalProgressbar);

        mTextSize = (int)ta.
                getDimension(
                        R.styleable.HorizontalProgressbar_progress_text_size,
                        mTextSize);

        mTextColor = ta.
                getColor(
                        R.styleable.HorizontalProgressbar_progress_text_color,
                        mTextColor);

        mTextOffset = (int) ta.
                getDimension(
                        R.styleable.HorizontalProgressbar_progress_text_offset,
                        mTextOffset);
        mUnReachColor = ta.
                getColor(
                        R.styleable.HorizontalProgressbar_progress_unreach_color,
                        mUnReachColor);
        mUnReachHeight = (int)ta.
                getDimension(R.styleable.HorizontalProgressbar_progress_unreach_height,
                        mUnReachHeight);

        mReachColor = ta.
                getColor(
                        R.styleable.HorizontalProgressbar_progress_reach_color,
                        mReachColor);
        mReachHeight = (int)ta.
                getDimension(
                        R.styleable.HorizontalProgressbar_progress_reach_height,
                        mReachHeight);
        mPaint.setTextSize(mTextSize);
        ta.recycle();
    }

    @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();
        Log.i(TAG,"mRealWidth = "+mRealWidth);
    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {

        canvas.save();
        canvas.translate(getPaddingLeft(),getHeight()/2);

        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 = radio*mRealWidth - mTextOffset/2;
        if(endX >0 ){
            mPaint.setColor(mReachColor);
            mPaint.setStrokeWidth(mReachHeight);
            canvas.drawLine(0,0,progressX,0,mPaint);
        }
        //draw text
        mPaint.setColor(mTextColor);
        int y = (int)(-(mPaint.descent()+mPaint.ascent())/2);
        canvas.drawText(text,progressX+ mTextOffset/2 ,y,mPaint);
        //draw unreach bar
        if(!noNeedUnReach){
            float start = progressX + mTextOffset/2 + textWidth;
            mPaint.setColor(mUnReachColor);
            mPaint.setStrokeWidth(mReachHeight);
            canvas.drawLine(start + mTextOffset/2,0,mRealWidth,0,mPaint);
        }

        canvas.restore();


    }

    private int measureHeight(int heightMeasureSpec) {
        int result = 0;
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        int size = MeasureSpec.getSize(heightMeasureSpec);
        Log.i(TAG,"mode = "+mode);
        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));
            if(mode == MeasureSpec.AT_MOST){
                result  = Math.min(result,size);
            }
        }
        Log.i(TAG,"result = "+result);
        return result;
    }

    private int dp2px(int dpVal){
        return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpVal,
                getResources().getDisplayMetrics());
    }
    private int sp2px(int spVal){
        return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,spVal,
                getResources().getDisplayMetrics());
    }

}
HorizontalProgressbar.java 

package com.androidk.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.widget.ProgressBar;

import com.androidk.myprogressbar.R;

/**
 * Created by Administrator on 16-7-23.
 */
public class HorizontalProgressbar extends ProgressBar {

    String TAG = "HorizontalProgressbar";
    //定义默认值
    private static final int DEFAULT_TEXT_SIZE = 10;//sp
    private static final int DEFAULT_TEXT_COLOR = 0xFFFC00D1;
    private static final int DEFAULT_COLOR_UNREACH = 0xFFD3D6DA;
    private static final int DEFAULT_HEIGHT_UNREACH = 3;//dp
    private static final int DEFAULT_COLOR_REACH = DEFAULT_TEXT_COLOR;
    private static final int DEFAULT_HEIGHT_REACH = 3;//dp
    private static final int DEFAULT_TEXT_OFFSET = 10;//dp
    //定义变量
    private int mTextSize = sp2px(DEFAULT_TEXT_SIZE);
    private int mTextColor = DEFAULT_TEXT_COLOR;
    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);

    //画笔
    private Paint mPaint = new Paint();
    private int mRealWidth;


    public HorizontalProgressbar(Context context) {
        this(context,null);
        Log.i(TAG,"一个参数构造方法");
    }

    public HorizontalProgressbar(Context context, AttributeSet attrs) {
        this(context, attrs,0);
        Log.i(TAG,"两个参数构造方法");
    }

    public HorizontalProgressbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        Log.i(TAG,"三个参数构造方法");
        obtainStyledAttrs(attrs);
        
    }
    /*
    * 获取自定义属性
    * */
    private void obtainStyledAttrs(AttributeSet attrs) {

        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.HorizontalProgressbar);

        mTextSize = (int)ta.
                getDimension(
                        R.styleable.HorizontalProgressbar_progress_text_size,
                        mTextSize);

        mTextColor = ta.
                getColor(
                        R.styleable.HorizontalProgressbar_progress_text_color,
                        mTextColor);

        mTextOffset = (int) ta.
                getDimension(
                        R.styleable.HorizontalProgressbar_progress_text_offset,
                        mTextOffset);
        mUnReachColor = ta.
                getColor(
                        R.styleable.HorizontalProgressbar_progress_unreach_color,
                        mUnReachColor);
        mUnReachHeight = (int)ta.
                getDimension(R.styleable.HorizontalProgressbar_progress_unreach_height,
                        mUnReachHeight);

        mReachColor = ta.
                getColor(
                        R.styleable.HorizontalProgressbar_progress_reach_color,
                        mReachColor);
        mReachHeight = (int)ta.
                getDimension(
                        R.styleable.HorizontalProgressbar_progress_reach_height,
                        mReachHeight);
        mPaint.setTextSize(mTextSize);
        ta.recycle();
    }

    @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();
        Log.i(TAG,"mRealWidth = "+mRealWidth);
    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {

        canvas.save();
        canvas.translate(getPaddingLeft(),getHeight()/2);

        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 = radio*mRealWidth - mTextOffset/2;
        if(endX >0 ){
            mPaint.setColor(mReachColor);
            mPaint.setStrokeWidth(mReachHeight);
            canvas.drawLine(0,0,progressX,0,mPaint);
        }
        //draw text
        mPaint.setColor(mTextColor);
        int y = (int)(-(mPaint.descent()+mPaint.ascent())/2);
        canvas.drawText(text,progressX+ mTextOffset/2 ,y,mPaint);
        //draw unreach bar
        if(!noNeedUnReach){
            float start = progressX + mTextOffset/2 + textWidth;
            mPaint.setColor(mUnReachColor);
            mPaint.setStrokeWidth(mReachHeight);
            canvas.drawLine(start + mTextOffset/2,0,mRealWidth,0,mPaint);
        }

        canvas.restore();


    }

    private int measureHeight(int heightMeasureSpec) {
        int result = 0;
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        int size = MeasureSpec.getSize(heightMeasureSpec);
        Log.i(TAG,"mode = "+mode);
        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));
            if(mode == MeasureSpec.AT_MOST){
                result  = Math.min(result,size);
            }
        }
        Log.i(TAG,"result = "+result);
        return result;
    }

    private int dp2px(int dpVal){
        return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpVal,
                getResources().getDisplayMetrics());
    }
    private int sp2px(int spVal){
        return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,spVal,
                getResources().getDisplayMetrics());
    }

}
MainActivity.java 

package com.androidk.myprogressbar;

import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.androidk.view.HorizontalProgressbar;

public class MainActivity extends AppCompatActivity {

    private HorizontalProgressbar mHProgressbar;
    private static final int MSG_UPDATE = 0x110;
    private Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            int progress = mHProgressbar.getProgress();
            mHProgressbar.setProgress(++progress);
            if(progress>=100){
                mHandler.removeMessages(MSG_UPDATE);
            }else{
                mHandler.sendEmptyMessageDelayed(MSG_UPDATE,100);
            }
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mHProgressbar = (HorizontalProgressbar)findViewById(R.id.id_progress01);
        mHandler.sendEmptyMessage(MSG_UPDATE);

    }
}

activity_main.xml 

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

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

        <com.androidk.view.HorizontalProgressbar
            android:id="@+id/id_progress01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:progress="50"
            android:padding="5dp"
            android:layout_marginTop="30dp"/>
    </LinearLayout>
</ScrollView>




chjr1000
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
安卓第三天笔记--通知-进度条-时期
02-26
通知就是在是上方的状态栏弹出通知消息使用时要建立一个工厂,返回必须为TextViewCalendarViewDatePicker与TimePickerAutoCompleteTextView单个完成MultiAutoCompleteTextView可以有多个值,用,号分隔AnalogClock与...
android 使用clip.xml 作为drawable 作成进度条图片效果
03-24 651
简单例子：clip_drawable.xml <clip xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/ic_launcher" android:gravity="left" android:clipOrientation="horiz
Android开发-各种各样好看漂亮的进度条，指示器，加载提示汇总【代码粘过来就可以用】
热门推荐
panghaha12138的博客
06-03 2万+
导读：之前项目中用到一些进度条，找了不少，但是我们产品是个傻X，什么效果都要做成跟ios效果一样的，所有一些本来很好看的进度条也被下了，打算写个demo自己总结一下，留着以后用， 有些是自己写的，有些是github上找的别人的库，如果大家觉得好看可以用，直接下载复制代码到项目里就可以用，ok 废话少说，先上图 1.绿色进度条，可以固定的 布局； xmlns:android
Android自定义进度条
牛仔面包
07-14 322
1.新建自定义view  HorizontalProgressbarWithProgress， 2.自定义属性 values目录下新建attrs.xml文件，定义各种属性，并且给进度条引用
Android 炫酷的自定义进度条ProgressBar集锦，优雅呈现
shenggaofei的博客
09-29 8357
炫酷的自定义进度条ProgressBar，带有动画效果，效果还不错，适用于项目中的一些需求，一起来看看（整理所有代码均为转载）： 1.滚动的双色斜条作为进度条，有点类似Bootstrap风格。Android 自定义进度条ColorfulProgressBar。 源码： https://github.com/Ccapton/Android-ColorfulProgressBar ...
Android实现3D页面加载进度条动画
Small_Lee的博客
02-22 2429
一.概述最近在研究公司的代码，发现每次切换页面时做的进度条效果还挺不错的，所以想深入研究一下，今天就带大家来看看到底是如何实现的，首先上效果图 二.实现上面的进度条最大的特点就是有种立体的感觉，中间的文字貌似是在垂直于平面在转动，下面看看具体的实现： 1.首先我们需要四张图片SOUFUN_LOADING_BAR SOUFUN_LOADING SOUFUN_LOADING1 SOUFUN_L
Android 炫酷进度条
flying0916的博客
10-21 865
android 系统进度条并不能满足日常需求，于是写了一个小例子
android 炫酷进度条,Android打造炫酷进度条效果
weixin_34511324的博客
05-27 647
本文实例为大家分享了Android炫酷进度条效果的具体代码，供大家参考，具体内容如下HorizontalProgressbarWithProgress的代码import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphic...
android 动态进度条,Android实用view系列------炫酷的进度条
weixin_35895056的博客
05-25 578
不知不觉距离上次写文章已经过去大半个月了，原本计划每周写一篇的想法在坚持几周之后最终还是被生活中各种各样的琐事打乱，无奈中夹杂这对自己的一点失望。心痛.jpg当初的愿望实现了吗事到如今只好祭奠吗任岁月风干理想再也找不回真的我抬头仰望着满天星河那时候陪伴我的那颗这里的故事你是否还记得今天给大家带来的是自定义view系列之炫酷的进度条的效果，让你的进度条从此与众不同。按照惯例先上效果图，俗话说无图无有...
android 自定义带指示器圆弧进度条,Android实现带有指示器的进度条
weixin_39608134的博客
05-26 397
背景当我们看到UI给我们设计的效果的时候，我们习惯性的思路就是看看google有没有为我们提供相应的控件或者是能否在网上找到一些合适的轮子拿过来直接用。但是，有时候很不巧的是没有这样的轮子供我们直接使用，而且，UI以及产品就需要这样的效果的时候，我们就只能自己进行实现绘制。今天呢，我就带大家从简单的实现一个带有指示器的进度条，帮大家理解一下之定义View的绘制流程。效果实现图俗话说,没有效果图,就...
Android 打造各种酷炫的进度条，可自由定制样式（颜色、字体、大小、形状等）
11-16
Android 打造形形色色的进度条，带进度显示的水平进度条和带进度的圆形进度条，可自由定制样式（颜色、字体、大小、形状等）
Android自定义View实现炫酷进度条
08-25
主要为大家详细介绍了Android自定义View实现炫酷进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android条纹进度条的实现(调整view宽度仿进度条)
01-05
前言 本文主要给大家介绍了关于Android条纹进度条(调整view宽度仿进度条)的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧 方法如下： 美工同学指定了一个进度条样式 进度条样式 这斑斓的进度条，如果要自己画实在是劳民伤财。于是请美工切了一张素材。 素材样例 如果用shape或者.9图片不太好处理这个条纹。转变思路，放置2张图片。一张作为背景（底，bottom），一张作为进度条图片（cover）。 进度改变时，改变上面图片的宽度。 这就要求上面的图片是圆角的。自定义ImageView，调用canvas.clipPath来切割画布。 public cl
方框圆角进度条
12-27
自定义方框样式，有圆角的进度条~~~~~~~~~~~~~~~~~~~~
简单炫酷进度球
12-26
Android实现进度球，可以根据业务逻辑来实现自己的进度显示
android学习笔记-clip.pdf
11-15
android学习笔记-clip.pdf
黑莓学习笔记之一----进度条
03-23
NULL 博文链接：https://flyouting.iteye.com/blog/1057314
Android-初学者学习笔记(自己整理).pdf
11-18
Android-初学者学习笔记(自己整理).pdf
Android 绘制带数字进度条形进度条.zip
07-10
Android 绘制带数字进度条形进度条通过绘制，实现进度条，可控性比较高
vtk学习笔记 --- 显示坐标系
最新发布
05-20
在vtk中显示坐标系可以通过添加vtkAxesActor对象实现。vtkAxesActor可以显示三个坐标轴，以及它们的标签和箭头。 下面是一个简单的示例代码，用于在vtk中显示坐标系： ```python import vtk ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值