圆形进度条以及百分率指示器 Scroller类的练习

简介: 转载时请注明出处,尊重他人的劳动成果,谢谢。 先附上效果图: 这个控件是动态加载到75%的,主要我忘了怎么做动态图,就先放一个静态图在这里表示表示。旁边这个没有没有喜欢的?有想知道的 我可以告诉答案。

转载时请注明出处,尊重他人的劳动成果,谢谢。

先附上效果图:


这个控件是动态加载到75%的,主要我忘了怎么做动态图,就先放一个静态图在这里表示表示。旁边这个没有没有喜欢的?有想知道的 我可以告诉答案。

现附上代码,不懂的请留言:

package com.sahadev.circleview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Scroller;

public class CircleView extends View implements OnClickListener {
	private Paint outPaint, inPaint;
	/* The Circle's radius */
	private int radius = 200;
	/* The torus's width */
	private int width = 50, backgroundColor = Color.WHITE;// 默认 背景色为纯白

	private RectF mTempRectF = new RectF();

	private int mProgress;// 当前进度
	private int mTargetProgress = 75;// 目标进度

	private int mWidth = 400, mHeight = 400;// 该控件的初始大小为400*400

	private Scroller mScroller;// 滑动辅助类

	private int duration = 1000;// 动画间隔时间

	private int textSize = 50, mFontHeight;

	private float mTextWidth = 0;

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

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

	public CircleView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

		outPaint = new Paint();
		inPaint = new Paint();
		outPaint.setTextSize(textSize);

		mScroller = new Scroller(context);
		mScroller.forceFinished(false);

		outPaint.setColor(Color.argb(90, 90, 90, 90));
		outPaint.setStyle(Paint.Style.FILL_AND_STROKE);
		outPaint.setAntiAlias(true);

		inPaint.setColor(backgroundColor);
		inPaint.setAntiAlias(true);

		setBackgroundColor(backgroundColor);

		FontMetrics fm = outPaint.getFontMetrics();// 得到系统默认字体属性
		mFontHeight = (int) (Math.ceil(fm.descent - fm.top) + 2);// 获得字体高度
		mFontHeight = mFontHeight - textSize;

		mTempRectF.set(0, 0, mWidth, mHeight);
	}

	public void setTextSize(int textSize) {
		this.textSize = textSize;
	}

	/*
	 * 设置背景色
	 * 
	 * @see android.view.View#setBackgroundColor(int)
	 */
	public void setBackgroundColor(int color) {
		this.backgroundColor = color;
	}

	/**
	 * 设置圆圈颜色
	 * 
	 * @param color
	 */
	public void setCircleColor(int color) {
		outPaint.setColor(color);
	}

	/**
	 * 设置圆圈半径
	 * 
	 * @param radius
	 */
	public void setRadius(int radius) {
		this.radius = radius;
	}

	/**
	 * 设置圆圈宽度
	 * 
	 * @param width
	 */
	public void setWidth(int width) {
		this.width = width;
	}

	/**
	 * 设置目标进度
	 * 
	 * @param progress
	 *            大于0,小于100
	 */
	public void setTargetProgress(int progress) {
		this.mTargetProgress = progress;
	}

	/**
	 * 可以作为进度条设置当前进度
	 * 
	 * @param progress
	 */
	public void setProgress(int progress) {
		this.mProgress = progress;
		postInvalidate();
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			onClick(this);
			return true;
		}
		return super.onTouchEvent(event);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		canvas.drawArc(mTempRectF, -90, 360 * mProgress / 100, true, outPaint);// 画一个扇形
		canvas.drawCircle(mWidth / 2, mHeight / 2, radius - width, inPaint);// 中心画一个圆
		mTextWidth = outPaint.measureText(mProgress + "%");
		canvas.drawText(mProgress + "%", (mWidth - mTextWidth) / 2, (mHeight) / 2 + mFontHeight, outPaint);

	}

	/*
	 * 获取适合的高宽
	 * 
	 * @see android.view.View#onMeasure(int, int)
	 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		int size = 0;
		size = widthMeasureSpec > mWidth && heightMeasureSpec > mHeight ? (mWidth > mHeight ? mHeight : mWidth) : (widthMeasureSpec > heightMeasureSpec ? heightMeasureSpec
				: widthMeasureSpec);
		/* 该控件为正方形 */
		setMeasuredDimension(size, size);
	}

	/*
	 * 触动该控件 绘制到指定位置
	 * 
	 * @see android.view.View.OnClickListener#onClick(android.view.View)
	 */
	@Override
	public void onClick(View v) {
		mScroller.startScroll(0, 0, mTargetProgress, 0, duration);
		postInvalidate();
	}

	/**
	 * 设置动画绘制时间
	 * 
	 * @param duration
	 */
	public void setDuration(int duration) {
		this.duration = duration;
	}

	@Override
	public void computeScroll() {
		super.computeScroll();
		if (mScroller.computeScrollOffset()) {
			mProgress = mScroller.getCurrX();
			postInvalidate();
		}
	}

}


像一般自定义控件使用这个控件就可以了,具体方法相信大家都懂得,我就不贴方法了,只用设置进去就可以看到效果。
目录
相关文章
Dialog和DialogFragment 设置背景透明
Dialog和DialogFragment 设置背景透明
882 0
|
前端开发 Android开发
圆形头像的7种显示方法
牙叔教程 简单易懂
205 0
|
XML Android开发 数据格式
Fragment生命周期的坑和DialogFragment宽高的坑
最近在开发单页面应用,多个fragment嵌套在一个activity里面,和之前单个Fragment依赖在activivty中管理还是有点不同,我这Fragment嵌套了3层,最终还是出问题了。
2388 0
|
前端开发 Android开发 容器
Android自定义Tablayout下划线指示器Indicator:设置宽高、圆角、渐变颜色
Android自定义Tablayout下划线指示器Indicator:设置宽高、圆角、渐变颜色 Android原生的Tablayout下面有一个指示器(指示线、下划线),如图所示:详情见附录1。
5938 0
|
Android开发 数据格式 XML
自定义Dialog样式
前言 平时项目开发总要自定义dialog满足产品的设计需求,但系统提供Dialog和AlertDialog用起来不是很方便,所以自己封装一个好用的Dialog基类是再好不过了。
1019 0
|
Android开发
自定义布局实现侧滑菜单2
我们在上一节已经说了侧滑菜单的实现原理,并且实现了单侧菜单,这一节我们就完善项目,实现双向侧滑菜单。原理我们都说了,不明白的看上节,好了,直接上代码 /** * 这个类和SlidingLayout作用一样,只是没有实现触摸监听事件,直接在121行设置实现了 */ public class SlidingLayout1 extends LinearLayout { /** * 滚动显示和隐藏左侧布局时,手指滑动需要达到的速度。
796 0
|
Android开发
自定义布局实现侧滑菜单1
说起侧滑菜单,应该是一个很Low的话题了,现在几乎所有的app都有这个功能,但是既然大家都在用,那就再说说吧。本文参照郭霖大神的文章,我又重新组织了下,大家可以看原文章。
814 0