溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下Android自定義控件之實現可拖動控制的圓環控制條，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
先看看下面這張需求的樣圖：
然后在看一下最終實現的效果圖，可能是gif錄制軟件的問題，有一些浮影，忽略就好了：
首先要分析一下最核心的地方，如何獲取到滑動距離對應的弧長，看圖：
p1是手指按下的點，很明顯要想知道當前進度弧邊的值，就是要求出角d的值。
以p為圓心點，atan(b)=Math.atan((-p.y)/(-p.x));
所以角d的值為：Math.toDegrees(atan);
那么角b的值就得出來了，b=Math.toDegrees(atan) + mProgressOffest;
圖中的圓可以分為四個象限，同理可以得出四個象限中求得弧長的方法：
/**
* 更新當前進度對應弧度
*
* @param x 按下x坐標點
* @param y 按下y坐標點
*/
private void updateCurrentAngle(float x, float y) {
//根據坐標轉換成對應的角度
float pointX = x - mCenterX;
float pointY = y - mCenterY;
float tan_x;//根據左邊點所在象限處理過后的x值
float tan_y;//根據左邊點所在象限處理過后的y值
double atan;//所在象限弧邊angle
//01：第一象限-右上角區域
if (pointX >= 0 && pointY <= 0) {
tan_x = pointX;
tan_y = pointY * (-1);
atan = Math.atan(tan_x / tan_y);//求弧邊
mCurrentAngle = (int) Math.toDegrees(atan) + 90.f + mProgressOffest;
}
//02：第二象限-左上角區域
if (pointX <= 0 && pointY <= 0) {
tan_x = pointX * (-1);
tan_y = pointY * (-1);
atan = Math.atan(tan_y / tan_x);//求弧邊
mCurrentAngle = (int) Math.toDegrees(atan) + mProgressOffest;
}
//03：第三象限-左下角區域
if (pointX <= 0 && pointY >= 0) {
tan_x = pointX * (-1);
tan_y = pointY;
atan = Math.atan(tan_x / tan_y);//求弧邊
if ((int) Math.toDegrees(atan) >= (90.f - mProgressOffest)) {
mCurrentAngle = (int) Math.toDegrees(atan) - (90.f - mProgressOffest);
} else {
mCurrentAngle = (int) Math.toDegrees(atan) + 270.f + mProgressOffest;
}
}
//04：第四象限-右下角區域
if (pointX >= 0 && pointY >= 0) {
tan_x = pointX;
tan_y = pointY;
atan = Math.atan(tan_y / tan_x);//求弧邊
mCurrentAngle = (int) Math.toDegrees(atan) + 180.f + mProgressOffest;
}
}獲取手指按下的區域，避免誤判斷：
/**
* 按下時判斷按下的點是否按在圓環范圍內
*
* @param x x坐標點
* @param y y坐標點
*/
private boolean isTouchArc(float x, float y) {
double d = getTouchRadius(x, y);
return d >= mMinValidateTouchArcRadius && d <= mMaxValidateTouchArcRadius;
}
/**
* 計算某點到圓點的距離
*
* @param x x坐標點
* @param y y坐標點
*/
private double getTouchRadius(float x, float y) {
float cx = x - getWidth() / 2;
float cy = y - getHeight() / 2;
return Math.hypot(cx, cy);
}繪制bitmap；
/**
* 繪制小圓點bitmap
*
* @param canvas canvas
*/
private void drawDragBitmap(Canvas canvas) {
PointF progressPoint = ChartUtils.calcArcEndPointXY(mCenterX, mCenterY, mRadius,
mCurrentAngle, 180.f - mProgressOffest);
int left = (int) progressPoint.x - mDragBitmap.getWidth() / 2;
int top = (int) progressPoint.y - mDragBitmap.getHeight() / 2;
// mBitmapRect = new Rect(left, top, left + mDragBitmap.getWidth(), top +
// mDragBitmap.getHeight());
//
// canvas.drawBitmap(mDragBitmap,
// new Rect(0, 0, mDragBitmap.getWidth(), mDragBitmap.getHeight()),
// mBitmapRect, mBitmapPaint);
//bitmap直接使用BitmapUtils中的縮放方法縮放，可以不用Rect進行縮放，也可以通過限定Rect來限定bitmap大小
canvas.drawBitmap(mDragBitmap, left, top, mBitmapPaint);
}重寫onTouchEvent事件；
@Override
public boolean onTouchEvent(MotionEvent event) {
//獲取點擊位置的坐標
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (isTouchArc(x, y)) {
mTouchQuadrant = getTouchQuadrant(x, y);
mIsTouchOnArc = true;
updateCurrentAngle(x, y);
return true;
}
break;
case MotionEvent.ACTION_MOVE:
if (mIsTouchOnArc) {
updateCurrentAngle(x, y);
if (mOnCirqueProgressChangeListener != null)
mOnCirqueProgressChangeListener.onChange(mMinProgress, mMaxProgress,
Integer.parseInt(mText.replace("℃", "")));
}
break;
case MotionEvent.ACTION_UP:
mIsTouchOnArc = false;
mTouchQuadrant = 0;
if (mOnCirqueProgressChangeListener != null)
mOnCirqueProgressChangeListener.onChangeEnd(mMinProgress, mMaxProgress,
Integer.parseInt(mText.replace("℃", "")));
break;
}
invalidate();
return true;
}到這里基本這個自定義控件也就實現完了。但是！是不是！忘了點！什么？沒錯，就是讓我蛋疼不已的圓環上下限值判斷。
由于手指滑動的時候，當前的angle值的范圍是0-360，因此不可能簡單的限定上下限。沒有做任何判斷的話，在起點處是可以隨意滑動的，如下圖所示：
很明顯這樣是不行的，然后就是一陣雞飛狗跳，簡（ou）簡（xin）單（li）單（xue）的一陣折騰之后，基本實現了要求，最后更新currentAngle的代碼如下：
/**
* 更新當前進度對應弧度
*
* @param x 按下x坐標點
* @param y 按下y坐標點
*/
private void updateCurrentAngle(float x, float y) {
//根據坐標轉換成對應的角度
float pointX = x - mCenterX;
float pointY = y - mCenterY;
float tan_x;//根據左邊點所在象限處理過后的x值
float tan_y;//根據左邊點所在象限處理過后的y值
double atan;//所在象限弧邊angle
//01：第一象限-右上角區域
//保證dragBitmap在峰值的時候不會因為滑到這個象限更新currentAngle
if (pointX >= 0 && pointY <= 0) {
if (((mLastQuadrant == 3 && mLastAngle == 359.f)
|| (mLastQuadrant == 3 && mLastAngle == 0.f))
&& mTouchQuadrant != 1)
return;
tan_x = pointX;
tan_y = pointY * (-1);
atan = Math.atan(tan_x / tan_y);//求弧邊
mCurrentAngle = (int) Math.toDegrees(atan) + 90.f + mProgressOffest;
mLastQuadrant = 1;
}
//02：第二象限-左上角區域
if (pointX <= 0 && pointY <= 0) {
if (((mLastQuadrant == 3 && mLastAngle == 359.f)
|| (mLastQuadrant == 3 && mLastAngle == 0.f))
&& mTouchQuadrant != 2) {
return;
}
tan_x = pointX * (-1);
tan_y = pointY * (-1);
atan = Math.atan(tan_y / tan_x);//求弧邊
mCurrentAngle = (int) Math.toDegrees(atan) + mProgressOffest;
mLastQuadrant = 2;
}
//03：第三象限-左下角區域
if (pointX <= 0 && pointY >= 0) {
tan_x = pointX * (-1);
tan_y = pointY;
atan = Math.atan(tan_x / tan_y);//求弧邊
if ((int) Math.toDegrees(atan) >= (90.f - mProgressOffest)) {
mCurrentAngle = (int) Math.toDegrees(atan) - (90.f - mProgressOffest);
if (mLastAngle >= 270.f) {
mCurrentAngle = 359.f;
}
} else {
mCurrentAngle = (int) Math.toDegrees(atan) + 270.f + mProgressOffest;
if (mLastAngle <= 90.f) {
mCurrentAngle = 0.f;
}
}
mLastQuadrant = 3;
}
//04：第四象限-右下角區域
//保證dragBitmap在峰值的時候不會因為滑到這個象限更新currentAngle
if (pointX >= 0 && pointY >= 0) {
if (((mLastQuadrant == 3 && mLastAngle == 359.f)
|| (mLastQuadrant == 3 && mLastAngle == 0.f))
&& mTouchQuadrant != 4)
return;
tan_x = pointX;
tan_y = pointY;
atan = Math.atan(tan_y / tan_x);//求弧邊
mCurrentAngle = (int) Math.toDegrees(atan) + 180.f + mProgressOffest;
mLastQuadrant = 4;
}
mLastAngle = mCurrentAngle;
}其實做之前就真的覺得是挺簡單的一個自定義控件，結果萬萬沒想到因為最后這么一點代碼折騰了半天。雖然最后這坨代碼看著確實挺蛋疼的，但是暫時也想不到什么好的方法了，先這樣吧。
以上是“Android自定義控件之實現可拖動控制的圓環控制條”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
