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); } }; }; }

以上所述是小编给大家介绍的Android自定义进度条的圆角横向进度条实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-08-05 05:35:35

Android自定义进度条的圆角横向进度条实例详解的相关文章

Android自定义进度条的圆角横向进度条实例详解_Android

1.本文将向你介绍自定义进度条的写法,比较简单,但还是有些知识点是需要注意的: invalidate()方法 RectF方法的应用 onMeasure方法的应用 2.原理 画3层圆角矩形,底层为黑色,第二层为灰色,最上一层为进度条颜色,示例图如下: 3.效果图   实现圆角进度条还有很多其他方法,比如在Progress控件里填充圆角图片,通过拉伸图片来达到预想的效果,虽然听起来很简单,但实现起来还是有些麻烦的. 4.解说方法 (1)invalidate()方法 invalidate()是用来刷新

Android 使用PopupWindow实现弹出更多的菜单实例详解

最近想要做一个弹出更多的菜单,而原生的弹出菜单却不是我们想要的效果,所以必然要自定义菜单咯.本人也是借鉴网上的资料进行封装的,感觉还蛮不错的. 原生的菜单如下图: 自定义之后的效果图: 是不是看到这里之后,对比可知,原生的效果不太理想,所以还是再自己定义吧! 1.PopupWindow可以说是一个浮动在Activity之上的容器,通常用来显示自定义的视图.弹出菜单的封装PopMenuMore /** * 对弹出菜单的封装. * http://blog.csdn.net/maosidiaoxian

Android获取arrays.xml里的数组字段值实例详解

Android获取arrays.xml里的数组字段值实例详解 比如在arrays.xml里: <!--leo added for KYLIN-496--> <string-array name="reboot_item"> <item>Reboot</item> <item>Recovery</item> <item>BootLoader</item> </string-array&g

Android中ViewFlipper的使用及设置动画效果实例详解_Android

本文实例讲述了Android中ViewFlipper的使用及设置动画效果.分享给大家供大家参考,具体如下: 说到左右滑动,其实实现左右滑动的方式很多,有ViewPaer,自定义实现Viewgroup,gallery等都可以达到这种效果.这里做下ViewFliper实现左右滑动的效果. 会用到以下的技术: 1.ViewFlipper 2.GestureDetector 3.Animation 主要是这三个类在起作用. ViewFlipper,不妨把它看做一个容器吧,你可以把许多的View放在这个容

Android中ViewFlipper的使用及设置动画效果实例详解

本文实例讲述了Android中ViewFlipper的使用及设置动画效果.分享给大家供大家参考,具体如下: 说到左右滑动,其实实现左右滑动的方式很多,有ViewPaer,自定义实现Viewgroup,gallery等都可以达到这种效果.这里做下ViewFliper实现左右滑动的效果. 会用到以下的技术: 1.ViewFlipper 2.GestureDetector 3.Animation 主要是这三个类在起作用. ViewFlipper,不妨把它看做一个容器吧,你可以把许多的View放在这个容

Android OkHttp Post上传文件并且携带参数实例详解

Android OkHttp Post上传文件并且携带参数 这里整理一下 OkHttp 的 post 在上传文件的同时,也要携带请求参数的方法. 使用 OkHttp 版本如下: compile 'com.squareup.okhttp3:okhttp:3.4.1' 代码如下: protected void post_file(final String url, final Map<String, Object> map, File file) { OkHttpClient client = n

jQuery实现的自定义弹出层效果实例详解_jquery

本文实例讲述了jQuery实现的自定义弹出层效果.分享给大家供大家参考,具体如下: dialog.css: #DialogBySHFLayer { width:100%; height:100%; left:0; top:0; position:fixed; z-index:500; background-color:#333333; filter:alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4; } /*弹出的提示框*/ #DialogByS

我的Android进阶之旅------&amp;gt;Android自定义View实现带数字的进度条(NumberProgressBar)

今天在Github上面看到一个来自于 daimajia所写的关于Android自定义View实现带数字的进度条(NumberProgressBar)的精彩案例,在这里分享给大家一起来学习学习!同时感谢daimajia的开源奉献! 第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 版权声明:本文为[欧阳鹏]原创文章,欢迎转载,转载请注明出处! [http://blog.csdn.net/ouyang_peng/article/deta

Android自定义View实现带数字的进度条实例代码_Android

第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示   如上图所示:自定义的带数字的进度条的library项目的结构图   如上图所