package com.example.arc.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.MeasureSpec;
import android.widget.Toast;
/**
* Android custom View AirConditionerView hacking
*
* 声明：
* 本人在知乎看到Android非常漂亮的自定义View文章后，因为对其绘图部分运作机制好
* 奇，于是叫程梦真帮忙一起分析其中代码运作机制，花了两个半小时才将其整体hacking完。
*
*
*
*
* 一、程序来源：
* 1. 这种ui谁能给点思路？
*
* 2. github：mutexliu/ZhihuAnswer
* https://github.com/mutexliu/ZhihuAnswer
*
* 二、参考文档：
* 1. 为什么安卓android变量命名多以小写"m"开头 ?
*
* 2. 自定义View之onMeasure()
*
* 3. MeasureSpec介绍及使用详解
*
* 4. SweepGradient扫描渲染
*
* 5. SweepGradient
*
* 6. 覆写onLayout进行layout，含自定义ViewGroup例子
*
* 7. View.MeasureSpec
*
*
* 三、绘图的三个步骤：
* 1. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec);
* 2. protected void onLayout(boolean changed, int left, int top, int right, int bottom);
* View中不需要实现。
* 3. protected void onDraw(Canvas canvas);
*
*/
public class AirConditionerView extends View {
// 设置当前的温度
// 这个值只能在16-28度之间，下面的private void checkTemperature(float t)方法中有限制
private float mTemperature = 24f;
// 画圆的paint
private Paint mArcPaint;
// 画上线的paint
private Paint mLinePaint;
// 写字的paint
private Paint mTextPaint;
// 这里是将控件宽度分为600份，mMinSize代表其中一份
private float mMinSize;
// 设置空心边框的宽度，其实就是圆弧的宽度
private float mGapWidth;
// 内圆半径
private float mInnerRadius;
// 外圆半径
private float mRadius;
// 中线点
private float mCenter;
// 圆弧矩形
private RectF mArcRect;
// 渐变渲染
private SweepGradient mSweepGradient;
// 接下来的三个构造函数是固定的写法，最后调用自己定义的的init方法
public AirConditionerView(Context context) {
super(context, null);
}
public AirConditionerView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public AirConditionerView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init(){
// Paint.Style.FILL : 填充内部
// Paint.Style.FILL_AND_STROKE : 填充内部和描边
// Paint.Style.STROKE : 仅描边
// 画圆弧的笔
mArcPaint = new Paint();
mArcPaint.setStyle(Paint.Style.STROKE);
// 设置抗锯齿
mArcPaint.setAntiAlias(true);
// 画圆弧上的线的笔
mLinePaint = new Paint();
mLinePaint.setStyle(Paint.Style.STROKE);
mLinePaint.setAntiAlias(true);
// 设置笔的颜色
mLinePaint.setColor(0xffdddddd);
// 写字的笔
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(0xff64646f);
}
private void initSize(){
//寬度
mGapWidth = 56*mMinSize;
//内圆半径
mInnerRadius = 180*mMinSize;
mCenter = 300*mMinSize;
//外圆半径
mRadius = 208*mMinSize;
// 包含圆弧的矩形
mArcRect = new RectF(mCenter-mRadius, mCenter-mRadius, mCenter+mRadius, mCenter+mRadius);
// 设置渐变色、渐变位置
/**
* A subclass of Shader that draws a sweep gradient around a center point.
*
* Parameters
* cx The x-coordinate of the center
* cy The y-coordinate of the center
* colors The colors to be distributed between around the center. There must be at least 2 colors in the array.
* positions May be NULL. The relative position of each corresponding color in the colors array, beginning with 0 and ending with 1.0. If the values are not monotonic, the drawing may produce unexpected results. If positions is NULL, then the colors are automatically spaced evenly.
*/
int[] colors = {
0xFFE5BD7D,0xFFFAAA64,
0xFFFFFFFF, 0xFF6AE2FD,
0xFF8CD0E5, 0xFFA3CBCB,
0xFFBDC7B3, 0xFFD1C299,
0xFFE5BD7D,
};
float[] positions = {0,1f/8,2f/8,3f/8,4f/8,5f/8,6f/8,7f/8,1};
mSweepGradient = new SweepGradient(mCenter, mCenter, colors , positions);
}
@Override
protected void onDraw(Canvas canvas) {
/***************** 变色弧形部分 ************************/
// draw arc 設置空心邊框的寬度
// Set the width for stroking. Pass 0 to stroke in hairline mode. Hairlines always draws a single pixel independent of the canva's matrix.
mArcPaint.setStrokeWidth(mGapWidth);
int gapDegree = getDegree();
// 绘制梯度渐变
// Set or clear the shader object.
mArcPaint.setShader(mSweepGradient);
//画渐变色弧形
// Draw the specified arc, which will be scaled to fit inside the specified oval.
// If the start angle is negative or >= 360, the start angle is treated as start angle modulo 360.
// If the sweep angle is >= 360, then the oval is drawn completely. Note that this differs slightly from SkPath::arcTo, which treats the sweep angle modulo 360. If the sweep angle is negative, the sweep angle is treated as sweep angle modulo 360
// The arc is drawn clockwise. An angle of 0 degrees correspond to the geometric angle of 0 degrees (3 o'clock on a watch.)
// Parameters
// oval The bounds of oval used to define the shape and size of the arc
// startAngle Starting angle (in degrees) where the arc begins
// sweepAngle Sweep angle (in degrees) measured clockwise
// useCenter If true, include the center of the oval in the arc, and close it if it is being stroked. This will draw a wedge
// paint The paint used to draw the arc
canvas.drawArc(mArcRect, -225, gapDegree + 225, false, mArcPaint);
/***************** 白色弧形部分 ************************/
mArcPaint.setShader(null);
mArcPaint.setColor(Color.WHITE);
//画渐变色弧形
canvas.drawArc(mArcRect, gapDegree, 45 - gapDegree, false, mArcPaint);
// draw line
/***************** 画线部分 ************************/
mLinePaint.setStrokeWidth(mMinSize*1.5f);
// 将圆等分成120份，每份占360度的3度
for(int i = 0; i<120; i++){
// (75-45)*3 = 30*3 = 90，不绘直线部分占90度，正好符合空白区
if(i<=45 || i >= 75){
float top = mCenter-mInnerRadius-mGapWidth;
// 2度分成15格
if(i%15 == 0){
top = top - 20*mMinSize;
}
// 绘制垂直线
canvas.drawLine(mCenter, mCenter - mInnerRadius, mCenter, top, mLinePaint);
}
/**
* Preconcat the current matrix with the specified rotation.
*
* Parameters
* degrees The amount to rotate, in degrees
* px The x-coord for the pivot point (unchanged by the rotation)
* py The y-coord for the pivot point (unchanged by the rotation)
*
* 坐标系旋转3度，不是已经绘制的图形旋转3度
*/
canvas.rotate(3,mCenter,mCenter);
}
// draw text
/***************** 弧形外部显示温度度数文字 部分 ************************/
mTextPaint.setTextSize(mMinSize*30);
mTextPaint.setTextAlign(Paint.Align.CENTER);
for(int i = 16; i<29; i+=2){
/**
* 计算文字在圆弧边缘的位置，用到三角函数计算。
*/
float r = mInnerRadius+mGapWidth + 40*mMinSize;
float x = (float) (mCenter + r*Math.cos((26-i)/2*Math.PI/4));
float y = (float) (mCenter - r*Math.sin((26-i)/2*Math.PI/4));
canvas.drawText(""+i, x, y - ((mTextPaint.descent() + mTextPaint.ascent()) / 2), mTextPaint);
}
}
private int getDegree(){
checkTemperature(mTemperature);
return -225 + (int)((mTemperature-16)/12*90+0.5f)*3;
}
/***************** 用来控制事件的三个方法 ************************/
private void checkTemperature(float t){
if(t<16 || t > 28){
throw new RuntimeException("Temperature out of range");
}
}
public void setTemperature(float t){
checkTemperature(t);
mTemperature = t;
// To force a view to draw, call invalidate().
invalidate();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
// 获取触摸位置
float x = event.getX();
float y = event.getY();
// 计算触摸点到中心点的距离，判断该点是否在圆弧之内
double distance = Math.sqrt((x - mCenter) * (x - mCenter) + (y - mCenter) * (y - mCenter));
if(distance < mInnerRadius || distance > mInnerRadius + mGapWidth){
return false;
}
// 判断是否在空白区
double degree = Math.atan2(-(y-mCenter),x-mCenter);
if(-3*Math.PI/4<degree && degree < -Math.PI/4){
return false;
}
// 计算角度，并转换为对应的温度，设置当前温度，设置温度之后会自动对View进行重绘
if(degree < -3*Math.PI/4){
degree = degree + 2*Math.PI;
}
float t = (float) (26 - degree*8/Math.PI);
setTemperature(t);
return true;
}
/***************** 为了获得mMinSize ************************/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int desiredWidth = Integer.MAX_VALUE;
/**
* Extracts the mode from the supplied measure specification.
*
* Parameters
* measureSpec the measure specification to extract the mode from
* Returns
* UNSPECIFIED, AT_MOST or EXACTLY
*/
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width;
int height;
//Measure Width
if (widthMode == MeasureSpec.EXACTLY) {
//Must be this size
width = widthSize;
//Toast.makeText(getContext(), "MeasureSpec.EXACTLY", 0).show();
} else if (widthMode == MeasureSpec.AT_MOST) {
width = Math.min(desiredWidth, widthSize);
//Toast.makeText(getContext(), "MeasureSpec.AT_MOST"+desiredWidth+" "+widthSize, 0).show();
} else {
//Be whatever you want
width = desiredWidth;
//Toast.makeText(getContext(), "MeasureSpec.UNSPECIFIED", 0).show();
}
mMinSize = width/600f;
int size = width;
initSize();
//Measure Height
if (heightMode == MeasureSpec.EXACTLY) {
//Must be this size
height = heightSize;
} else if (heightMode == View.MeasureSpec.AT_MOST) {
//Can't be bigger than...
height = Math.min(size, heightSize);
} else {
//Be whatever you want
height = size;
}
//MUST CALL THIS
/**
* This method must be called by onMeasure(int, int) to store the measured width and measured height. Failing to do so will trigger an exception at measurement time.
*
* Parameters
* measuredWidth The measured width of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.
* measuredHeight The measured height of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.
*/
setMeasuredDimension(width, height);
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
