注意： 写该文章主要帮助自己记忆，贴出来希望可以给有同样问题的人解惑，不喜勿喷，可以提意见哦。
一、圆形温度计效果图如下：
1、当滑块在最低端的时候温度表示18摄氏度，当滑块在最顶端的时候温度表示32摄氏度，滑块每移动一小格，温度增加0.5摄氏度。
1510552606(1).png
说明：该图的背景不是代码画出来的，是UI切的图，主要做的就是勾画小滑块，让小滑块沿着有颜色的半圆弧滑动。
二、自定义控件相应方法讲解
onMeasure
根据视图的长宽来确定内圆半径，外圆半径，圆心点。
onDraw
正真绘制小滑块的方法，根据旋转的角度，绘制滑块的位置。
onTouchEvent
当人为的去滑滑动条的时候，就会调用该方法。
setDegree
通过该方法设置温度示数，来计算滑块需要旋转的角度。
flag变量
用于表示是否要更新滑块的位置，更新滑块的几个条件如下：
（1）抬手或者取消，都需要更新视图。
（2）当移动的过程中，超过规定的范围也需要更新视图。
2、自定义圆形温度计实现代码：
public class TempCircularSeekBar extends View {
private Paint circleColorpaint;
//绘制滑块的画笔
private Paint innerColor;
//滑块需要旋转的角度
private int angle = 0;
//圆环的宽度
private int barWidth = 50;
//内部圆的半径
private float innerRadius;
//外部圆的半径
private float outerRadius;
//圆心的x坐标
private float cx;
//圆心的y坐标
private float cy;
//The left bound for the circle RectF
private float left;
//The right bound for the circle RectF
private float right;
//The top bound for the circle RectF
private float top;
// The bottom bound for the circle RectF
private float bottom;
//The adjustment factor. This adds an adjustment of the specified
//size to
private float adjustmentFactor = 100;
/** The rectangle containing our circles and arcs. */
private RectF rectcenter = new RectF();
private TempDegreeCallback degreecallback;
/**
* Instantiates a new circular seek bar.
*
* @param context
* the context
* @param attrs
* the attrs
* @param defStyle
* the def style
*/
public TempCircularSeekBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
barWidth = ToolUtils.dip2px(context, 25);
adjustmentFactor = 80;
circleColorpaint = new Paint();
circleColorpaint.setStyle(Paint.Style.STROKE);
circleColorpaint.setColor(Color.parseColor("#00ffffff"));
circleColorpaint.setAntiAlias(true);
innerColor = new Paint();
innerColor.setStyle(Paint.Style.FILL);
innerColor.setColor(Color.parseColor("#00ffffff"));
innerColor.setAntiAlias(true);
innerColor.setStrokeWidth(10);
innerColor.setColor(Color.parseColor("#00ffffff"));
}
/**
* Instantiates a new circular seek bar.
*
* @param context
* the context
* @param attrs
* the attrs
*/
public TempCircularSeekBar(Context context, AttributeSet attrs)
{
this(context, attrs,0);
}
/**
* Instantiates a new circular seek bar.
*
* @param context
* the context
*/
public TempCircularSeekBar(Context context) {
this(context,null);
}
public void setCallback(TempDegreeCallback callback) {
this.degreecallback = callback;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
final int width = MeasureSpec.getSize(widthMeasureSpec);
final int height = MeasureSpec.getSize(heightMeasureSpec);
int size = (width > height) ? height : width; // Choose the smaller
cx = width / 2; // Center X for circle
cy = height / 2; // Center Y for circle
outerRadius = (size / 2) - 25; // Radius of the outer circle
innerRadius = outerRadius - barWidth; // Radius of the inner circle
left = cx - outerRadius; // Calculate left bound of our rect
right = cx + outerRadius;// Calculate right bound of our rect
top = cy - outerRadius;// Calculate top bound of our rect
bottom = cy + outerRadius;// Calculate bottom bound of our rect
rectcenter.set(left, top, right, bottom);
}
@Override
protected void onDraw(Canvas canvas) {
circleColorpaint.setStrokeWidth(barWidth);
if (angle > 201) {
angle = 201;
}
// 画内部填充的圆形
canvas.drawArc(rectcenter, 0, 360, false, circleColorpaint);
canvas.restore();
if (angle <= 201 && angle >= 0) {
float toCenter = outerRadius;
double miniDegree = Math.PI * (270 - angle) / 180;
float leftMini = (int) (toCenter * Math.cos(miniDegree)) + left + toCenter;
float topMini = -(int) (toCenter * Math.sin(miniDegree)) + top + toCenter;
// 滑动圆心坐标
// 根据滑动圆心坐标 计算长方形四个角的坐标（设 长方形 长度为l 高度为h）
int lenth = 28;//小滑块的高
int width = 13;//小滑块的宽
double pathDegree;
if (angle >= 90) {
pathDegree = Math.PI * (angle - 90) / 180;
} else {
pathDegree = Math.PI * (angle + 90) / 180;
}
float x1 = (int) (leftMini - lenth * Math.cos(pathDegree) - width * Math.sin(pathDegree));
float y1 = (int) (topMini - lenth * Math.sin(pathDegree) + width * Math.cos(pathDegree));
float x2 = (int) (leftMini - lenth * Math.cos(pathDegree) + width * Math.sin(pathDegree));
float y2 = (int) (topMini - lenth * Math.sin(pathDegree) - width * Math.cos(pathDegree));
float x3 = (int) (leftMini + lenth * Math.cos(pathDegree) + width * Math.sin(pathDegree));
float y3 = (int) (topMini + lenth * Math.sin(pathDegree) - width * Math.cos(pathDegree));
float x4 = (int) (leftMini + lenth * Math.cos(pathDegree) - width * Math.sin(pathDegree));
float y4 = (int) (topMini + lenth * Math.sin(pathDegree) + width * Math.cos(pathDegree));
Log.e("rectcenterminicircle", "滑动角度 ：" + angle + " 滑块偏移角度 ：" + miniDegree * 180 / Math.PI + " 圆心 ：" + leftMini
+ "---" + topMini + "------长方形 ：" + "(" + x1 + "," + y1 + ")" + " (" + x2 + "," + y2 + ")" + " (" + x3
+ "," + y3 + ")" + " (" + x4 + "," + y4 + ")");
// 由于画布不能直接画长方形 只能通过画线包裹成一个长方形
Path path = new Path();
path.moveTo(x1, y1);
path.lineTo(x2, y2);
path.lineTo(x3, y3);
path.lineTo(x4, y4);
path.moveTo(x1, y1);
path.close();
innerColor.setStyle(Paint.Style.FILL);
innerColor.setColor(Color.parseColor("#99F7F9Fd"));
canvas.drawPath(path, innerColor);
}
canvas.save();
canvas.translate(cx, cy);
float roteangle = 180;//
canvas.rotate(roteangle);
canvas.restore();
super.onDraw(canvas);
}
/**
* Set the degree.
*
* @param degree
* the new degree
*/
public void setDegree(float degree) {
int angle = (int) ((degree - 18) * 2 * 7);
Log.d("Tests", "setDegree angle="+angle);
//防止滑块滑不到最顶部
if(angle==196){
this.angle=201;
}else {
this.angle = angle;
}
invalidate();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
flag=false;
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
flag=false;
//当抬手的时候更新
moved(x, y);
break;
case MotionEvent.ACTION_MOVE:
flag=false;
float distance = (float) Math.sqrt(Math.pow((x - cx), 2) + Math.pow((y - cy), 2));
if (distance > outerRadius + (adjustmentFactor-15) || distance < innerRadius - (adjustmentFactor-15)){
flag=true;
}
moved(x, y);
break;
case MotionEvent.ACTION_UP:
flag=true;
moved(x, y);
break;
case MotionEvent.ACTION_CANCEL:
flag=true;
moved(x, y);
break;
}
return true;
}
/**
* Moved.
*
* @param x
* the x
* @param y
* the y
*/
private void moved(float x, float y) {
float distance = (float) Math.sqrt(Math.pow((x - cx), 2) + Math.pow((y - cy), 2));
if (distance < outerRadius + adjustmentFactor && distance > innerRadius - adjustmentFactor) {
float degrees = (float) ((float) ((Math.toDegrees(Math.atan2(cx - x, y - cy)) + 360.0)) % 360.0);
if (degrees < 0) {
degrees += 2 * Math.PI;
}
if (degrees <= 250||degrees>=315&°rees<=360) {
if(degrees>=315&°rees<=360){
degrees=0;
flag=true;
}else if(degrees>=200&°rees<=250){
degrees=200;
flag=true;
}
int angle = Math.round(degrees);
if (angle < 0)
angle = 0;
// 0-210°是滑动范围 根据自己要分割的刻度 一等份角度数 text是刻度 452行有刻度的画法和分割规律
float temp = (float)(((angle + 3) / 7) * 0.5 + 18);
if(temp>32){
temp=32;
}
//根据温度计算滑动的角度
setDegree(temp);
//当抬手或者滑出了边际则调到该函数
if (this.degreecallback != null&&flag) {
this.degreecallback.Degree(temp);
flag=false;
}
}
}
}
//更加温度值，设置角度
public abstract interface TempDegreeCallback {
public abstract void Degree(float degree);
}}
布局文件：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/temperature_bg" >
<com.hwatong.kongtiaoxiugai_12a.TempCircularSeekBar
android:id="@+id/temp_seekbar"
android:layout_width="279dp"
android:layout_height="280dp"
android:background="@drawable/temperature_bg" />
<TextView
android:id="@+id/temperature_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/mintempnum"
android:textColor="@color/white_air"
android:textSize="25sp" />
<ImageButton
android:id="@+id/temperature_up_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="-40dp"
android:background="@drawable/up_selector" />
<ImageButton
android:id="@+id/temperature_down_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:background="@drawable/down_selector" />
</FrameLayout>
使用自定义控件的文件
public class MainActivity extends Activity{
private TempCircularSeekBar mTempCircularSeekBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.airconditional_main);
mTempCircularSeekBar = (TempCircularSeekBar) findViewById(R.id.temp_seekbar);
mTempCircularSeekBar.setCallback(mTempDegreeCallback);
//根据温度改变滑块的位置。
mTempCircularSeekBar.setDegree(32);
}
TempDegreeCallback mTempDegreeCallback = new TempDegreeCallback() {
@Override
public void Degree(float degree) {
//在这里可以根据滑块的角度设置温度值
}}；
}
网友评论