基于Android的计步器(Pedometer)的讲解(三)——CircleBar(圆形进度条)

计步器（Pedometer）整个项目的源代码，感兴趣的朋友可以下载来看看(记得帮小弟在github打个星~)

github下载

CSDN下载

本篇文章讲的demo在这里下载(0分下载)：

http://download.csdn.net/detail/a296777513/8328461

先给几张效果图：

如上图所示，点击中间的圆圈会依次显示3个不同的页面（信息），而且圆形的进度条是动态增加的，效果还是可以的。然后给出源代码，供大家参考

CircleBar的主要代码

package com.example.histogram.widet;import android.annotation.SuppressLint;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.graphics.RectF;import android.graphics.Paint.Align;import android.graphics.Paint.Style;import android.util.AttributeSet;import android.view.View;import android.view.animation.Animation;import android.view.animation.Transformation;/** * 这是继承view的一个重新绘图的圆圈的一个类 Author: liyachao email:[e-mail] Date: 2015-1-5 * Time: 下午2:39 */public class CircleBar extends View {private RectF mColorWheelRectangle = new RectF();// 圆圈的矩形范围private Paint mDefaultWheelPaint;// 绘制底部灰色圆圈的画笔private Paint mColorWheelPaint;// 绘制蓝色扇形的画笔private Paint textPaint;// 中间文字的画笔private Paint textPaint1;// 上下文字的画笔private float mColorWheelRadius;// 圆圈普通状态下的半径private float circleStrokeWidth;// 圆圈的线条粗细private float pressExtraStrokeWidth;// 按下状态下增加的圆圈线条增加的粗细private int mText;// 中间文字内容private int mCount;// 为了达到数字增加效果而添加的变量，他和mText其实代表一个意思private float mProgressAni;// 为了达到蓝色扇形增加效果而添加的变量，他和mProgress其实代表一个意思private float mProgress;// 扇形弧度private int mTextSize;// 中间文字大小private int mTextSize1;// 上下文字大小private int mDistance;// 上下文字的距离BarAnimation anim;// 动画类private int mType;// 根据传入的数值判断应该显示的页面public CircleBar(Context context) {super(context);init();}public CircleBar(Context context, AttributeSet attrs) {super(context, attrs);init();}public CircleBar(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init();}private void init() {circleStrokeWidth = dip2px(getContext(), 20);// 圆圈的线条粗细pressExtraStrokeWidth = dip2px(getContext(), 2);// 按下状态下增加的圆圈线条增加的粗细mTextSize = dip2px(getContext(), 80);// 中间文字大小mTextSize1 = dip2px(getContext(), 30);// 上下文字大小mDistance = dip2px(getContext(), 70);//文字间的距离// 绘制蓝色扇形的画笔mColorWheelPaint = new Paint();mColorWheelPaint.setAntiAlias(true);// 抗锯齿mColorWheelPaint.setColor(0xFF29a6f6);// 设置颜色mColorWheelPaint.setStyle(Paint.Style.STROKE);// 设置空心mColorWheelPaint.setStrokeWidth(circleStrokeWidth);// 设置圆圈粗细// 绘制底部灰色圆圈的画笔mDefaultWheelPaint = new Paint();mDefaultWheelPaint.setAntiAlias(true);mDefaultWheelPaint.setColor(Color.parseColor("#d9d6c3"));mDefaultWheelPaint.setStyle(Paint.Style.STROKE);mDefaultWheelPaint.setStrokeWidth(circleStrokeWidth);// 中间文字的画笔textPaint = new Paint(Paint.LINEAR_TEXT_FLAG);textPaint.setAntiAlias(true);textPaint.setColor(Color.parseColor("#6DCAEC"));textPaint.setStyle(Style.FILL_AND_STROKE);textPaint.setTextAlign(Align.LEFT);textPaint.setTextSize(mTextSize);// 上下文字的画笔textPaint1 = new Paint(Paint.LINEAR_TEXT_FLAG);textPaint1.setAntiAlias(true);textPaint1.setColor(Color.parseColor("#a1a3a6"));textPaint1.setStyle(Style.FILL_AND_STROKE);textPaint1.setTextAlign(Align.LEFT);textPaint1.setTextSize(mTextSize1);// 中间文字内容mText = 0;// 扇形弧度mProgress = 0;// 动画类anim = new BarAnimation();anim.setDuration(1000);}@SuppressLint("DrawAllocation")@Overrideprotected void onDraw(Canvas canvas) {int halfHeight = getHeight() / 2;int halfWidth = getWidth() / 2;int radius = halfHeight < halfWidth ? halfHeight : halfWidth;// 圆圈的矩形范围 绘制底部灰色圆圈的画笔canvas.drawCircle(halfWidth, halfHeight, radius - 20f,mDefaultWheelPaint);// mColorWheelRectangle是绘制蓝色扇形的画笔mColorWheelRectangle.top = halfHeight - radius + 20f;mColorWheelRectangle.bottom = halfHeight + radius - 20f;mColorWheelRectangle.left = halfWidth - radius + 20f;mColorWheelRectangle.right = halfWidth + radius - 20f;// 根据mProgressAni（角度）画扇形canvas.drawArc(mColorWheelRectangle, -90, mProgressAni, false,mColorWheelPaint);Rect bounds = new Rect();String middleText = null;// 中间的文字String upText = null;// 上面文字String downText = null;// 底部文字if (this.mType == 1) {// 第一个页面upText = "步数";downText = "目标:10000";middleText = String.valueOf(mCount);} else if (this.mType == 2) {// 第二个页面upText = "卡路里";downText = "目标:10000";middleText = String.valueOf(mCount);} else if (this.mType == 3) {// 第三个页面upText = "根据自己的需要填写";downText = "3";middleText = "天气";}// 中间文字的画笔textPaint.getTextBounds(middleText, 0, middleText.length(), bounds);// drawText各个属性的意思(文字,x坐标,y坐标,画笔)canvas.drawText(middleText, (mColorWheelRectangle.centerX())- (textPaint.measureText(middleText) / 2),mColorWheelRectangle.centerY() + bounds.height() / 2, textPaint);textPaint1.getTextBounds(upText, 0, upText.length(), bounds);canvas.drawText(upText,(mColorWheelRectangle.centerX())- (textPaint1.measureText(upText) / 2),mColorWheelRectangle.centerY() + bounds.height() / 2- mDistance, textPaint1);textPaint1.getTextBounds(downText, 0, downText.length(), bounds);canvas.drawText(downText, (mColorWheelRectangle.centerX())- (textPaint1.measureText(downText) / 2),mColorWheelRectangle.centerY() + bounds.height() / 2+ mDistance, textPaint1);}// 测量父布局的大小protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int height = getDefaultSize(getSuggestedMinimumHeight(),heightMeasureSpec);int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);int min = Math.min(width, height);setMeasuredDimension(min, min);mColorWheelRadius = min - circleStrokeWidth - pressExtraStrokeWidth;// set方法的参数意思：left,top,right,bottommColorWheelRectangle.set(circleStrokeWidth + pressExtraStrokeWidth,circleStrokeWidth + pressExtraStrokeWidth, mColorWheelRadius,mColorWheelRadius);}// 对外的一个接口，用来开启动画public void startCustomAnimation() {this.startAnimation(anim);}// 中间的数值public void setText(int text) {mText = text;this.postInvalidate();// 可以用子线程更新视图的方法调用。}// 设置圆圈的进度和圆圈所显示的第几个页面public void setProgress(float progress, int mType) {mProgress = progress;this.mType = mType;this.postInvalidate();// 可以用子线程更新视图的方法调用。}/** * 继承animation的一个动画类 *  * @author liyachao * */public class BarAnimation extends Animation {protected void applyTransformation(float interpolatedTime,Transformation t) {super.applyTransformation(interpolatedTime, t);if (interpolatedTime < 1.0f) {mProgressAni = interpolatedTime * mProgress;mCount = (int) (interpolatedTime * mText);} else {mProgressAni = mProgress;mCount = mText;}postInvalidate();}}public static int dip2px(Context context, float dipValue) {final float scale = context.getResources().getDisplayMetrics().density;return (int) (dipValue * scale + 0.5f);}}

</pre><span style="white-space:pre"></span><p><span style="white-space:pre"><span style="font-size:18px"><span style="white-space:pre"><span style="font-size:18px; white-space:pre"><span style="white-space:pre">FragmentPedometer</span> 的</span><span style="font-size:18px; white-space:pre">代码如下</span></span></span></span></p><p><span style="white-space:pre"><span style="font-size:18px"><span style="white-space:pre"><span style="font-size:18px; white-space:pre"></span></span></span></span></p><pre name="code" class="java">package com.example.histogram;import com.example.changepage1.R;import com.example.histogram.widet.CircleBar;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.View.OnClickListener;/** * 这是记步的碎片 * Author: 李垭超   email:[e-mail] * Date: 2015-1-2 * Time: 下午2:39 */public class FragmentPedometer extends Fragment{private View view;private CircleBar circleBar;private int type = 1;//页面类型//需要在handler里修改UIprivate Handler handler = new Handler() {public void handleMessage(android.os.Message msg) {if (type == 1) {circleBar.setProgress(270, 1);circleBar.setText(1000);circleBar.startCustomAnimation();} else if (type == 2) {circleBar.setProgress(180, 2);circleBar.setText(1500);circleBar.startCustomAnimation();} else if (type == 3) {circleBar.setProgress(360, 3);circleBar.startCustomAnimation();}};};@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {view = inflater.inflate(R.layout.pedometer, container, false);circleBar = (CircleBar) view.findViewById(R.id.circle);circleBar.setProgress(270, 1);circleBar.setText(1000);circleBar.startCustomAnimation();//开启动画circleBar.setOnClickListener(new OnClickListener() {public void onClick(View view) {if (type == 1) {type = 2;} else if (type == 2) {type = 3;} else if (type == 3) {type = 1;}Message msg = new Message();handler.sendMessage(msg);}});return view;}}