Android 自定义View——自定义ProgressBar

最新推荐文章于 2017-07-25 09:49:54 发布
最新推荐文章于 2017-07-25 09:49:54 发布
阅读量2.3k 收藏 3
点赞数
分类专栏： Android 自定义View和ViewGroup系列 文章标签： android 自定义控件 ProgressBa
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/To_be_Designer/article/details/48503365
版权

　　Android中给我们提供了多个样式的ProgressBar，SeekBar，RatingBaar等进度条，但是我们这些样式都满足不了我们的要求，这时我们就可以使用自定义View来定义我们自己想要的形式的进度条。
　　这里讲解三种样式的进度条，由于博主还米有学习过动画，所以这里不添加动画效果。想要学习自定义控件的可以先参考这篇文章>《Android 自定义View——自定义View控件 》。

形式一

效果：

这里写图片描述

控件的定义

1. 定义一个MyProgressCircle的类继承View类。
2. 定义一个MyProgressCircle(Context context, AttributeSet attrs)的构造器。
3. 重写其onMesure和onDraw方法。
4. 在onDraw方法中绘制进度条。
　　以上是自定义控件的基本步骤，我们先看代码，然后逐步讲解：

public class MyProgressCircle extends View {
    private int width;//设置高
    private int height;//设置高
    //设置画笔
    private Paint mPaintBackground;
    private Paint mPaintCurrent;
    private Paint mPaintText;

    //设置进度
    private int maxProgress=100;
    private int currentProgress=0;

    public int getMaxProgress() {
        return maxProgress;
    }
    public void setMaxProgress(int maxProgress) {
        this.maxProgress = maxProgress;
    }

    public int getCurrentProgress() {
        return currentProgress;
    }
    public void setCurrentProgress(int currentProgress) {
        this.currentProgress = currentProgress;
        invalidate();//实时更新进度
    }

    public MyProgressCircle(Context context, AttributeSet attrs) {
        super(context, attrs);
        //绘制未下载时背景圆的画笔
        mPaintBackground = new Paint();
        mPaintBackground.setAntiAlias(true);
        mPaintBackground.setColor(Color.LTGRAY);
        //绘制下载时显示进度圆的画笔
        mPaintCurrent = new Paint();
        mPaintCurrent.setAntiAlias(true);
        mPaintCurrent.setColor(Color.GRAY);
        //绘制显示下载进度文字的画笔
        mPaintText = new Paint();
        mPaintText.setAntiAlias(true);
        mPaintText.setColor(Color.BLACK);
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintText.setTextSize(100);
    }

    public MyProgressCircle(Context context) {
        super(context);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);//设置宽和高
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawCircle(width / 2, height / 2, 300, mPaintBackground);
        canvas.drawCircle(width/2, height/2, currentProgress*300f/maxProgress, mPaintCurrent);
        canvas.drawText(currentProgress*100f/maxProgress+"%", width/2, height/2, mPaintText);
    }
}

　　这里就只是绘制了两个圆形，但是这两个圆形是有联系的。背景圆代表的进度的最大值，当前圆是代表的是当前的进度。当当前进度改变时，当前圆也是要变化的，我们从刚才的效果中可以看到当前圆变化的是半径，所以我们在绘制时，将其半径设置为：currentProgress*300f/maxProgress。这个应该是比较好理解的。

控件的使用

　　然后我们在Activity中使用一下，模拟下载。
1. 在布局中定义添加控件。

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button_start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="开始进度"/>
    <com.example.administrator.mywidgetdemo.widget.MyProgressCircle
        android:id="@+id/myprogress"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>
  1. 在Activity使用通过点击按钮开始下载。
public class MainActivity extends Activity {
    private MyProgressCircle myProgressCircle;
    private Button mButtonStart;
    private static final int PROGRESS_ONE = 0X0001;

    //定义一个进度
    private int progress;
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case PROGRESS_ONE:
                    progress++;
                    if(progress<=100){
                        myProgressCircle.setCurrentProgress(progress);
                        sendEmptyMessageDelayed(PROGRESS_ONE, 100);
                    }
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mButtonStart = (Button) findViewById(R.id.button_start);
        //获取控件的对象
        myProgressCircle = (MyProgressCircle) findViewById(R.id.myprogress);
        mButtonStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                handler.sendEmptyMessageDelayed(PROGRESS_ONE, 1000);
            }
        });
    }
}

形式二

效果：
这里写图片描述

控件的定义

1. 定义一个MyProgressCircle的类继承View类。
2. 定义一个MyProgressCircle(Context context, AttributeSet attrs)的构造器。
3. 重写其onMesure和onDraw方法。
4. 在onDraw方法中绘制进度条。
　　以上是自定义控件的基本步骤，我们先看代码，然后逐步讲解：

public class MyProgressArc extends View {
    private int width;//设置高
    private int height;//设置高
    //设置画笔
    private Paint mPaintBackground;
    private Paint mPaintCurrent;
    private Paint mPaintText;
    //设置进度
    private int maxProgress=100;
    private int currentProgress=0;

    public int getMaxProgress() {
        return maxProgress;
    }
    public void setMaxProgress(int maxProgress) {
        this.maxProgress = maxProgress;
    }

    public int getCurrentProgress() {
        return currentProgress;
    }
    public void setCurrentProgress(int currentProgress) {
        this.currentProgress = currentProgress;
        invalidate();//实时更新进度
    }

    public MyProgressArc(Context context) {
        super(context);
    }

    public MyProgressArc(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintBackground = new Paint();
        mPaintBackground.setAntiAlias(true);
        mPaintBackground.setStyle(Paint.Style.STROKE);
        mPaintBackground.setColor(Color.LTGRAY);
        mPaintBackground.setStrokeWidth(60);

        mPaintCurrent = new Paint();
        mPaintCurrent.setAntiAlias(true);
        mPaintCurrent.setStyle(Paint.Style.STROKE);
        mPaintCurrent.setColor(Color.GRAY);
        mPaintCurrent.setStrokeWidth(60);

        mPaintText = new Paint();
        mPaintText.setAntiAlias(true);
        mPaintText.setColor(Color.BLACK);
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintText.setTextSize(100);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);//设置宽和高
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        RectF rect = new RectF(width/2-300, height/2-300, width/2+300, height/2+300);
        canvas.drawArc(rect,currentProgress*360f/maxProgress,360f-currentProgress*360f/maxProgress, false,  mPaintBackground);
        canvas.drawArc(rect, 0,currentProgress*360f/maxProgress, false,  mPaintCurrent);
        canvas.drawText(currentProgress*100f/maxProgress+"%", width/2, height/2, mPaintText);
    }
}

　　这里就只是绘制了两个椭圆，但是这两个椭圆是有联系的。背景椭圆代表的进度的最大值，当前椭圆是代表的是当前的进度。当当前进度改变时，当前椭圆也是要变化的，我们从刚才的效果中可以看到椭圆变化的是旋转的角度。背景椭圆的角度在不断的减小，减小的数量是currentProgress*360f/maxProgress，基数是360度，当前椭圆角度在不断增大，增大的角度是currentProgress*360f/maxProgress，基数是0度。

控件的使用

　　然后我们在Activity中使用一下，模拟下载。
1. 在布局中定义添加控件。

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button_start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="开始进度"/>
    <com.example.administrator.mywidgetdemo.widget.MyProgressArc
        android:id="@+id/myprogress"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>
  1. 在Activity使用通过点击按钮开始下载。
public class MainActivity extends Activity {
    private MyProgressArc myProgressArc;
    private Button mButtonStart;
    private static final int PROGRESS_TWO = 0X0002;

    //定义一个进度
    private int progress;
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case PROGRESS_TWO:
                    progress++;
                    if(progress<=100){
                        myProgressArc.setCurrentProgress(progress);
                        sendEmptyMessageDelayed(PROGRESS_TWO, 100);
                    }
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mButtonStart = (Button) findViewById(R.id.button_start);
        myProgressArc = (MyProgressArc) findViewById(R.id.myprogress);
        mButtonStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                handler.sendEmptyMessageDelayed(PROGRESS_TWO, 1000);
            }
        });
    }
}

形式三

效果：
这里写图片描述

控件的定义

1. 定义一个MyProgressCircle的类继承View类。
2. 定义一个MyProgressCircle(Context context, AttributeSet attrs)的构造器。
3. 重写其onMesure和onDraw方法。
4. 在onDraw方法中绘制进度条。
　　以上是自定义控件的基本步骤，我们先看代码，然后逐步讲解：

public class MyProgressRect extends View {
    private int width;//设置高
    private int height;//设置高
    //设置画笔
    private Paint mPaintBackground;
    private Paint mPaintCurrent;
    private Paint mPaintText;
    //设置进度
    private int maxProgress = 100;
    private int currentProgress = 0;
    private float currentProgressHeight;

    public int getMaxProgress() {
        return maxProgress;
    }

    public void setMaxProgress(int maxProgress) {
        this.maxProgress = maxProgress;
    }

    public int getCurrentProgress() {
        return currentProgress;
    }

    public void setCurrentProgress(int currentProgress) {
        this.currentProgress = currentProgress;
        invalidate();//实时更新进度
    }


    public MyProgressRect(Context context) {
        super(context);
    }

    public MyProgressRect(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintBackground = new Paint();
        mPaintBackground.setAntiAlias(true);
        mPaintBackground.setStyle(Paint.Style.FILL);
        mPaintBackground.setColor(Color.LTGRAY);
        mPaintBackground.setStrokeWidth(60);

        mPaintCurrent = new Paint();
        mPaintCurrent.setAntiAlias(true);
        mPaintCurrent.setStyle(Paint.Style.FILL);
        mPaintCurrent.setColor(Color.GRAY);
        mPaintCurrent.setStrokeWidth(60);

        mPaintText = new Paint();
        mPaintText.setAntiAlias(true);
        mPaintText.setColor(Color.BLACK);
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintText.setTextSize(100);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);//设置宽和高
    }

    @Override
    protected void onDraw(Canvas canvas) {

        //定义水柱的高度。
        currentProgressHeight = currentProgress*600f/ maxProgress;

        super.onDraw(canvas);
        canvas.drawRect(width / 2 - 300, height / 2 - 300, width / 2 + 300,(height / 2 + 300) - (currentProgressHeight), mPaintBackground);

        canvas.drawRect(width / 2 - 300, (height / 2 + 300) - (currentProgressHeight), width / 2 + 300, height / 2 + 300, mPaintCurrent);

        canvas.drawText(currentProgress * 100f / maxProgress + "%", width / 2, height / 2, mPaintText);
    }
}

　　这里就只是绘制了两个矩形，但是这两个矩形是有联系的。背景矩形代表的进度的最大值，当前矩形是代表的是当前的进度。当当前进度改变时，当前矩形和背景矩形也要变化的，我们从刚才的效果中可以看到变化的是高度。背景矩形的高度在不断的减小，当前矩形的高度在不断地增大，变化数都是currentProgressHeight，值为currentProgress*600f/ maxProgress。

控件的使用

　　然后我们在Activity中使用一下，模拟下载。
1. 在布局中定义添加控件。

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button_start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="开始进度"/>
    <com.example.administrator.mywidgetdemo.widget.MyProgressRect
        android:id="@+id/myprogress"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>
  1. 在Activity使用通过点击按钮开始下载。
public class MainActivity extends Activity {
    private MyProgressRect myProgressRect;
    private Button mButtonStart;
    private static final int PROGRESS_RECT = 0X0003;
    //定义一个进度
    private int progress;
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {              
                case PROGRESS_RECT:
                    progress++;
                    if (progress <= 100) {
                        myProgressRect.setCurrentProgress(progress);
                        sendEmptyMessageDelayed(PROGRESS_RECT, 100);
                    }
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mButtonStart = (Button) findViewById(R.id.button_start);
        myProgressRect = (MyProgressRect) findViewById(R.id.myprogress);
        mButtonStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                handler.sendEmptyMessageDelayed(PROGRESS_RECT, 1000);
            }
        });
    }
}
小_爽
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Android开发中自定义ProgressBar控件的方法示例
08-29
主要介绍了Android开发中自定义ProgressBar控件的方法,结合实例形式分析了自定义ProgressBar控件的定义与使用方法,需要的朋友可以参考下
android中ProgressDialog与ProgressBar的使用详解
09-05
本篇文章是对android中ProgressDialog与ProgressBar的使用进行了详细的分析介绍，需要的朋友参考下
Android自定义控件---继承ProgressBar功能扩展
05-09
Android自定义控件---继承ProgressBar功能扩展 博客地址：http://blog.csdn.net/u012814441
android自定义ProgressView长条渐变色的进度条,实现渐变色的效果
01-07
android自定义ProgressView长条渐变色的进度条,实现渐变色的效果，不适用一张图片实现！ 具体思路：http://blog.csdn.net/springsky_/article/details/17954765
android 自定义 View（4）- 进度条(ProgressBar)
u012005313的专栏
07-25 8169
参考：Android 打造形形色色的进度条 实现可以如此简单 daimajia/NumberProgressBar自定义视图（View）是 Android 开发的一个进阶内容。随着开发的深入，肯定会出现系统提供的基础控件不符合需求的情况。一方面通过组合基础控件以形成新的布局，另一方面可以通过自定义控件的方式来更加灵活的实现需求自定义视图涉及到 Android 系统许多方面的内容，下面根据自己的理解
Android代码-Progressbar
08-06
Android自定义Progressbar ...教程博客：Android自定义View——从零开始实现圆形进度条 效果展示： 水波浪进度框WaveProgressView 教程博客：Android自定义View——从零开始实现水波浪进度框 效果展示：
android开发入门与实战(下)
01-19
第1章 掀起你的盖头来——初识Android 1.1 认识Android 1.2 Android的背景 1.2.1 Android的历史 1.2.2 Android的发展 1.3 我的Android我做主 1.3.1 开发基于Android平台的应用 1.3.2 参加Android开发者大赛 1.3.3 ...
android开发资料大全
04-07
Android自定义View研究-- 一个小Demo Android调用相册拍照实现系统控件缩放切割图片 Android SQLite的实例汇总大全 两分钟彻底让你明白Android Activity生命周期(图文)! Android 图形系统剖析 Android 立体效果图片...
Android高手进阶教程与Android基础教程
06-03
Android高手进阶教程之----Android 中自定义View的应用.doc Android高手进阶教程之----Android 中自定义属性(attr.xml,TypedArray)的使用! .doc Android高手进阶教程之----Android中万能的BaseAdapter(Spinner,...
Google Android SDK开发范例大全(PDF高清完整版1)（4-1）
01-30
5.11 制作有图标的文件资源管理器——自定义Adapter对象 5.12 还原手机默认桌面——重写clearWallpaper方法 5.13 置换手机背景图——Gallery与setWallpaper整合实现 5.14 撷取手机现存桌面——getWallpaper与...
android自定义 ProgressBar(继承自View)
qndroid的专栏
05-20 1697
github上已经有如此多漂亮的progressbar,可还是满足不了美工MM的胃口，无奈只得根据美工的需求，自定义一个符合要求的progrssbar了，美工给的效果图如下： 好看是好看，还要求上面指示器的颜色随着进度去改变，上网找了一番还真没有发现完全符合要求的，只好自己想办法了。         思路：1.肯定的继承View或者progressbar去重写，由于我对progre
一个显示等级进度的控件，可以自定义等级值、颜色、游标等。
未来很长，但我会努力的走下去。
11-08 1120
一个显示等级进度的控件，可以自定义等级值、颜色、游标等。
Android自定义View之ProgressBar出场记
weixin_30371469的博客
05-01 148
关于自定义View，我们前面已经有三篇文章在介绍了，如果筒子们还没阅读，建议先看一下，分别是android自定义View之钟表诞生记、android自定义View之仿通讯录侧边栏滑动，实现A-Z字母检索、android自定义View之NotePad出鞘记。这三篇文章中所述的自定义View都还是比较简单的，我们只使用了其中的绘图API，那么今天我们来看看自定义ProgressBar，在这个过程中...
Android自定义view之ProgressBar的实现
Richardwei~的专栏
05-25 1359
在学习自定义view之前我们必须先来了解一下attrs.xml这个文件，这个文件实际上定义了所有的控件的属性，就是我们在布局文件中设置的各类属性，因此在自定义控件属性的时候，创建一个attrs.xml文件来定义控件属性是十分重要的，下面我们开始进行项目的第一部分 一、attrs.xml文件的编写 首先在values文件下新建attrs.xml文件
Android那些事儿之自定义进度条
weixin_33796205的博客
05-08 412
Android原生控件只有横向进度条一种，而且没法变换样式，比如原生rom的样子 很丑是吧，当伟大的产品设计要求更换前背景，甚至纵向，甚至圆弧状的，咋办，比如 ok，我们开始吧： 一）变换前背景 先来看看progressbar的属性： <ProgressBarandroid:id="@+id/progressBar"...
Android自定义控件——手把手教你写出Google样式的ProgressBar
顾明伟
09-23 3373
本文详细地给大家介绍一下如何实现一个Google样式ProgressBar 这里有个相对简单的热热身先        Android 自定义控件——Simple_Loading 看图先： balalala 好了，我们要实现的就是这样的效果 分析：根据前面链接中的重写方式，我们需要重写一个View，然后在View中通过计算来画圆弧，从而实现一个LoadingBar，我们回过头来想想，既然系
android自定义view实现progressbar的效果
xiangzhihong8的专栏
08-10 1519
一键清理是很多Launcher都会带有的功能，其效果也比较美观。实现方式也许有很多中，其中常见的是使用图片drawable来完成的，具体可以参考这篇文章：模仿实现360桌面水晶球式的一键清理特效。本文另辟蹊径，使用自定义View来完成同样的效果，性能、效率更高。   ProgressWheel相信很多人并不陌生，我参考了其中一些代码。有意思的是，看完它的代码，发现其中隐藏了没有使用的矩形进度条，
android progressbar自定义图片
最新发布
05-30
在Android中，你可以使用ProgressBar的`setProgressDrawable()`方法来设置自定义进度条的图像。以下是一个示例代码： 1.在xml布局文件中，添加ProgressBar控件： ```xml <ProgressBar android:id="@+id/...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小_爽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值