Android自定义圆角矩形进度条2

效果图：

或

方法讲解：

（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方法传入的模式。

实现步骤：

a、在values文件夹下新建attrs.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

<declare-styleable name="CircleProgressBar">
<attr name="croundColor" format="color"/>
<attr name="croundProgressColor" format="color"/>
<attr name="cfillColor" format="color"/>
<attr name="croundWidth" format="dimension"></attr>
<attr name="croundProgressWidth" format="dimension"></attr>
<attr name="ctextColor" format="color" />
<attr name="ctextSize" format="dimension" />
<attr name="cnumberSize" format="dimension" />
<attr name="cparaLable" format="string" />
<attr name="cunitLable" format="string" />
</declare-styleable>

<declare-styleable name="RoundRectProgressBar">
<attr name="cbarRoundColor" format="color"/>
<attr name="cbarProgressColor" format="color"/>
<attr name="cbarFillColor" format="color"/>
<attr name="cbarOrientation">
　　<enum name="HORIZONTAL" value="0"></enum>
　　<enum name="VERTICAL" value="1"></enum>
</attr>
</declare-styleable>

</resources>

　　

b、新建RoundRectProgressBar类继承View

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

/**
* 自定义圆角矩形进度条view
*
* @author xl
*/
public class RoundRectProgressBar extends View {

private final static String TAG = RoundRectProgressBar.class.getSimpleName();

/**
* 画笔对象的引用
*/
private Paint paint;

/**
* 圆角环的颜色
*/
private int roundColor;

/**
* 进度的颜色
*/
private int fillProgressColor;

/**
* 填充的颜色
*/
private int fillColor;

/**
* 圆角矩形宽度
*/
private int roundWidth;

/**
* 圆角矩形高度
*/
private int roundHeight;

/**
* 进度条方向，0水平，1垂直
*/
private int barOrientation;

/**
* 进度条最大值
*/
private float max = 100;

/**
* 进度条当前值
*/
private float progress = 30;

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

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

public RoundRectProgressBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
//获取画笔
paint = new Paint();
TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundRectProgressBar);
//获取自定义属性和默认值
roundColor = mTypedArray.getColor(R.styleable.RoundRectProgressBar_cbarRoundColor, Color.RED);
fillProgressColor = mTypedArray.getColor(R.styleable.RoundRectProgressBar_cbarProgressColor, Color.GREEN);
fillColor = mTypedArray.getColor(R.styleable.RoundRectProgressBar_cbarFillColor, Color.BLUE);
barOrientation = mTypedArray.getInt(R.styleable.RoundRectProgressBar_cbarOrientation, 0);
//回收TypedArray资源
mTypedArray.recycle();
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//设置抗锯齿效果
paint.setAntiAlias(true);
//设置画笔颜色
paint.setColor(roundColor);
//进度方向
if (barOrientation == 0) {
//水平，向右
try {
int round = roundHeight / 2;
//RectF：绘制矩形，四个参数分别是left,top,right,bottom,类型是单精度浮点数
RectF rf = new RectF(0, 0, roundWidth, roundHeight);
//绘制圆角矩形，背景色为画笔颜色
canvas.drawRoundRect(rf, round, round, paint);
//设置progress内部是灰色
paint.setColor(fillColor);
RectF rectBlackBg = new RectF(2, 2, roundWidth - 2, roundHeight - 2);
canvas.drawRoundRect(rectBlackBg, round, round, paint);
//设置进度条进度及颜色
float section = progress / max;
RectF rectProgressBg = new RectF(2, 2, (roundWidth - 2) * section, roundHeight - 2);
if (section != 0.0f) {
paint.setColor(fillProgressColor);
} else {
paint.setColor(Color.TRANSPARENT);
}
canvas.drawRoundRect(rectProgressBg, round, round, paint);
} catch (Exception e) {
e.printStackTrace();
}
} else {
//垂直，向上
try {
int round = roundWidth / 2;
//RectF：绘制矩形，四个参数分别是left,top,right,bottom,类型是单精度浮点数
RectF rf = new RectF(0, 0, roundWidth, roundHeight);
//绘制圆角矩形，背景色为画笔颜色
canvas.drawRoundRect(rf, round, round, paint);
//设置progress内部是灰色
paint.setColor(fillColor);
RectF rectBlackBg = new RectF(2, 2, roundWidth - 2, roundHeight - 2);
canvas.drawRoundRect(rectBlackBg, round, round, paint);
//设置进度条进度及颜色
float section = progress / max;
RectF rectProgressBg = new RectF(2, roundHeight - 2 - (roundHeight - 4) * section, roundWidth - 2, roundHeight - 2);
if (section != 0.0f) {
paint.setColor(fillProgressColor);
} else {
paint.setColor(Color.TRANSPARENT);
}
canvas.drawRoundRect(rectProgressBg, round, round, paint);
} catch (Exception e) {
e.printStackTrace();
}
}
}

/**
* dip转px
*
* @param dip
* @return
*/
private int dipToPx(int dip) {
float scale = getContext().getResources().getDisplayMetrics().density;
//加0.5是为了四舍五入
return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));
}

/**
* 指定自定义控件在屏幕上的大小,onMeasure方法的两个参数是由上一层控件
* 传入的大小，而且是模式和尺寸混合在一起的数值，需要MeasureSpec.getMode(widthMeasureSpec)
* 得到模式，MeasureSpec.getSize(widthMeasureSpec)得到尺寸
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
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) {
roundWidth = widthSpecSize;
} else {
roundWidth = 0;
}
if (heightSpecMode == MeasureSpec.EXACTLY || heightSpecMode == MeasureSpec.AT_MOST) {
roundHeight = heightSpecSize;
} else {
roundHeight = 0;
}
//MeasureSpec.AT_MOST，最大尺寸，只要不超过父控件允许的最大尺寸即可，MeasureSpec.UNSPECIFIED未指定尺寸
//if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) {
// roundHeight = dipToPx(20);
//} else {
// roundHeight = heightSpecSize;
//}
//设置控件实际大小
setMeasuredDimension(roundWidth, roundHeight);
}

/**
* 设置进度
*
* @param progress
*/
public synchronized void setProgress(float progress) {
if (progress < 0) {
throw new IllegalArgumentException("value can not be negative");
}
if (progress > max) {
this.progress = max;
} else {
this.progress = progress;
}
postInvalidate();
}

/**
* 设置最大值
*
* @param max
*/
public synchronized void setMax(float max) {
if (max < 0) {
throw new IllegalArgumentException("value can not be negative");
}
this.max = max;
}

}

　　

c、布局文件中引用activity_main.xml

<ups.invt.com.view.RoundRectProgressBar
android:id="@+id/bar"
android:layout_width="20dp"
android:layout_height="100dp"
android_custom:cbarRoundColor="@color/transparent"
android_custom:cbarFillColor="@color/white"
android_custom:cbarProgressColor="@color/bar_fill_color"
android_custom:cbarOrientation="VERTICAL"
android:layout_centerInParent="true"/>

　　

d、MainActivity.java中设置进度

progress = (RoundRectProgressBar) findViewById(R.id.bar);
progress.setMax(100);

progress.setProgress(80);

完！！！
————————————————

参考于：https://blog.csdn.net/xialong_927/article/details/86596932

原文地址：https://www.cnblogs.com/changyiqiang/p/11399187.html

时间： 2024-08-02 20:38:10

Android自定义圆角矩形进度条2的相关文章

android圆角矩形进度条

最近做项目,有个一个需求,就是圆角进度条.效果图如下. 当时项目时间很紧,没多去想怎么实现最佳,就直接把美工给的圆角进度条裁剪成了四份.来做 Canvas 剪切绘制.这样虽然也能达到效果,但是服用性很差.最近网上搜索了很长时间,发现Paint画笔,有遮挡层的功能.android.graphics.Paint.setXfermode(Xfermode xfermode) .其中一个参数就是 Mode.DST_OUT 显示底图与上层图非交集的底图图像.于是就有个思路,先绘制圆角矩形进度条,然后设置画

Android自定义文本的进度条

工作中要求实现如下图中进度条(进度条上面是带比例数的文本,进度条颜色与比例数对应),写下自己的实现过程. 整体思路:Android中ProgressBar控件不支持自定义文本,所以需要写自定义progressBar. 1.progressBar上要自定义文本,需要重写onDraw()方法: 2.为实现进度是红色,底色是灰色效果,需要自定义progressBar样式 代码实现: 1.自定义的ProgressBar实现代码: 1 package com.example.myprogressbar;

Android 自定义对话框，进度条，下拉刷新等

这个demo集合了自定义对话框,进度条,下拉刷新以及popup弹出框等.是学习了网上开源项目后,抽取集合了常用对话框,进度条,下拉刷新以及popup弹出框等.现在结构目录简单,更易于学习和扩展使用.注释都卸载代码.下面进行简单的介绍以及部分代码展示. 本文demo下载:点击 1.整体实现的效果图 2.项目结构图 这上面项目结构图也是一目了然,有什么功能展示.大家也看到了,这上面类有点多,如果全部贴出来,不大可能,有兴趣下载本文源码. 3.看看基础类BaseActivity 我就贴一下基础类,还有

Android开发之自定义圆角矩形进度对话框

方式一:自定义对话框 public class ProgersssDialog extends Dialog { private ImageView img; private TextView txt; public ProgersssDialog(Context context) { super(context, R.style.progress_dialog); //加载布局文件 View view= View.inflate(context, R.layout.progress_dialo

Android 自定义View——动态进度条

效果图: 这个是看了梁肖的demo,根据他的思路自己写了一个,但是我写的这个貌似计算还是有些问题,从上面的图就可以看出来,左侧.顶部.右侧的线会有被截掉的部分,有懂得希望能给说一下,改进一下,这个过程还是有点曲折的,不过还是觉得收获挺多的.比如通动画来进行动态的展示(之前做的都是通过Handler进行更新的所以现在换一种思路觉得特别好),还有圆弧的起止角度,矩形区域的计算等!关于绘制我们可以循序渐进,比如最开始先画圆,然后再画周围的线,最后设置动画部分就可以了.不多说了,上代码了. 代码 自定义

Android自定义View——圆形进度条式按钮

介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图. 和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态.而且他说圆形进度的功能已经实现了.那么我们只需要对中间的两个状态做处理就行了. 先来看看实现的效果图: 上面说了我们只需要处理中间状态的变化就可以了,对于进度的处理直接使用了弘洋文章中实现: http://blog.csdn.net/lmj623565791/article/details/43371299 下面开始具体实现. 具体实

android自定义渐变圆环进度条

先看下效果: 分析:比较常见于扫描结果.进度条等场景 利用canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)绘制圆弧 Paint的一些属性定义粗细.颜色.样式等 LinearGradient实现颜色的线型渐变 同样的道理,可以画出长条进度条,扇图饼图等,感兴趣可以试下.. package com.liujing.progressviewdemo; /*** *

Android简易实战教程--第十七话《自定义彩色环形进度条》

转载请注明出处:http://blog.csdn.net/qq_32059827/article/details/52203533   点击打开链接 在Android初级教程里面,介绍了shape用法的理论知识,再来完成这个小案例将会变得非常简单哦.(欢迎学习阅读):http://blog.csdn.net/qq_32059827/article/details/52203347 点击打开链接 这一篇就针对这个知识点,完成一个自定义的彩色进度条.系统自带的环形进度条是黑白相间的,如果你不是色盲,

Android开发之自定义圆角矩形图片ImageView的实现

android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap,然后进行裁剪对应的圆角矩形的bitmap,然后在onDraw()进行绘制圆角矩形图片输出. 效果图如下: 自定义的圆形的ImageView类的实现代码如下: package com.xc.xcskin.view; import android.content.Context; import and