ZoomBar 设计

时间:2023-12-10 13:03:32
 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.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 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);
} 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; @Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
// TODO Auto-generated method stub
super.onSizeChanged(w, h, oldw, oldh); mH = w;
mW = h;
} @Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
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);
} 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;
}
}

效果图如下:

ZoomBar 设计

左侧增加文字属性:

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;
}
}

效果图如下:

ZoomBar 设计