前三种实现方式代码出自:
http://stormzhang.com/openandroid/2013/11/15/android-custom-loading/
(源码下载)http://download.csdn.net/detail/chaoyu168/9616035
最近一直在学习自定义控件,搜了许多大牛们Blog里分享的小教程,也上GitHub找了一些类似的控件进行学习。发现读起来都不太好懂,就想写这么一篇东西作为学习笔记吧。
一、控件介绍:
进度条在App中非常常见,例如下载进度、加载图片、打开文章、打开网页等等……都需要这么一个效果让用户知道我们的App正在读取,以构造良好的交互。如果没有这样一个效果的话,用户没法知道东西有没有下载好、图片加载了没有、文章打开了没……会让用户很不爽。基于这样的情景我们的UI设计师们创造了这样一个控件。
二、这篇文章会涉及的知识点:
跟我一样刚入门的Android菜鸟们,我推荐大家先了解一下这些知识点再往下看。这些知识点我也会推荐一些博客给大家看看,更推荐大家看文档里的解释,当然大牛们可以直接无视……
1、ClipDrawable类:能够对一个drawable类进行剪切操作(即只显示某一部分的区域,另一部分隐藏),显示多大的区域由level控制(level取值是0~10000)
【博客:http://blog.csdn.net/lonelyroamer/article/details/8244777】、没文档的可以在这看【http://www.apihome.cn/api/android/ClipDrawable.html】
2、自定义View:guolin大神的深入学习View四部曲
【Android LayoutInflater原理分析,带你一步步深入了解View——http://blog.csdn.net/guolin_blog/article/details/12921889】
【Android视图绘制流程完全解析,带你一步步深入了解View——http://blog.csdn.net/guolin_blog/article/details/16330267】
【Android视图状态及重绘流程分析,带你一步步深入了解View——http://blog.csdn.net/guolin_blog/article/details/17045157】
【Android自定义View的实现方法,带你一步步深入了解View——http://blog.csdn.net/guolin_blog/article/details/17357967】
3、没看过我写的:Android自定义控件——老版优酷三级菜单的话,或许需要看看这个:
【RotateAnimation详解——http://blog.csdn.net/u012403246/article/details/41415799】
三、Android上的实现方式:
(前三种方法比较简单,第四种方法是GitHub项目的解析,对前三种没兴趣可以直接跳到后边……)
1、效果图:
将进度条的变换过程分解为一帧一帧的图片,将这些一帧一帧的图片连起来构成一个动画。常用于:手机阅读网页、逛社区时,加载图片、文章等不需要清楚知道加载进度,但是需要知道是否进行加载的情景。
这种方法实现可以通过创建一个animation-list的XML文件,然后给系统API提供的ProgressBar的indeterminateDrawable属性就可以了。(这个属性应该是类似于设置一个动画吧……)
XML:
- <?xml version="1.0" encoding="utf-8"?>
- <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
- android:oneshot="false" >
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_01"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_02"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_03"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_04"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_05"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_06"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_07"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_08"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_09"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_10"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_11"
- android:gravity="left"/>
- </item>
- <item android:duration="150" >
- <clip
- android:clipOrientation="horizontal"
- android:drawable="@drawable/loading_12"
- android:gravity="left"/>
- </item>
- </animation-list>
- <ProgressBar
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:indeterminateDrawable="@drawable/progressbar1"
- />
2 、效果图:
在上一篇有关自定义控件的博客里我们使用了一个RotateAnimation类来实现旋转效果 (http://blog.csdn.net/u012403246/article/details/41309161),其实,我们在这里也可以把一张图片,通过旋转,达到我们要的效果。本质上和上一种方法没多大区别。
我们只需要创建一个rotate的XML,对其属性进行一些简单的设置,然后加入我们要用的图片就可以了。
XML:
- <?xml version="1.0" encoding="utf-8"?>
- <rotate xmlns:android="http://schemas.android.com/apk/res/android"
- android:pivotX="50%"
- android:pivotY="50%"
- android:fromDegrees="0"
- android:toDegrees="360"
- android:interpolator="@android:anim/accelerate_decelerate_interpolator" >
- <bitmap
- android:antialias="true"
- android:filter="true"
- android:src="@drawable/loading_360"/>
- </rotate>
- <ProgressBar
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:indeterminateDrawable="@drawable/progressbar2"/>
3、效果图:
我们可以弄两张照片,第一张是纯黑色的,然后把这张照片中心挖一个圆出来,圆区域弄成白色,挖出来的圆弄成第二张照片。我们不妨叠加显示两张照片,刚开始把第二张完全“遮住”,随着加载进度的增加,我们减少遮住的区域把第二张照片慢慢的显示出来。
Android上刚好就有这么一个ClipDrawable类,能够实现剪裁的过程。我们来看看怎么通过这样的方式自定义一个进度条控件。
代码:
- public class MyProgressBar extends FrameLayout{
- private boolean running;
- private int progress = 0;
- private static final int MAX_PROGRESS = 10000;
- private ClipDrawable clip;
- private Handler handler = new Handler(){
- @Override
- public void handleMessage(android.os.Message msg) {
- if(msg.what == 0x123)
- clip.setLevel(progress);
- }
- };
- public MyProgressBar(Context context){
- this(context,null,0);
- }
- public MyProgressBar(Context context,AttributeSet attrs){
- this(context,null,0);
- }
- public MyProgressBar(Context context, AttributeSet attrs, int defStyle) {
- super(context, attrs, defStyle);
- Init(context);
- }
- public void Init(Context context){
- View view = LayoutInflater.from(context).inflate(R.layout.view, null);
- ImageView iv = (ImageView)view.findViewById(R.id.progress_img);
- addView(view);
- clip = (ClipDrawable)iv.getDrawable();
- Thread thread = new Thread(new Runnable() {
- @Override
- public void run() {
- running = true;
- while(running){
- handler.sendEmptyMessage(0x123);
- if(progress == MAX_PROGRESS)
- progress = 0;
- progress += 100;
- try {
- Thread.sleep(18);
- } catch (InterruptedException e) {
- e.printStackTrace();
- }
- }
- }
- });
- thread.start();
- }
- public void stop(){
- progress = 0;
- running = false;
- }
- }
通过代码我们可以看到,逻辑非常简单,关键就在于ClipDrawable的setLevel()方法,这个是设置剪裁效果的。
4、效果图:
实现一个View的子类——Progress Wheel类,实现进度条效果。具体的内容我都写在了注释上,如果不了解自定义控件的知识,可以去阅读guolin博客里自定义View四部曲的讲解,讲的挺好的。
代码:
- public class ProgressWheel extends View {
- //绘制View用到的各种长、宽带大小
- private int layout_height = 0;
- private int layout_width = 0;
- private int fullRadius = 100;
- private int circleRadius = 80;
- private int barLength = 60;
- private int barWidth = 20;
- private int rimWidth = 20;
- private int textSize = 20;
- private float contourSize = 0;
- //与页边的间距
- private int paddingTop = 5;
- private int paddingBottom = 5;
- private int paddingLeft = 5;
- private int paddingRight = 5;
- //View要绘制的颜色
- private int barColor = 0xAA000000;
- private int contourColor = 0xAA000000;
- private int circleColor = 0x00000000;
- private int rimColor = 0xAADDDDDD;
- private int textColor = 0xFF000000;
- //绘制要用的画笔
- private Paint barPaint = new Paint();
- private Paint circlePaint = new Paint();
- private Paint rimPaint = new Paint();
- private Paint textPaint = new Paint();
- private Paint contourPaint = new Paint();
- //绘制要用的矩形
- @SuppressWarnings("unused")
- private RectF rectBounds = new RectF();
- private RectF circleBounds = new RectF();
- private RectF circleOuterContour = new RectF();
- private RectF circleInnerContour = new RectF();
- //动画
- //每次绘制要移动的像素数目
- private int spinSpeed = 2;
- //绘制过程的时间间隔
- private int delayMillis = 0;
- int progress = 0;
- boolean isSpinning = false;
- //其他
- private String text = "";
- private String[] splitText = {};
- /**
- * ProgressWheel的构造方法
- *
- * @param context
- * @param attrs
- */
- public ProgressWheel(Context context, AttributeSet attrs) {
- super(context, attrs);
- parseAttributes(context.obtainStyledAttributes(attrs,
- R.styleable.ProgressWheel));
- }
- //----------------------------------
- //初始化一些元素
- //----------------------------------
- /*
- * 调用这个方法时,使View绘制为方形
- * From: http://www.jayway.com/2012/12/12/creating-custom-android-views-part-4-measuring-and-how-to-force-a-view-to-be-square/
- *
- */
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- // 首先我们要调用超类的onMeasure借口
- // 原因是我们自己去实现一个方法获得长度、宽度太麻烦了
- // 使用超类的的方法非常方便而且让复杂的细节可控
- super.onMeasure(widthMeasureSpec, heightMeasureSpec);
- // 在这里我们不能使用getWidth()和getHeight()。
- // 因为这两个方法只能在View的布局完成后才能使用,而一个View的绘制过程是先绘制元素,再绘制Layout
- // 所以我们必须使用getMeasuredWidth()和getMeasuredHeight()
- int size = 0;
- int width = getMeasuredWidth();
- int height = getMeasuredHeight();
- int widthWithoutPadding = width - getPaddingLeft() - getPaddingRight();
- int heigthWithoutPadding = height - getPaddingTop() - getPaddingBottom();
- // 最后我们用一些简单的逻辑去计算View的大小并调用setMeasuredDimension()去设置View的大小
- // 在比较View的长宽前我们不考虑间距,但当我们设置View所需要绘制的面积时,我们要考虑它
- // 不考虑间距的View(View内的实际画面)此时就应该是方形的,但是由于间距的存在,最终View所占的面积可能不是方形的
- if (widthWithoutPadding > heigthWithoutPadding) {
- size = heigthWithoutPadding;
- } else {
- size = widthWithoutPadding;
- }
- // 如果你重写了onMeasure()方法,你必须调用setMeasuredDimension()方法
- // 这是你设置View大小的唯一途径
- // 如果你不调用setMeasuredDimension()方法,父控件会抛出异常,并且程序会崩溃
- // 如果我们使用了超类的onMeasure()方法,我们就不是那么需要setMeasuredDimension()方法
- // 然而,重写onMeasure()方法是为了改变既有的绘制流程,所以我们必须调用setMeasuredDimension()方法以达到我们的目的
- setMeasuredDimension(size + getPaddingLeft() + getPaddingRight(), size + getPaddingTop() + getPaddingBottom());
- }
- /**
- * 使用onSizeChanged方法代替onAttachedToWindow获得View的面积
- * 因为这个方法会在测量了MATCH_PARENT和WRAP_CONTENT后马上被调用
- * 使用获得的面积设置View
- */
- @Override
- protected void onSizeChanged(int w, int h, int oldw, int oldh) {
- super.onSizeChanged(w, h, oldw, oldh);
- // Share the dimensions
- layout_width = w;
- layout_height = h;
- setupBounds();
- setupPaints();
- invalidate();
- }
- /**
- * 设置我们想要绘制的progress wheel的颜色
- */
- private void setupPaints() {
- barPaint.setColor(barColor);
- barPaint.setAntiAlias(true);
- barPaint.setStyle(Style.STROKE);
- barPaint.setStrokeWidth(barWidth);
- rimPaint.setColor(rimColor);
- rimPaint.setAntiAlias(true);
- rimPaint.setStyle(Style.STROKE);
- rimPaint.setStrokeWidth(rimWidth);
- circlePaint.setColor(circleColor);
- circlePaint.setAntiAlias(true);
- circlePaint.setStyle(Style.FILL);
- textPaint.setColor(textColor);
- textPaint.setStyle(Style.FILL);
- textPaint.setAntiAlias(true);
- textPaint.setTextSize(textSize);
- contourPaint.setColor(contourColor);
- contourPaint.setAntiAlias(true);
- contourPaint.setStyle(Style.STROKE);
- contourPaint.setStrokeWidth(contourSize);
- }
- /**
- * 设置元素的边界
- */
- private void setupBounds() {
- // 为了保持宽度和长度的一致,我们要获得layout_width和layout_height中较小的一个,从而绘制一个圆
- int minValue = Math.min(layout_width, layout_height);
- // 计算在绘制过程中在x,y方向的偏移量
- int xOffset = layout_width - minValue;
- int yOffset = layout_height - minValue;
- // 间距加上偏移量
- paddingTop = this.getPaddingTop() + (yOffset / 2);
- paddingBottom = this.getPaddingBottom() + (yOffset / 2);
- paddingLeft = this.getPaddingLeft() + (xOffset / 2);
- paddingRight = this.getPaddingRight() + (xOffset / 2);
- int width = getWidth(); //this.getLayoutParams().width;
- int height = getHeight(); //this.getLayoutParams().height;
- rectBounds = new RectF(paddingLeft,
- paddingTop,
- width - paddingRight,
- height - paddingBottom);
- circleBounds = new RectF(paddingLeft + barWidth,
- paddingTop + barWidth,
- width - paddingRight - barWidth,
- height - paddingBottom - barWidth);
- circleInnerContour = new RectF(circleBounds.left + (rimWidth / 2.0f) + (contourSize / 2.0f), circleBounds.top + (rimWidth / 2.0f) + (contourSize / 2.0f), circleBounds.right - (rimWidth / 2.0f) - (contourSize / 2.0f), circleBounds.bottom - (rimWidth / 2.0f) - (contourSize / 2.0f));
- circleOuterContour = new RectF(circleBounds.left - (rimWidth / 2.0f) - (contourSize / 2.0f), circleBounds.top - (rimWidth / 2.0f) - (contourSize / 2.0f), circleBounds.right + (rimWidth / 2.0f) + (contourSize / 2.0f), circleBounds.bottom + (rimWidth / 2.0f) + (contourSize / 2.0f));
- fullRadius = (width - paddingRight - barWidth) / 2;
- circleRadius = (fullRadius - barWidth) + 1;
- }
- /**
- * 从XML中解析控件的属性
- *
- * @param a the attributes to parse
- */
- private void parseAttributes(TypedArray a) {
- barWidth = (int) a.getDimension(R.styleable.ProgressWheel_barWidth,
- barWidth);
- rimWidth = (int) a.getDimension(R.styleable.ProgressWheel_rimWidth,
- rimWidth);
- spinSpeed = (int) a.getDimension(R.styleable.ProgressWheel_spinSpeed,
- spinSpeed);
- delayMillis = a.getInteger(R.styleable.ProgressWheel_delayMillis,
- delayMillis);
- if (delayMillis < 0) {
- delayMillis = 0;
- }
- barColor = a.getColor(R.styleable.ProgressWheel_barColor, barColor);
- barLength = (int) a.getDimension(R.styleable.ProgressWheel_barLength,
- barLength);
- textSize = (int) a.getDimension(R.styleable.ProgressWheel_textSize,
- textSize);
- textColor = (int) a.getColor(R.styleable.ProgressWheel_textColor,
- textColor);
- //如果text是空的,就无视它
- if (a.hasValue(R.styleable.ProgressWheel_text)) {
- setText(a.getString(R.styleable.ProgressWheel_text));
- }
- rimColor = (int) a.getColor(R.styleable.ProgressWheel_rimColor,
- rimColor);
- circleColor = (int) a.getColor(R.styleable.ProgressWheel_circleColor,
- circleColor);
- contourColor = a.getColor(R.styleable.ProgressWheel_contourColor, contourColor);
- contourSize = a.getDimension(R.styleable.ProgressWheel_contourSize, contourSize);
- // 使用TypedArray获得控件属性时必须要注意:使用结束后必须回收TypedArray的对象
- a.recycle();
- }
- //----------------------------------
- //动画
- //----------------------------------
- protected void onDraw(Canvas canvas) {
- super.onDraw(canvas);
- //绘制内圆
- canvas.drawArc(circleBounds, 360, 360, false, circlePaint);
- //绘制边界
- canvas.drawArc(circleBounds, 360, 360, false, rimPaint);
- canvas.drawArc(circleOuterContour, 360, 360, false, contourPaint);
- canvas.drawArc(circleInnerContour, 360, 360, false, contourPaint);
- //绘制条纹
- if (isSpinning) {
- canvas.drawArc(circleBounds, progress - 90, barLength, false,
- barPaint);
- } else {
- canvas.drawArc(circleBounds, -90, progress, false, barPaint);
- }
- //绘制我们想要设置的文字 (并让它显示在圆水平和垂直方向的中心处)
- float textHeight = textPaint.descent() - textPaint.ascent();
- float verticalTextOffset = (textHeight / 2) - textPaint.descent();
- for (String s : splitText) {
- float horizontalTextOffset = textPaint.measureText(s) / 2;
- canvas.drawText(s, this.getWidth() / 2 - horizontalTextOffset,
- this.getHeight() / 2 + verticalTextOffset, textPaint);
- }
- if (isSpinning) {
- scheduleRedraw();
- }
- }
- private void scheduleRedraw() {
- progress += spinSpeed;
- if (progress > 360) {
- progress = 0;
- }
- postInvalidateDelayed(delayMillis);
- }
- /**
- * 判断wheel是否在旋转
- */
- public boolean isSpinning() {
- if(isSpinning){
- return true;
- } else {
- return false;
- }
- }
- /**
- * 重设进度条的值
- */
- public void resetCount() {
- progress = 0;
- setText("0%");
- invalidate();
- }
- /**
- * 停止进度条的旋转
- */
- public void stopSpinning() {
- isSpinning = false;
- progress = 0;
- postInvalidate();
- }
- /**
- * 让进度条开启旋转模式
- */
- public void spin() {
- isSpinning = true;
- postInvalidate();
- }
- /**
- * 让进度条每次增加1(最大值为360)
- */
- public void incrementProgress() {
- isSpinning = false;
- progress++;
- if (progress > 360)
- progress = 0;
- setText(Math.round(((float) progress / 360) * 100) + "%");
- postInvalidate();
- }
- /**
- * 设置进度条为一个确切的数值
- */
- public void setProgress(int i) {
- isSpinning = false;
- progress = i;
- postInvalidate();
- }
- //----------------------------------
- //get和set方法
- //----------------------------------
- /**
- * 设置progress bar的文字并不需要刷新View
- *
- * @param text the text to show ('\n' constitutes a new line)
- */
- public void setText(String text) {
- this.text = text;
- splitText = this.text.split("\n");
- }
- public int getCircleRadius() {
- return circleRadius;
- }
- public void setCircleRadius(int circleRadius) {
- this.circleRadius = circleRadius;
- }
- public int getBarLength() {
- return barLength;
- }
- public void setBarLength(int barLength) {
- this.barLength = barLength;
- }
- public int getBarWidth() {
- return barWidth;
- }
- public void setBarWidth(int barWidth) {
- this.barWidth = barWidth;
- if ( this.barPaint != null ) {
- this.barPaint.setStrokeWidth( this.barWidth );
- }
- }
- public int getTextSize() {
- return textSize;
- }
- public void setTextSize(int textSize) {
- this.textSize = textSize;
- if ( this.textPaint != null ) {
- this.textPaint.setTextSize( this.textSize );
- }
- }
- public int getPaddingTop() {
- return paddingTop;
- }
- public void setPaddingTop(int paddingTop) {
- this.paddingTop = paddingTop;
- }
- public int getPaddingBottom() {
- return paddingBottom;
- }
- public void setPaddingBottom(int paddingBottom) {
- this.paddingBottom = paddingBottom;
- }
- public int getPaddingLeft() {
- return paddingLeft;
- }
- public void setPaddingLeft(int paddingLeft) {
- this.paddingLeft = paddingLeft;
- }
- public int getPaddingRight() {
- return paddingRight;
- }
- public void setPaddingRight(int paddingRight) {
- this.paddingRight = paddingRight;
- }
- public int getBarColor() {
- return barColor;
- }
- public void setBarColor(int barColor) {
- this.barColor = barColor;
- if ( this.barPaint != null ) {
- this.barPaint.setColor( this.barColor );
- }
- }
- public int getCircleColor() {
- return circleColor;
- }
- public void setCircleColor(int circleColor) {
- this.circleColor = circleColor;
- if ( this.circlePaint != null ) {
- this.circlePaint.setColor( this.circleColor);
- }
- }
- public int getRimColor() {
- return rimColor;
- }
- public void setRimColor(int rimColor) {
- this.rimColor = rimColor;
- if ( this.rimPaint != null ) {
- this.rimPaint.setColor( this.rimColor );
- }
- }
- public Shader getRimShader() {
- return rimPaint.getShader();
- }
- public void setRimShader(Shader shader) {
- this.rimPaint.setShader(shader);
- }
- public int getTextColor() {
- return textColor;
- }
- public void setTextColor(int textColor) {
- this.textColor = textColor;
- if ( this.textPaint != null ) {
- this.textPaint.setColor( this.textColor );
- }
- }
- public int getSpinSpeed() {
- return spinSpeed;
- }
- public void setSpinSpeed(int spinSpeed) {
- this.spinSpeed = spinSpeed;
- }
- public int getRimWidth() {
- return rimWidth;
- }
- public void setRimWidth(int rimWidth) {
- this.rimWidth = rimWidth;
- if ( this.rimPaint != null ) {
- this.rimPaint.setStrokeWidth( this.rimWidth );
- }
- }
- public int getDelayMillis() {
- return delayMillis;
- }
- public void setDelayMillis(int delayMillis) {
- this.delayMillis = delayMillis;
- }
- public int getContourColor() {
- return contourColor;
- }
- public void setContourColor(int contourColor) {
- this.contourColor = contourColor;
- if ( contourPaint != null ) {
- this.contourPaint.setColor( this.contourColor );
- }
- }
- public float getContourSize() {
- return this.contourSize;
- }
- public void setContourSize(float contourSize) {
- this.contourSize = contourSize;
- if ( contourPaint != null ) {
- this.contourPaint.setStrokeWidth( this.contourSize );
- }
- }
- }