zoukankan      html  css  js  c++  java
  • Android 自己定义圆圈进度并显示百分比例控件(纯代码实现)

    首先,感谢公司能给我闲暇的时间,来稳固我的技术,让我不断的去探索研究,在此不胜感激。吐舌头
    先不说实现功能,上图看看效果
    这个是续上一次水平变色进度条的有一个全新的控件,理论实现原理
    1.分析控件:该控件基本上是圆圈内嵌圆圈;

    2.进度计算:事实上是小学二年级数学题:当前进度/总数=百分比;

    3.中间时间:呵呵,纯粹忽悠,不解释(当前时间)。

    理论总是和实践差距的太远。不扯淡。不吹嘘,贴代码:

    package com.spring.progressview;
    
    import java.text.SimpleDateFormat;
    import java.util.Date;
    
    import android.annotation.SuppressLint;
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Paint.Align;
    import android.graphics.Paint.Style;
    import android.graphics.Rect;
    import android.graphics.RectF;
    import android.util.AttributeSet;
    import android.view.View;
    
    /****
     * 圆圈进度控件
     * @author spring sky
     * Email:vipa1888@163.com
     * 下载地址:http://download.csdn.net/detail/vipa1888/7637905
     */
    public class RoundProgressView extends View {
    	
    	/**最外围的颜色值*/
    	private int mOutRoundColor = Color.argb(60, 255, 255, 255);
    	/**中心圆的颜色值*/
    	private int mCenterRoundColor = Color.argb(255, 255, 255, 255);
    	
    	/**进度的颜色*/
    	private int mProgressRoundColor = Color.argb(255, 255, 255, 255);
    	/**进度的背景颜色*/
    	private int mProgressRoundBgColor = Color.argb(100, 255, 255, 255);
    	/**进度条的宽度*/
    	private int mProgressWidth = 5;
    	
    	private int[] colors = {Color.WHITE,Color.RED};
    	/***字体颜色*/
    	private int mTextColor = Color.rgb(118, 181, 66);
    	private float mPencentTextSize = 65;
    	
    	private int mWidth,mHeight;
    	private int mPaddingX;
    	
    	private float mProgress = 0.5f;
    	private float mMax = 1.0f;
    	/**
    	 * 时间显示格式
    	 */
    	private SimpleDateFormat mDateFormat = new SimpleDateFormat("HH:mm:ss.S");
    	
    	private Paint mPaint = new Paint();
    
    	public RoundProgressView(Context context, AttributeSet attrs, int defStyle) {
    		super(context, attrs, defStyle);
    		init();
    	}
    
    	public RoundProgressView(Context context, AttributeSet attrs) {
    		super(context, attrs);
    		init();
    	}
    
    	public RoundProgressView(Context context) {
    		super(context);
    		init();
    	}
    	
    	public void init(){
    	}
    	
    	@SuppressLint("DrawAllocation")
    	@Override
    	protected void onDraw(Canvas canvas) {
    		super.onDraw(canvas);
    		mWidth = getWidth();
    		mHeight = getHeight();
    		
    		if(mWidth > mHeight){
    			mPaddingX = (mWidth-mHeight)/2;
    			mWidth = mHeight;
    		}
    		mPaint.setAntiAlias(true); // 消除锯齿
    		mPaint.setStyle(Style.FILL);
    		mPaint.setColor(mOutRoundColor);
    		RectF oval = new RectF(new Rect(mPaddingX, 0, mWidth+mPaddingX, mHeight));
    		canvas.drawArc(oval, 0, 360, true, mPaint);
    		
    		int halfWidth = mWidth/6;
    		mPaint.setColor(mProgressRoundBgColor);
    		mPaint.setStrokeWidth(mProgressWidth);
    		mPaint.setStyle(Style.STROKE);
    		oval = new RectF(new Rect(halfWidth+mPaddingX, halfWidth, halfWidth*5+mPaddingX, halfWidth*5));
    		canvas.drawArc(oval, 0, 360, false, mPaint);
    		
    		mPaint.setColor(mProgressRoundColor);
    		canvas.drawArc(oval, 90, 360*mProgress/mMax, false, mPaint);
    		
    		
    		halfWidth = mWidth/4;
    		mPaint.setStyle(Style.FILL);
    		mPaint.setColor(mCenterRoundColor);
    		oval = new RectF(new Rect(halfWidth+mPaddingX, halfWidth, halfWidth*3+mPaddingX, halfWidth*3));
    		canvas.drawArc(oval, 0, 360, false, mPaint);
    		
    		mPaint.reset();
    		mPaint.setTextSize(mPencentTextSize);
    		mPaint.setColor(mTextColor);
    		mPaint.setStyle(Style.FILL);
    		mPaint.setTextAlign(Align.CENTER);
    		String number = (int)(mProgress*100/mMax)+"";
    		canvas.drawText(number, mWidth/2+mPaddingX, mHeight/2+mPencentTextSize/3, mPaint);
    		
    		float textWidth = mPaint.measureText(number);
    		mPaint.setTextSize(mPencentTextSize/2);
    		canvas.drawText("%", mWidth/2+mPaddingX+textWidth/2+5, mHeight/2-mPencentTextSize/8, mPaint);
    		
    		mPaint.setTextSize(mPencentTextSize/2);
    		canvas.drawText(mDateFormat.format(new Date(System.currentTimeMillis())), mWidth/2+mPaddingX, mHeight/2+halfWidth/4*3, mPaint);
    	}
    	
    	public void setMax(float mMax) {
    		this.mMax = mMax;
    	}
    	
    	public void setProgress(float mProgress) {
    		this.mProgress = mProgress;
    		invalidate();
    	}
    	
    	public float getMax() {
    		return mMax;
    	}
    	
    	public float getProgress() {
    		return mProgress;
    	}
    	
    }
    



    尽管仅仅有短短不到200行代码。可是,里面的有些基本函数。我还是得简单的说明
    1.  Color.argb(60, 255, 255, 255);   这个是来得到一个颜色。而且设置他的透明度。第一个參数就是透明度,0~255之间,其它的RGB,呵呵。不解释,自己搞。
    2. 以下的两个方法,是画笔的方法。非常重要

    mPaint.setStyle(Style.STROKE); //这个是原来显示空心的东西

    mPaint.setStrokeWidth(mProgressWidth);   //这个是空心最外层的宽度
    比方:drawArc 是画一个圆,那么,我们的设置了以上两个方法,就是要画一个空心圆,圆的轨迹宽度就是  mProgressWidth
    3.画圆的时候,開始度数和结束度数一定要控制好哦。
    4.假设您还有什么不懂的,请多了解:Canvas 和Paint的相关方法和API,在此不胜感激。


    写这篇博客的目的为了分享,我也希望能给你们提供一些思路,希望大家把不错的控件都共享出来,不胜感激。

    好了。博客贴出去,肯定有非常多人要Demo,为了防止蜘蛛乱抓取而丢失下载地址。地址请看代码上的注明点。
    转载请注明作者来源:Spring sky .














  • 相关阅读:
    DataFrame转矩阵Np-Array
    十月15
    十月14
    十月14
    十月12
    十月10
    2016-02-22 有无网络 2
    2016-02-22 有无网络的提示 1 h m
    2016-02-20 web view
    20160220 下拉刷新 上拉加载
  • 原文地址:https://www.cnblogs.com/wzzkaifa/p/7117919.html
Copyright © 2011-2022 走看看