Android自定義控件之可拖動(dòng)控制的圓環(huán)控制條實(shí)例代碼
更新時(shí)間：2019年04月19日 16:56:38 作者：Crush1ng
這篇文章主要介紹了Android自定義控件之可拖動(dòng)控制的圓環(huán)控制條實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
前幾天收到這么一個(gè)需求，本來以為挺簡單的，沒想到最后發(fā)現(xiàn)實(shí)現(xiàn)起來還是有點(diǎn)小麻煩的，在這里小小的總結(jié)一下。
先看看下面這張需求的樣圖：
然后在看一下最終實(shí)現(xiàn)的效果圖，可能是gif錄制軟件的問題，有一些浮影，忽略就好了：
首先要分析一下最核心的地方，如何獲取到滑動(dòng)距離對(duì)應(yīng)的弧長，看圖：
p1是手指按下的點(diǎn)，很明顯要想知道當(dāng)前進(jìn)度弧邊的值，就是要求出角d的值。
以p為圓心點(diǎn)，atan(b)=Math.atan((-p.y)/(-p.x));
所以角d的值為：Math.toDegrees(atan);
那么角b的值就得出來了，b=Math.toDegrees(atan) + mProgressOffest;
圖中的圓可以分為四個(gè)象限，同理可以得出四個(gè)象限中求得弧長的方法：
/**
* 更新當(dāng)前進(jìn)度對(duì)應(yīng)弧度
*
* @param x 按下x坐標(biāo)點(diǎn)
* @param y 按下y坐標(biāo)點(diǎn)
*/
private void updateCurrentAngle(float x, float y) {
//根據(jù)坐標(biāo)轉(zhuǎn)換成對(duì)應(yīng)的角度
float pointX = x - mCenterX;
float pointY = y - mCenterY;
float tan_x;//根據(jù)左邊點(diǎn)所在象限處理過后的x值
float tan_y;//根據(jù)左邊點(diǎn)所在象限處理過后的y值
double atan;//所在象限弧邊angle
//01：第一象限-右上角區(qū)域
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：第二象限-左上角區(qū)域
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：第三象限-左下角區(qū)域
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：第四象限-右下角區(qū)域
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;
}
}
獲取手指按下的區(qū)域，避免誤判斷：
/**
* 按下時(shí)判斷按下的點(diǎn)是否按在圓環(huán)范圍內(nèi)
*
* @param x x坐標(biāo)點(diǎn)
* @param y y坐標(biāo)點(diǎn)
*/
private boolean isTouchArc(float x, float y) {
double d = getTouchRadius(x, y);
return d >= mMinValidateTouchArcRadius && d <= mMaxValidateTouchArcRadius;
}
/**
* 計(jì)算某點(diǎn)到圓點(diǎn)的距離
*
* @param x x坐標(biāo)點(diǎn)
* @param y y坐標(biāo)點(diǎn)
*/
private double getTouchRadius(float x, float y) {
float cx = x - getWidth() / 2;
float cy = y - getHeight() / 2;
return Math.hypot(cx, cy);
}
繪制bitmap；
/**
* 繪制小圓點(diǎn)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進(jìn)行縮放，也可以通過限定Rect來限定bitmap大小
canvas.drawBitmap(mDragBitmap, left, top, mBitmapPaint);
}
重寫onTouchEvent事件；
@Override
public boolean onTouchEvent(MotionEvent event) {
//獲取點(diǎn)擊位置的坐標(biāo)
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;
}
到這里基本這個(gè)自定義控件也就實(shí)現(xiàn)完了。但是！是不是！忘了點(diǎn)！什么？沒錯(cuò)，就是讓我蛋疼不已的圓環(huán)上下限值判斷。
由于手指滑動(dòng)的時(shí)候，當(dāng)前的angle值的范圍是0-360，因此不可能簡單的限定上下限。沒有做任何判斷的話，在起點(diǎn)處是可以隨意滑動(dòng)的，如下圖所示：
很明顯這樣是不行的，然后就是一陣雞飛狗跳，簡（ou）簡（xin）單（li）單（xue）的一陣折騰之后，基本實(shí)現(xiàn)了要求，最后更新currentAngle的代碼如下：
/**
* 更新當(dāng)前進(jìn)度對(duì)應(yīng)弧度
*
* @param x 按下x坐標(biāo)點(diǎn)
* @param y 按下y坐標(biāo)點(diǎn)
*/
private void updateCurrentAngle(float x, float y) {
//根據(jù)坐標(biāo)轉(zhuǎn)換成對(duì)應(yīng)的角度
float pointX = x - mCenterX;
float pointY = y - mCenterY;
float tan_x;//根據(jù)左邊點(diǎn)所在象限處理過后的x值
float tan_y;//根據(jù)左邊點(diǎn)所在象限處理過后的y值
double atan;//所在象限弧邊angle
//01：第一象限-右上角區(qū)域
//保證dragBitmap在峰值的時(shí)候不會(huì)因?yàn)榛竭@個(gè)象限更新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：第二象限-左上角區(qū)域
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：第三象限-左下角區(qū)域
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：第四象限-右下角區(qū)域
//保證dragBitmap在峰值的時(shí)候不會(huì)因?yàn)榛竭@個(gè)象限更新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;
}
其實(shí)做之前就真的覺得是挺簡單的一個(gè)自定義控件，結(jié)果萬萬沒想到因?yàn)樽詈筮@么一點(diǎn)代碼折騰了半天。雖然最后這坨代碼看著確實(shí)挺蛋疼的，但是暫時(shí)也想不到什么好的方法了，先這樣吧。
最后貼上完整代碼：
https://github.com/Horrarndoo...
總結(jié)
以上所述是小編給大家介紹的Android自定義控件之可拖動(dòng)控制的圓環(huán)控制條實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
線程是程序員進(jìn)階的一道重要門檻。除了了解各類開線程的API之外，更需要理解線程本身到底是個(gè)什么樣的存在，并行是否真的高效？系統(tǒng)是怎么樣去調(diào)度線程的？開線程的方式那么多，什么樣的姿勢才正確？下面通過本文來好好再學(xué)習(xí)下。2016-08-08
Android中Fragment多層嵌套時(shí)onActivityResult無法正確回調(diào)問題的解決方法
這篇文章主要介紹了Android中Fragment多層嵌套時(shí)onActivityResult無法正確回調(diào)問題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家介紹了安卓逆向分析之酷狗signature的案例分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步2022-02-02
Android 藍(lán)牙開發(fā)實(shí)例解析
本文主要介紹Android 藍(lán)牙開發(fā),這里提供實(shí)例代碼和詳細(xì)解析實(shí)現(xiàn)方法，對(duì)開發(fā)Android藍(lán)牙開發(fā)的朋友提供簡單示例，有需要的朋友可以參考下2016-08-08
這篇文章主要介紹了Android串口通信apk源碼詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
Android Studio下添加assets目錄的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狝ndroid Studio下添加assets目錄的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家詳細(xì)介紹了Android圖片加載利器之Picasso的基本用法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Android自定義View之自定義評(píng)價(jià)打分控件RatingBar實(shí)現(xiàn)自定義星星大小和間距
Android開發(fā)中，我們經(jīng)常會(huì)用到對(duì)商家或者商品的評(píng)價(jià)，運(yùn)用星星進(jìn)行打分。這篇文章介紹了Android自定義View之自定義評(píng)價(jià)打分控件RatingBar可以自定義星星大小和間距的相關(guān)資料,感興趣的朋友一起看看吧2016-10-10
Android 用Time和Calendar獲取系統(tǒng)當(dāng)前時(shí)間源碼分享(年月日時(shí)分秒周幾)
這篇文章主要介紹了Android 用Time和Calendar獲取系統(tǒng)當(dāng)前時(shí)間源碼分享，包括年月日時(shí)分秒周幾的源碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
Adapter實(shí)現(xiàn)ListView帶多選框等狀態(tài)的自定義控件的注意事項(xiàng)
Android本身為ListView提供了幾個(gè)方便的Adapter，比如ArrayAdapter、SimpleCurrentAdapter等等,接下來介紹自定義Adapter實(shí)現(xiàn)ListView帶多選框等狀態(tài)控件的注意事項(xiàng)，感興趣的朋友可以詳細(xì)了解下，或許對(duì)你有所幫助2013-01-01