Android自定义进度条——圆角横向进度条_android 自定义圆角进度条-程序员宅基地

技术标签: RectF  进度条  invalidate  onMeasure  android控件  Android  

Android自定义进度条——圆角横向进度条

1.本文将向你介绍自定义进度条的写法,比较简单,但还是有些知识点是需要注意的:

  • invalidate()方法
  • RectF方法的应用
  • onMeasure方法的应用

2.原理
画3层圆角矩形,底层为黑色,第二层为灰色,最上一层为进度条颜色,示例图如下:
这里写图片描述

3.效果图
这里写图片描述
实现圆角进度条还有很多其他方法,比如在Progress控件里填充圆角图片,通过拉伸图片来达到预想的效果,虽然听起来很简单,但实现起来还是有些麻烦的。

4.解说方法
(1)invalidate()方法
invalidate()是用来刷新View的,必须是在UI线程中进行工作。比如在修改某个view的显示时, 调用invalidate()才能看到重新绘制的界面。invalidate()的调用是把之前的旧的view从主UI线程队列中pop掉。一般在自定义控件中会用到这个方法。

(2)RectF方法的应用
RectF是用来绘画矩形的方法。
RectF(left,top,right,bottom),四个参数的含义分别是父控件距离矩形左上右下边距的距离,以下用图来说明:
这里写图片描述

drawRoundRect方法是用来绘制圆角矩形的,它的参数如下:
参数说明
rect:RectF对象。
rx:x方向上的圆角半径。
ry:y方向上的圆角半径。
paint:绘制时所使用的画笔。

(3)onMeasure方法
指定自定义控件在屏幕上的大小,onMeasure方法的两个参数是由上一层控件 传入的大小,而且是模式和尺寸混合在一起的数值,需要MeasureSpec.getMode(widthMeasureSpec) 得到模式,MeasureSpec.getSize(widthMeasureSpec)得到尺寸。

onMeasure的几种模式分别为EXACTLY,AT_MOST,UNSPECIFIED。

[1]MeasureSpec.EXACTLY
MeasureSpec.EXACTLY是精确尺寸,当我们将控件的layout_width或layout_height指定为具体数值时如andorid:layout_width=”50dip”,或者为FILL_PARENT是,都是控件大小已经确定的情况,都是精确尺寸。

[2]MeasureSpec.AT_MOST
MeasureSpec.AT_MOST是最大尺寸,当控件的layout_width或layout_height指定为WRAP_CONTENT时,控件大小一般随着控件的子空间或内容进行变化,此时控件尺寸只要不超过父控件允许的最大尺寸即可。因此,此时的mode是AT_MOST,size给出了父控件允许的最大尺寸。

[3]MeasureSpec.UNSPECIFIED
MeasureSpec.UNSPECIFIED是未指定尺寸,这种情况不多,一般都是父控件是AdapterView,通过measure方法传入的模式。

5.activity_main.xml文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.progresstest.MainActivity"
    tools:ignore="MergeRootFrame" >
    <com.example.progresstest.ProgressViewTest 
        android:id="@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

6.ProgressViewTest.java文件

package com.example.progresstest;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class ProgressViewTest extends View {
    
    /**进度条最大值*/
    private float maxCount;
    /**进度条当前值*/
    private float currentCount;
    /**画笔*/
    private Paint mPaint;

    private int mWidth,mHeight;
    public ProgressViewTest(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
    }

    public ProgressViewTest(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public ProgressViewTest(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    /***
     * 设置最大的进度值
     * @param maxCount
     */
    public void setMaxCount(float maxCount) {
        this.maxCount = maxCount;
    }
    /**
     * 得到最大进度值
     */
    public double getMaxCount(){
        return maxCount;
    }
    /***
     * 设置当前的进度值
     * @param currentCount
     */
    public void setCurrentCount(float currentCount) {
        this.currentCount = currentCount > maxCount ? maxCount : currentCount;
        /**
         * invalidate()是用来刷新View的,必须是在UI线程中进行工作。比如在修改某个view的显示时,
         * 调用invalidate()才能看到重新绘制的界面。invalidate()的调用是把之前的旧的view从主UI
         * 线程队列中pop掉。 
         */
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);

        mPaint = new Paint();
        //设置抗锯齿效果
        mPaint.setAntiAlias(true);
        //设置画笔颜色
        mPaint.setColor(Color.BLACK);
        int round = mHeight/2;
        /**
         * RectF:绘制矩形,四个参数分别是left,top,right,bottom
         * 类型是单精度浮点数
         */
        RectF rf = new RectF(0, 0, mWidth, mHeight);
        /*绘制圆角矩形,背景色为画笔颜色*/
        canvas.drawRoundRect(rf, round, round, mPaint);
        /*设置progress内部是灰色*/
        mPaint.setColor(Color.rgb(211, 211, 211));
        RectF rectBlackBg = new RectF(2, 2, mWidth-2, mHeight-2);
        canvas.drawRoundRect(rectBlackBg, round, round, mPaint);
        //设置进度条进度及颜色
        float section = currentCount/maxCount;
        RectF rectProgressBg = new RectF(3, 3, (mWidth-3)*section, mHeight-3);
        if(section!=0.0f){
            mPaint.setColor(Color.GREEN);
        }else{
            mPaint.setColor(Color.TRANSPARENT);
        }
        canvas.drawRoundRect(rectProgressBg, round, round, mPaint);
    }
    //dip * scale + 0.5f * (dip >= 0 ? 1 : -1)
    private int dipToPx(int dip){
        float scale = getContext().getResources().getDisplayMetrics().density;
        return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));//加0.5是为了四舍五入
    }
    /**指定自定义控件在屏幕上的大小,onMeasure方法的两个参数是由上一层控件
     * 传入的大小,而且是模式和尺寸混合在一起的数值,需要MeasureSpec.getMode(widthMeasureSpec)
     * 得到模式,MeasureSpec.getSize(widthMeasureSpec)得到尺寸
     * 
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        //MeasureSpec.EXACTLY,精确尺寸
        if (widthSpecMode == MeasureSpec.EXACTLY || widthSpecMode == MeasureSpec.AT_MOST) {
            mWidth = widthSpecSize;
        } else {
            mWidth = 0;
        }
        //MeasureSpec.AT_MOST,最大尺寸,只要不超过父控件允许的最大尺寸即可,MeasureSpec.UNSPECIFIED未指定尺寸
        if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) {
            mHeight = dipToPx(20);
        } else {
            mHeight = heightSpecSize;
        }
        //设置控件实际大小
        setMeasuredDimension(mWidth, mHeight);


    }

}

MainActivity.java文件

package com.example.progresstest;

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

public class MainActivity extends ActionBarActivity {
    
    private ProgressViewTest progress;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progress = (ProgressViewTest) findViewById(R.id.progressbar);

        progress.setMaxCount(100);
        new Thread(new Runnable() {

            @Override
            public void run() {
                // TODO Auto-generated method stub
                for (int i = 0; i <=progress.getMaxCount(); i++) {
                    Message msg = new Message();
                    msg.arg1 = i;
                    msg.what = 0x01;
                    handler.sendMessage(msg);
                    try {
                        //每隔0.1秒进度前进1
                        Thread.sleep(100);
                    } catch (InterruptedException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
    Handler handler = new Handler(){
        public void handleMessage(Message msg) {
            if(msg.what==0x01){
                progress.setCurrentCount(msg.arg1);
            }
        };
    };
}

内容比较简单,这里就不贴源码下载地址了。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u013293125/article/details/52583456

智能推荐

程序流程控制_什么是改流程不改代码-程序员宅基地

文章浏览阅读587次。程序流程控制流程控制语句是用来控制程序中各语句执行顺序的语句,可以把语句组合成能完成一定功能的小逻辑模块。其流程控制方式采用结构化程序设计中规定的三种基本流程结构,即:顺序结构分支结构循环结构顺序结构程序从上到下逐行地执行,中间没有任何判断和跳转。分支结构根据条件,选择性地执行某段代码。有if…else和switch-case两种分支语句。循环结构根据循环条件,重复性的执行某段代码。有while、do…while、for三种循环语句。注:JDK1.5提供了foreach_什么是改流程不改代码

js-瀑布流代码-程序员宅基地

文章浏览阅读176次。2019独角兽企业重金招聘Python工程师标准>>> ..._js瀑布流效果代码

CANoe14.0新增这些超实用小功能:主要窗口 | Panel Designer | Option CAN | Option LIN | Option Ethernet | Option J1939_canoe有哪些功能-程序员宅基地

文章浏览阅读2.4k次。CANoe是集单个ECU和整车ECU网络开发、测试和分析功能于一体的综合软件工具。由于其强大的功能,广泛的被OEM和供应商的网络设计工程师、开发和测试工程师所应用,如应用CANoe.Car2x进行C-V2X仿真测试、应用CANoe和vTESTstudio完成TC8车载以太网一致性测试、基于CANoe实现诊断Coding及Flash等,很好地帮助工程师们完成从系统设计到测试的整个开发过程。目前CANoe14.0版本已经发布一段时间了,其中增加了很多新功能,在Vector中国的微信公众号中已经对主要新功能._canoe有哪些功能

好程序员Java教程分享Java必学MySQL数据库应用场景_java开发加mysql字段场景-程序员宅基地

文章浏览阅读159次。  好程序员Java教程分享Java必学之MySQL数据库应用场景,在当前的后台开发中,MySQL应用非常普遍,企业在选拔Java人才时也会考察求职者诸如性能优化、高可用性、备份、集群、负载均衡、读写分离等问题。想要成为高薪Java工程师,一定要熟练掌握MySQL,接下来好程序员Java教程小编就给大家分享MySQL数据库应用场景知识。1、单Master单Master的情况是普遍存在的,对..._java开发加mysql字段场景

湘潭大学计算机科学与技术录取分数线,2016年湘潭大学计算机科学与技术专业在湖南录取分数线...-程序员宅基地

文章浏览阅读124次。类似问题答案2016年厦门大学计算机类(含计算机科学与技术、智能科学与技术、网络专业在湖南录取...学校 地 区 专业 年份 批次 类型 分数 厦门大学 湖南 计算机类(含计算机科学与技术、智能科学与技术、网络 2016 一批 理科 634 学校 地 区 专业 年份 批次 类型 分数 厦门大学 湖南 计算机类(含计算机科学与技术、智能科学与技术、网络 2016 一批 理科 6342016年湘潭大学..._2016湘潭大学计算机专业分数

随便推点

c/c++初学者用什么软件比较好_c++初学者软件-程序员宅基地

文章浏览阅读2.2w次,点赞22次,收藏55次。工欲善其事,必先利其器。在编程领域里,每个人都会有他/她的入门语言,各持己见。很重要的一点是现今的各种编程语言,或多或少都是 C 语言的衍生品,或者是衍生品的衍生品。语言相通,只要 C 语言学好了,上手其他语言问题不大。C 语言的灵魂在于指针,指针可以帮助你更好的理解内存,理解操作系统的工作机理,C++ 就是 C 的衍生品之一,兼容 C 语言。_c++初学者软件

【开发问题】-数据库连接池超时-“Unable to acquire JDBC Connection“-程序员宅基地

文章浏览阅读2.8w次。项目描述:基于Springboot-2.3.7.RELEASE问题描述:1、完成接口开发后,默认启动hikari连接池,配置默认2、完成测试环境的部署3、接口调用超过一定次数或者频率过高,服务报错 Unable to acquire JDBC Connection问题分析:通过分析整体服务的日志,发现错误提示是突然的,在本地通过jmeter进行压测,线程数超过Hikari默认连接数后服务会超时响应,在调整连接池参数,优化sql查询等等方法后仍然会出现该问题,查看mysql_unable to acquire jdbc connection

python换零钱_Python算法之零钱兑换问题的解法-程序员宅基地

文章浏览阅读1.9k次。比如:顾客购物买37元东西,给了100元,要找63元,那最少数量就是1张50元,1张10元,3张1元,一共4张。方法一: 贪心策略解决这个问题,最直观的就是使用贪心策略。我们会从最大面值的钱开始,用最多的数量。有余额再到下一个最大面值,还用最多的数量,一直到1元为止。def chage_give(coins_list, change):solutions = []s_list = sorted(c..._python将一张面额50元的钱币换成1元、5元、10元、20元的零钱,要求每种面额的零钱

将python随机森林模型保存到文件-程序员宅基地

文章浏览阅读9.2k次,点赞2次,收藏38次。https://zhidao.baidu.com/question/1707465980177376940.html你说的问bai题叫模型持久化,就是把学习好的模型保du存起来zhi,以后只要调用这个文件就可以了。每个框dao架都应该有模型持久化函数,以sklearn为例:from sklearn.externals import joblibjoblib.dump(clf, "train_model.m") #存储clf = joblib.load("train_model.m") #._随机森林模型保存

vue中使用天气插件(和风天气)_vue天气组件-程序员宅基地

文章浏览阅读2.6w次,点赞24次,收藏77次。1.进入中国天气网插件首页 中国天气网选择适合项目的插件2.自定义插件样式,登录后生成代码<div id="weather-v2-plugin-simple"></div><script>WIDGET = { CONFIG: { "modules": "02", "background": 5, "tmpColor": "4A4A4A", "tmpSize": 16, "cityColor": "4A4A4A",_vue天气组件

将Hyperledger Composer区块链业务网络部署到Hyperledger Fabric(多个组织)_fabric cello 多组织网络-程序员宅基地

文章浏览阅读765次。将Hyperledger Composer区块链业务网络部署到Hyperledger Fabric(多个组织)本教程深入介绍了跨区域链网络的配置过程,涵盖了多个组织。它概述了配置基于Hyperledger Fabric的多组织区块链网络所需的步骤。双组织区块链网络基于Hyperledger Fabric提供的示例网络。此外,它描述了在任一组织中生成必要的安全工件并保护网络的步骤。一旦配..._fabric cello 多组织网络

推荐文章

热门文章

相关标签