ZoomBar 设计 

  1 package com.example.canvasdemo;
  2 
  3 import android.content.Context;
  4 import android.graphics.Canvas;
  5 import android.graphics.Color;
  6 import android.graphics.EmbossMaskFilter;
  7 import android.graphics.Paint;
  8 import android.graphics.SweepGradient;
  9 import android.util.AttributeSet;
 10 import android.view.View;
 11 /**
 12  * 
 13  * @author liemng  QQ:859686819
 14  *
 15  */
 16 public class ZoomPinch extends View{
 17 
 18     private Paint mLinePaint;
 19     private Paint mPointPaint;
 20     private int mLineWitdh = 18;
 21     private int mPointPaintWitdh = 12;
 22     
 23     private String mForeground = "#FFFFFF";
 24     private String mBackground = "#ff0000";
 25     
 26     // 梯度渐变的填充颜色
 27     private int[] arcColors = new int[] { 0xFF48cbdc, 0xFF4c9fda, 0xFFeac83d,
 28             0xFFc7427e, 0xFF48cbdc, 0xFF48cbdc };
 29     
 30     public ZoomPinch(Context context, AttributeSet attrs, int defStyleAttr) {
 31         super(context, attrs, defStyleAttr);
 32         initData();
 33     }
 34 
 35     public ZoomPinch(Context context, AttributeSet attrs) {
 36         this(context, attrs, 0);
 37     }
 38 
 39     public ZoomPinch(Context context) {
 40         this(context, null);
 41     }
 42     
 43     public void initData(){
 44         //--绘制线段画笔
 45         mLinePaint = new Paint();
 46         //--抗锯齿
 47         mLinePaint.setAntiAlias(true);
 48         //--防抖
 49         mLinePaint.setDither(true);
 50         //--线段两端的形状
 51         mLinePaint.setStrokeCap(Paint.Cap.ROUND);
 52         // 线段的宽度
 53         mLinePaint.setStrokeWidth(mLineWitdh);
 54         //--画笔颜色
 55         mLinePaint.setColor(Color.parseColor("#000000"));
 56         
 57         //--设置光源的方向
 58         float[] direction = new float[]{ 1, 1, 1 };
 59         //--设置环境光亮度
 60         float light = 0.4f;
 61         //--选择要应用的反射等级
 62         float specular = 6;
 63         //--向mask应用一定级别的模糊
 64         float blur = 3.5f;
 65         EmbossMaskFilter emboss=new EmbossMaskFilter(direction,light,specular,blur);
 66         mLinePaint.setMaskFilter(emboss);
 67         
 68         //--绘制圆环的画笔
 69         mPointPaint = new Paint();
 70         //--抗锯齿
 71         mPointPaint.setAntiAlias(true);
 72         //--防抖
 73         mPointPaint.setDither(true);
 74         //--线段两端的形状
 75         mPointPaint.setStrokeCap(Paint.Cap.ROUND);
 76         //--线段的宽度
 77         mPointPaint.setStrokeWidth(mPointPaintWitdh);
 78         //--画笔颜色
 79         SweepGradient  mSweepGradient = new SweepGradient(mH/2, mW/2, arcColors, null);
 80         mPointPaint.setShader(mSweepGradient);
 81     }
 82     
 83     private int mH ;
 84     private int mW ;
 85     private int mMaxHight = 500;
 86     private int topsurplus = mLineWitdh/2 + 10;
 87     
 88     private int mProgres = 0;
 89     private float mTotalProgress = mMaxHight;
 90     
 91     private int inCircleR = 6;
 92     private int outCircleR = 14;
 93     
 94     private int currentLineProgress = 0;
 95     
 96     @Override
 97     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
 98         // TODO Auto-generated method stub
 99         super.onSizeChanged(w, h, oldw, oldh);
100         
101         mH = w;
102         mW = h;
103     }
104     
105     @Override
106     protected void onDraw(Canvas canvas) {
107         // TODO Auto-generated method stub
108         super.onDraw(canvas);
109         //--平移画布
110         canvas.translate(0, topsurplus);
111         //--绘制背景色
112         mLinePaint.setColor(Color.parseColor(mBackground));
113         canvas.drawLine(mW/2, mMaxHight, mW/2, 0, mLinePaint);
114         
115         //--绘制前景色
116         mLinePaint.setColor(Color.parseColor(mForeground));
117         canvas.drawLine(mW/2, mMaxHight, mW/2, mMaxHight - currentLineProgress, mLinePaint);
118         
119         //--绘制圆环
120         mPointPaint.setStyle(Paint.Style.STROKE);
121         canvas.drawCircle(mW/2, mMaxHight - currentLineProgress , outCircleR, mPointPaint);
122         mPointPaint.setStyle(Paint.Style.FILL);
123         canvas.drawCircle(mW/2, mMaxHight - currentLineProgress , inCircleR, mPointPaint);
124     }
125     
126     public void setBackgroup(String mBackgroup){
127         this.mBackground = mBackgroup;
128     }
129     
130     public void setForeground(String mForeground){
131         this.mForeground = mForeground;
132     }
133     
134     
135     public void setProgress(float mProgress){
136         if(this.mProgres >= mTotalProgress && mProgress > 0)
137             return;
138         this.mProgres += mProgress;
139         
140         float percent = mProgres/mTotalProgress;
141         
142         if(percent <0){
143             this.mProgres = 0;
144             return;
145         }
146         this.currentLineProgress = (int) (percent*mMaxHight);
147         invalidate();
148     }
149     
150     public void setMax(float mTotalProgress){
151         if(mTotalProgress < 0)
152             new IllegalArgumentException("invalid args && doubi");
153         this.mTotalProgress = mTotalProgress;
154     }
155 }

效果图如下：

 

 

 

左侧增加文字属性：

package com.example.canvasdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.EmbossMaskFilter;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.View;
/**
 * 
 * @author liemng  QQ:859686819
 *
 */
public class ZoomPinch extends View{

	private Paint mLinePaint;
	private Paint mPointPaint;
	private int mLineWitdh = 18;
	private int mPointPaintWitdh = 12;
	
	private String mForeground = "#FFFFFF";
	private String mBackground = "#ff0000";
	
	private String[] mTips = new String[]{"1.0X", "2.0X", "3.0X", "4.0X"};
	
	// 梯度渐变的填充颜色
	private int[] arcColors = new int[] { 0xFF48cbdc, 0xFF4c9fda, 0xFFeac83d,
			0xFFc7427e, 0xFF48cbdc, 0xFF48cbdc };
	
	public ZoomPinch(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		initData();
	}

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

	public ZoomPinch(Context context) {
		this(context, null);
	}
	
	public void initData(){
		//--绘制线段画笔
		mLinePaint = new Paint();
		//--抗锯齿
		mLinePaint.setAntiAlias(true);
		//--防抖
		mLinePaint.setDither(true);
		//--线段两端的形状
		mLinePaint.setStrokeCap(Paint.Cap.ROUND);
		// 线段的宽度
		mLinePaint.setStrokeWidth(mLineWitdh);
		//--画笔颜色
		mLinePaint.setColor(Color.parseColor("#000000"));
		
		//--设置光源的方向
		float[] direction = new float[]{ 1, 1, 1 };
		//--设置环境光亮度
		float light = 0.4f;
		//--选择要应用的反射等级
		float specular = 6;
		//--向mask应用一定级别的模糊
		float blur = 3.5f;
		EmbossMaskFilter emboss=new EmbossMaskFilter(direction,light,specular,blur);
		mLinePaint.setMaskFilter(emboss);
		
		//--绘制圆环的画笔
		mPointPaint = new Paint();
		//--抗锯齿
		mPointPaint.setAntiAlias(true);
		//--防抖
		mPointPaint.setDither(true);
		//--线段两端的形状
		mPointPaint.setStrokeCap(Paint.Cap.ROUND);
		//--线段的宽度
		mPointPaint.setStrokeWidth(mPointPaintWitdh);
		//--画笔颜色
		SweepGradient  mSweepGradient = new SweepGradient(mH/2, mW/2, arcColors, null);
		mPointPaint.setShader(mSweepGradient);
		
		mTextPaint = new Paint();
		mTextPaint.setTextSize(32);
		mTextPaint.setColor(Color.parseColor("#FFFFFF"));
	}
	
	private int averH;
	
	private int mH ;
	private int mW ;
	private int mMaxHight = 500;
	private int topsurplus = mLineWitdh/2 + 10;
	
	private int mProgres = 0;
	private float mTotalProgress = mMaxHight;
	
	private int inCircleR = 6;
	private int outCircleR = 14;
	
	private int currentLineProgress = 0;
	private Paint mTextPaint;
	
	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		
		mH = w;
		mW = h;
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		//--平移画布
		canvas.translate(0, topsurplus);
		//--绘制背景色
		mLinePaint.setColor(Color.parseColor(mBackground));
		canvas.drawLine(mW/2, mMaxHight, mW/2, 0, mLinePaint);
		
		//--绘制前景色
		mLinePaint.setColor(Color.parseColor(mForeground));
		canvas.drawLine(mW/2, mMaxHight, mW/2, mMaxHight - currentLineProgress, mLinePaint);
		
		//--绘制圆环
		mPointPaint.setStyle(Paint.Style.STROKE);
		canvas.drawCircle(mW/2, mMaxHight - currentLineProgress , outCircleR, mPointPaint);
		mPointPaint.setStyle(Paint.Style.FILL);
		canvas.drawCircle(mW/2, mMaxHight - currentLineProgress , inCircleR, mPointPaint);
		//--绘制左侧文字
		for (int i = 0; i < mTips.length; i++) {
			float textW = mTextPaint.measureText(mTips[i]);
			FontMetrics fontMetrics = mTextPaint.getFontMetrics();
			int textH = (int) (fontMetrics.descent - fontMetrics.ascent);
			if(i == 0){
				canvas.drawText(mTips[i], mW/2 - textW*3/2, mMaxHight, mTextPaint);
				continue;
			}
			if(i == (mTips.length -1)){
				canvas.drawText(mTips[i], mW/2 - textW*3/2, topsurplus, mTextPaint);
				continue;
			}
			averH = mMaxHight/(mTips.length -1); 
			
			canvas.drawText(mTips[i], mW/2 - textW*3/2, mMaxHight - topsurplus - (averH*i - textH/2) , mTextPaint);
		}
		
	}
	
	public void setBackgroup(String mBackgroup){
		this.mBackground = mBackgroup;
	}
	
	public void setForeground(String mForeground){
		this.mForeground = mForeground;
	}
	
	
	public void setProgress(float mProgress){
		if(this.mProgres >= mTotalProgress && mProgress > 0)
			return;
		this.mProgres += mProgress;
		
		float percent = mProgres/mTotalProgress;
		
		if(percent <0){
			this.mProgres = 0;
			return;
		}
		this.currentLineProgress = (int) (percent*mMaxHight);
		invalidate();
	}
	
	public void setMax(float mTotalProgress){
		if(mTotalProgress < 0)
			new IllegalArgumentException("invalid args && doubi");
		this.mTotalProgress = mTotalProgress;
	}
}

效果图如下：

posted @ 2015-11-04 22:44  冒泡的章鱼  阅读(695)  评论(0)  编辑  收藏  举报