版本号：1.0日期：2014.5.16版权：© 2014 kince 转载注明出处 这一次主要说一下Android下的进度条。为什么是它呢，由于最近被其各种美轮美奂的设计所倾倒，计划逐渐去实现。另外一个因素也是它也是为数不多的直接继承于View类的控件，从中能够学习到一些自己定义控件的知识。以下列举了一些个人认为还算美丽的进度条。仅供參考。 是不是非常美丽。事实上就像上面图形展示的那样。进度条大体上无非就是这几种形式。这样一来肯定是须要自己定义了，所以方向有两个：要么继承于系统的ProgressBar。要么继承于View类（前者就是如此实现）。那就先看一下系统的进度条吧。 继承于View类。直接子类有AbsSeekBar和ContentLoadingProgressBar。当中AbsSeekBar的子类有SeekBar和RatingBar，可见这二者也是基于ProgressBar实现的。对于ProgressBar的使用，有三个地方须要注意一下： 1、ProgressBar有两个进度。一个是android:progress，另一个是android:secondaryProgress。后者主要是为缓存须要所涉及的。比方在看网络视频时候都会有一个缓存的进度条以及还要一个播放的进度，在这里缓存的进度就能够是android:secondaryProgress，而播放进度就是android:progress。 2、ProgressBar分为确定的和不确定的。上面说的播放进度、缓存等就是确定的。相反地。不确定的就是不清楚、不确定一个操作须要多长时间来完毕，这个时候就须要用的不确定的ProgressBar了。这个是由属性android:indeterminate来控制的，假设设置为true的话。那么ProgressBar就可能是圆形的滚动栏或者水平的滚动栏（由样式决定）。默认情况下，假设是水平进度条，那么就是确定的。 3、ProgressBar的样式设定事实上有两种方式。在API文档中说明的方式例如以下：Widget.ProgressBar.HorizontalWidget.ProgressBar.SmallWidget.ProgressBar.LargeWidget.ProgressBar.InverseWidget.ProgressBar.Small.InverseWidget.ProgressBar.Large.Inverse 使用的时候能够这样：style="@android:style/Widget.ProgressBar.Small"。另外另一种方式就是使用系统的attr。上面的方式是系统的style：style="?android:attr/progressBarStyle" style="?android:attr/progressBarStyleHorizontal" style="?android:attr/progressBarStyleInverse" style="?android:attr/progressBarStyleLarge" style="?android:attr/progressBarStyleLargeInverse" style="?android:attr/progressBarStyleSmall" style="?android:attr/progressBarStyleSmallInverse" style="?android:attr/progressBarStyleSmallTitle" 然后再看一下ProgressBar的其它经常使用属性。 关于这些属性的使用还是比較简单，不多做介绍。当中第一个android:animationResolution已经呗舍弃了。所以不要去研究它了。重点说一下android:progressDrawable以及android:indeterminateDrawable。那这个Drawable在ProgressBar中是怎样使用的呢，假设我们是这样在xml中设置ProgressBar的话， android:id="@+id/progressbar" style="@android:style/Widget.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:secondaryProgress="50" /> 尽管没有设置android:indeterminateDrawable，可是样式Widget.ProgressBar.Horizontal已经帮我们设置好了。查看源代码例如以下： 先看一下progress_horizontal，源代码例如以下： android:startColor="#ff9d9e9d" android:centerColor="#ff5a5d5a" android:centerY="0.75" android:endColor="#ff747674" android:angle="270" /> android:startColor="#80ffd300" android:centerColor="#80ffb600" android:centerY="0.75" android:endColor="#a0ffcb00" android:angle="270" /> android:startColor="#ffffd300" android:centerColor="#ffffb600" android:centerY="0.75" android:endColor="#ffffcb00" android:angle="270" /> 能够看到。系统使用的是图层方式，以覆盖的方式进行的。所以假设须要其它的样式的话，改变系统默认的值就可以。或者參考一下系统自带的样式设置就可以了。 紧接着，说一下ProgressBar的方法，整体来说，能够分为两个部分。一是和自身属性相关的。比方获取进度、设置进度的最大值、设置插入器等等。二是和绘制相关的部分，如图所看到的： 所以、所以我们本次最重要的部分来了。那就是怎样自己定义一个美丽ProgressBar。在自己定义之前。先看一下系统是怎样实现的。Android下ProgressBar的代码量不算多，除去凝视预计也就是几百行左右。首先从构造方法看是看， /** * Create a new progress bar with range 0...100 and initial progress of 0. * @param context the application environment */ public ProgressBar(Context context) { this(context, null); } public ProgressBar(Context context, AttributeSet attrs) { this(context, attrs, com.android.internal.R.attr.progressBarStyle); } public ProgressBar(Context context, AttributeSet attrs, int defStyle) { this(context, attrs, defStyle, 0); } /** * @hide */ public ProgressBar(Context context, AttributeSet attrs, int defStyle, int styleRes) { super(context, attrs, defStyle); mUiThreadId = Thread.currentThread().getId(); initProgressBar(); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ProgressBar, defStyle, styleRes); mNoInvalidate = true; Drawable drawable = a.getDrawable(R.styleable.ProgressBar_progressDrawable); if (drawable != null) { drawable = tileify(drawable, false); // Calling this method can set mMaxHeight, make sure the corresponding // XML attribute for mMaxHeight is read after calling this method setProgressDrawable(drawable); } mDuration = a.getInt(R.styleable.ProgressBar_indeterminateDuration, mDuration); mMinWidth = a.getDimensionPixelSize(R.styleable.ProgressBar_minWidth, mMinWidth); mMaxWidth = a.getDimensionPixelSize(R.styleable.ProgressBar_maxWidth, mMaxWidth); mMinHeight = a.getDimensionPixelSize(R.styleable.ProgressBar_minHeight, mMinHeight); mMaxHeight = a.getDimensionPixelSize(R.styleable.ProgressBar_maxHeight, mMaxHeight); mBehavior = a.getInt(R.styleable.ProgressBar_indeterminateBehavior, mBehavior); final int resID = a.getResourceId( com.android.internal.R.styleable.ProgressBar_interpolator, android.R.anim. linear_interpolator); // default to linear interpolator if (resID > 0) { setInterpolator(context, resID); } setMax(a.getInt(R.styleable.ProgressBar_max, mMax)); setProgress(a.getInt(R.styleable.ProgressBar_progress, mProgress)); setSecondaryProgress( a.getInt(R.styleable.ProgressBar_secondaryProgress, mSecondaryProgress)); drawable = a.getDrawable(R.styleable.ProgressBar_indeterminateDrawable); if (drawable != null) { drawable = tileifyIndeterminate(drawable); setIndeterminateDrawable(drawable); } mOnlyIndeterminate = a.getBoolean( R.styleable.ProgressBar_indeterminateOnly, mOnlyIndeterminate); mNoInvalidate = false; setIndeterminate( mOnlyIndeterminate || a.getBoolean( R.styleable.ProgressBar_indeterminate, mIndeterminate)); mMirrorForRtl = a.getBoolean(R.styleable.ProgressBar_mirrorForRtl, mMirrorForRtl); a.recycle(); } 样式文件例如以下：R.styleable.Progre： ProgressBar把三个构造方法都列出来了。并使用了递归调用的方式，另一个方式就是分别在每个构造方法中都调用初始化的代码，个人认为还是此处比較正规。然后看一下第三个构造方法，在这里主要做了两件事情。一个是从attrs文件里读取设置的属性；一个是initProgressBar()方法，为ProgressBar设置一些默认的属性值。 private void initProgressBar() { mMax = 100; mProgress = 0; mSecondaryProgress = 0; mIndeterminate = false; mOnlyIndeterminate = false; mDuration = 4000; mBehavior = AlphaAnimation.RESTART; mMinWidth = 24; mMaxWidth = 48; mMinHeight = 24; mMaxHeight = 48; } 这就是默认的属性值。这在自己定义View中算是最基础的了，不多说，只是在这里须要注意两个地方。一是mUiThreadId，他是干嘛的呢，它获取的是当前UI线程的id，然后在更新ProgressBar进度的时候进行一个推断。假设是UI线程。那么直接进行更新，假设不是就post出去。使用Handler等进行更新。二是tileify(drawable, false)方法和tileifyIndeterminate(drawable)方法。这两个方法主要是对Drawable进行一个解析、转换的过程。在这里须要重点强调一下，在ProgressBar中，最重要的部分就是Drawable的使用了，由于不仅是它的背景包括进度等都是使用Drawable来完毕的，所以在源代码中也能够看到基本上百分之七八十的代码都是和Drawable有关的。由于这一部分篇幅较多。所以就不具体介绍了，以下重点说一下怎样绘制ProgressBar。首先看onMeasure()方法， @Override protected synchronized void onMeasure( int widthMeasureSpec, int heightMeasureSpec) { Drawable d = mCurrentDrawable; int dw = 0; int dh = 0; if (d != null) { dw = Math. max(mMinWidth , Math.min( mMaxWidth, d.getIntrinsicWidth())); dh = Math. max(mMinHeight , Math.min( mMaxHeight, d.getIntrinsicHeight())); } updateDrawableState(); dw += mPaddingLeft + mPaddingRight; dh += mPaddingTop + mPaddingBottom; setMeasuredDimension( resolveSizeAndState(dw, widthMeasureSpec, 0), resolveSizeAndState(dh, heightMeasureSpec, 0)); } 这是測量View大小的方法，也就是ProgressBar的大小，由于每个ProgressBar默认都会使用Drawable。所以ProgressBar的大小即是Drawable的大小加上Padding的大小，假设没有Padding。那非常显然就是Drawable的大小。最后使用setMeasuredDimension()方法设置ProgressBar的大小。 依照正常的流程，有些朋友可能会想到重写onLayout()方法了，可是这里ProgressBar仅仅是一个View，不须要进行位置的处理。所以直接进入onDraw()方法，在 @Override protected synchronized void onDraw(Canvas canvas) { super.onDraw(canvas); Drawable d = mCurrentDrawable; if (d != null) { // Translate canvas so a indeterminate circular progress bar with padding // rotates properly in its animation canvas.save(); if(isLayoutRtl() && mMirrorForRtl) { canvas.translate(getWidth() - mPaddingRight, mPaddingTop); canvas.scale(-1.0f, 1.0f); } else { canvas.translate(mPaddingLeft, mPaddingTop); } long time = getDrawingTime(); if ( mHasAnimation) { mAnimation.getTransformation(time, mTransformation); float scale = mTransformation.getAlpha(); try { mInDrawing = true; d.setLevel(( int) (scale * MAX_LEVEL)); } finally { mInDrawing = false; } postInvalidateOnAnimation(); } d.draw(canvas); canvas.restore(); if ( mShouldStartAnimationDrawable && d instanceof Animatable) { ((Animatable) d).start(); mShouldStartAnimationDrawable = false ; } } 首先也是先获取当前的Drawable对象。假设不为空就開始画图，先是一个推断。依据布局的方向来转移画布，isLayoutRtl()是View类的方法， public boolean isLayoutRtl() { return (getLayoutDirection() == LAYOUT_DIRECTION_RTL); } 这个LAYOUT_DIRECTION_RTL是LayoutDirection的一个常量，package android.util; /** * A class for defining layout directions. A layout direction can be left-to-right (LTR) * or right-to-left (RTL). It can also be inherited (from a parent) or deduced from the default * language script of a locale. */ public final class LayoutDirection { // No instantiation private LayoutDirection() {} /** * Horizontal layout direction is from Left to Right. */ public static final int LTR = 0; /** * Horizontal layout direction is from Right to Left. */ public static final int RTL = 1; /** * Horizontal layout direction is inherited. */ public static final int INHERIT = 2; /** * Horizontal layout direction is deduced from the default language script for the locale. */ public static final int LOCALE = 3; } 然后再推断有没有动画，假设有的话。就调用View类的postInvalidateOnAnimation()方法去运行一个动画。最后调用Drawable对象去画出来d.draw(canvas)。 总的来说。系统的ProgressBar是和Drawable紧密相关的。所以说。假设我们自己定义的ProgressBar和Drawable有关，那么全然能够继承于系统的ProgressBar来开发就可以。假设你的自己定义ProgressBar和Drawable关系不大，比方是这种， 事实上，就不须要Drawable了。全然能够直接继承于View类开发。 那以下就从两个方面来自己定义ProgressBar。一、继承于系统ProgressBar 首先看一下上面给出的进度条当中的一个。 思路： Mini ProgressBar在原生ProgressBar的基础上增加了一个指示器。并且有文字显示。实现的时候能够这样。 也就是说，自己定义的ProgressBar包括了两个部分，一部分是默认的。另一部分是新增加的指示器。事实上指示器就是一个Drawable和文本的组合，并且直接画在系统ProgressBar的上面就可以。接着。关于自己定义的ProgressBar的属性也要定义一下，比方Drawable、比方文本、比方间隔等。所以attrs文件能够这样来写了： ps：我发现eclipse在写declare-styleable不会自己主动提示，不清楚什么原因。知道的朋友望告知。 之后我们新建一个类继承于ProgressBar，/** * @author kince * */ public class IndicatorProgressBar extends ProgressBar { public IndicatorProgressBar(Context context) { this(context, null); } public IndicatorProgressBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public IndicatorProgressBar(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } } 然后在第三个构造方法中初始化数据，由于用到了文本以及Drawable，所以还须要声明全局变量，初始化完毕后代码例如以下： /** * */ package com.example.indicatorprogressbar.widget; import com.example.indicatorprogressbar.R; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Paint.Align; import android.graphics.drawable.Drawable; import android.text.TextPaint; import android.util.AttributeSet; import android.widget.ProgressBar; /** * @author kince * */ public class IndicatorProgressBar extends ProgressBar { private TextPaint mTextPaint; private Drawable mDrawableIndicator; private int offset=5; public IndicatorProgressBar(Context context) { this(context, null); } public IndicatorProgressBar(Context context, AttributeSet attrs) { this(context, attrs, 0); mTextPaint=new TextPaint(Paint.ANTI_ALIAS_FLAG); mTextPaint.density=getResources().getDisplayMetrics().density; mTextPaint.setColor(Color.WHITE); mTextPaint.setTextSize(10); mTextPaint.setTextAlign(Align.CENTER); mTextPaint.setFakeBoldText(true); } public IndicatorProgressBar(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); TypedArray array=context.obtainStyledAttributes(attrs, R.styleable.IndicatorProgressBar, defStyle, 0); if(array!=null){ mDrawableIndicator=array.getDrawable(R.styleable.IndicatorProgressBar_progressIndicator); offset=array.getInt(R.styleable.IndicatorProgressBar_offset, 0); array.recycle(); } } } 然后，为全局变量设置set、get方法，方便在程序中调用。 public Drawable getmDrawableIndicator() { return mDrawableIndicator ; } public void setmDrawableIndicator(Drawable mDrawableIndicator) { this.mDrawableIndicator = mDrawableIndicator; } public int getOffset() { return offset ; } public void setOffset(int offset) { this.offset = offset; } 接下来，就是重写onMeasure()、onDraw()方法了。在onMeasure()中。须要对进度条计算好具体大小，那依据上面的图示，这个进度条的宽度和系统进度条的宽度是一样的，也就是getMeasuredWidth()；高度的话。由于加了一个指示器。所以高度是指示器的高度加上系统进度条的高度。因此在onMeasure()方法中就能够这样来写： @Override protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // TODO Auto-generated method stub super.onMeasure(widthMeasureSpec, heightMeasureSpec); if(mDrawableIndicator!=null){ //获取系统进度条的宽度 这个宽度也是自己定义进度条的宽度 所以在这里直接赋值 final int width=getMeasuredWidth(); final int height=getMeasuredHeight()+getIndicatorHeight(); setMeasuredDimension(width, height); } } /** * @category 获取指示器的高度 * @return */ private int getIndicatorHeight(){ if(mDrawableIndicator==null){ return 0; } Rect r=mDrawableIndicator.copyBounds(); int height=r.height(); return height; } 然后是onDraw()方法。由于在onMeasure()方法中增加了进度条的高度。所以在画的时候须要将系统进度条与指示器分隔开来。在进度条的样式文件里。我们是这样配置的： 在android:progressDrawable的属性中。使用的drawable是这种： android:id="@android:id/background" android:drawable="@drawable/progressbar_bg" /> android:id="@+id/progress" android:drawable="@drawable/progressbar_bar" > android:src="@drawable/progressbar_pattern" android:tileMode="repeat" /> 能够发现。是一个layer类型的drawable，所以在计算大小的时候。须要特别考虑这个情况。代码例如以下： if (m_indicator != null) { if (progressDrawable != null && progressDrawable instanceof LayerDrawable) { LayerDrawable d = (LayerDrawable) progressDrawable; for (int i = 0; i < d.getNumberOfLayers(); i++) { d.getDrawable(i).getBounds(). top = getIndicatorHeight(); d.getDrawable(i).getBounds(). bottom = d.getDrawable(i) .getBounds().height() + getIndicatorHeight(); } } else if (progressDrawable != null) { progressDrawable.getBounds(). top = m_indicator .getIntrinsicHeight(); progressDrawable.getBounds(). bottom = progressDrawable .getBounds().height() + getIndicatorHeight(); } } 然后须要更新进度条的位置。private void updateProgressBar () { Drawable progressDrawable = getProgressDrawable(); if (progressDrawable != null && progressDrawable instanceof LayerDrawable) { LayerDrawable d = (LayerDrawable) progressDrawable; final float scale = getScale(getProgress()); // 获取进度条 更新它的大小 Drawable progressBar = d.findDrawableByLayerId(R.id.progress ); final int width = d.getBounds(). right - d.getBounds().left ; if (progressBar != null) { Rect progressBarBounds = progressBar.getBounds(); progressBarBounds. right = progressBarBounds.left + ( int ) (width * scale + 0.5f); progressBar.setBounds(progressBarBounds); } // 获取叠加的图层 Drawable patternOverlay = d.findDrawableByLayerId(R.id.pattern ); if (patternOverlay != null) { if (progressBar != null) { // 使叠加图层适应进度条大小 Rect patternOverlayBounds = progressBar.copyBounds(); final int left = patternOverlayBounds.left ; final int right = patternOverlayBounds.right ; patternOverlayBounds. left = (left + 1 > right) ? left : left + 1; patternOverlayBounds. right = (right > 0) ? right - 1 : right; patternOverlay.setBounds(patternOverlayBounds); } else { // 没有叠加图层 Rect patternOverlayBounds = patternOverlay.getBounds(); patternOverlayBounds. right = patternOverlayBounds.left + ( int ) (width * scale + 0.5f); patternOverlay.setBounds(patternOverlayBounds); } } } } 最后，须要把指示器画出来，if (m_indicator != null) { canvas.save(); int dx = 0; // 获取系统进度条最右边的位置 也就是头部的位置 if (progressDrawable != null && progressDrawable instanceof LayerDrawable) { LayerDrawable d = (LayerDrawable) progressDrawable; Drawable progressBar = d.findDrawableByLayerId(R.id.progress ); dx = progressBar.getBounds(). right; } else if (progressDrawable != null) { dx = progressDrawable.getBounds().right ; } //增加offset dx = dx - getIndicatorWidth() / 2 - m_offset + getPaddingLeft(); // 移动画笔位置 canvas.translate(dx, 0); // 画出指示器 m_indicator .draw(canvas); // 画出进度数字 canvas.drawText( m_formatter != null ? m_formatter .getText(getProgress()) : Math.round(getScale(getProgress()) * 100.0f) + "%" , getIndicatorWidth() / 2, getIndicatorHeight() / 2 + 1, m_textPaint ); // restore canvas to original canvas.restore(); } 源代码下载：Github地址：https://github.com/wangjinyu501/SaundProgressBar
上一篇
发表评论