Android開發(fā)自定義雙向SeekBar拖動(dòng)條控件
目標(biāo):雙向拖動(dòng)的自定義View
國際慣例先預(yù)覽后實(shí)現(xiàn)
我們要實(shí)現(xiàn)的就是一個(gè)段位樣式的拖動(dòng)條,用來做篩選條件用的,細(xì)心的朋友可能會發(fā)現(xiàn)微信設(shè)置里面有個(gè)一個(gè)通用字體的設(shè)置,拖動(dòng)然后改變字體大小;
這個(gè)相對比微信那個(gè)的自定義view算是一個(gè)擴(kuò)展,因?yàn)槲覀兪请p向滑動(dòng),這個(gè)多考慮的一點(diǎn)就是手指拖動(dòng)的是哪一個(gè)滑動(dòng)塊!
我們先看下GIF預(yù)覽,然后我們今天就一步步實(shí)現(xiàn)這個(gè)小玩意…
實(shí)現(xiàn)步驟
- 自定義屬性的抽取
- view尺寸的計(jì)算
- 相關(guān)內(nèi)容的繪制(文字,原點(diǎn),背景進(jìn)度條,當(dāng)前進(jìn)度條等等)
- 處理滑動(dòng)事件
大體思路分四部分;我們一步步來;簡單的就一部帶過了
自定義屬性獲取
public ATDragView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); setBackgroundColor(ContextCompat.getColor(context, android.R.color.white)); TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ATDragView, defStyleAttr, R.style.def_dragview); int indexCount = typedArray.getIndexCount(); for (int i = 0; i < indexCount; i++) { int attr = typedArray.getIndex(i); switch (attr) { case R.styleable.ATDragView_seek_bg_color: seekBgColor = typedArray.getColor(attr, Color.BLACK); break; case R.styleable.ATDragView_seek_pb_color: seekPbColor = typedArray.getColor(attr, Color.BLACK); break; case R.styleable.ATDragView_seek_ball_solid_color: seekBallSolidColor = typedArray.getColor(attr, Color.BLACK); break; case R.styleable.ATDragView_seek_ball_stroke_color: seekBallStrokeColor = typedArray.getColor(attr, Color.BLACK); break; case R.styleable.ATDragView_seek_text_color: seekTextColor = typedArray.getColor(attr, Color.BLACK); break; case R.styleable.ATDragView_seek_text_size: seekTextSize = typedArray.getDimensionPixelSize(attr, 0); break; } } typedArray.recycle(); init(); }
拿到我們設(shè)置的屬性后,初始化我們需要的工具,比如畫筆,等
private void init() { currentMovingType = BallType.LEFT; seekTextPaint = creatPaint(seekTextColor, seekTextSize, Paint.Style.FILL, 0); seekBgPaint = creatPaint(seekBgColor, 0, Paint.Style.FILL, 0); seekBallPaint = creatPaint(seekBallSolidColor, 0, Paint.Style.FILL, 0); seekPbPaint = creatPaint(seekPbColor, 0, Paint.Style.FILL, 0); seekBallEndPaint = creatPaint(seekPbColor, 0, Paint.Style.FILL, 0); seekBallStrokePaint = creatPaint(seekBallStrokeColor, 0, Paint.Style.FILL, 0); seekBallStrokePaint.setShadowLayer(5, 2, 2, seekBallStrokeColor); }
確定自定義view尺寸
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int heightMode = MeasureSpec.getMode(heightMeasureSpec); int measureHeight; if (heightMode == MeasureSpec.AT_MOST || heightMode == MeasureSpec.UNSPECIFIED) { measureHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEF_HEIGHT, getContext().getResources().getDisplayMetrics()); heightMeasureSpec = MeasureSpec.makeMeasureSpec(measureHeight, MeasureSpec.EXACTLY); } super.onMeasure(widthMeasureSpec, heightMeasureSpec); }
繪制相關(guān)的內(nèi)容部分
這里我們分析效果圖發(fā)現(xiàn),需要繪制五部分,兩個(gè)圓,兩個(gè)進(jìn)度條一個(gè) 一堆文字,我們根據(jù)計(jì)算出來的view尺寸以及UI給的比例,即可繪制出來他們這個(gè)就是canvas的API使用
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); drawTexts(canvas); drawSeekBG(canvas); drawSeekPB(canvas); drawLeftCircle(canvas); drawRightCircle(canvas); }
具體的文字繪制,是根據(jù)外界傳入的數(shù)據(jù)來繪制的所以細(xì)節(jié)如下
private void drawTexts(Canvas canvas) { if (null == data) return; int size = data.size(); int unitWidth = getUnitWidth(size - 1); for (int i = 0; i < size; i++) { String tempDesc = data.get(i); float measureTextWidth = seekPbPaint.measureText(tempDesc); canvas.drawText(tempDesc, DEF_PADDING + unitWidth * i - measureTextWidth / 2, seekTextY, seekTextPaint); } }
這個(gè)View的核心部分不是繪制,而是計(jì)算,描述下我們具體的確定位置的思路
- 根據(jù)外界傳入的數(shù)據(jù)集合平均分view的寬度,求得平均一份的寬度大小
- 然后循環(huán)數(shù)據(jù)集合根據(jù)平均一份的寬度,確定沒個(gè)文字所在的坐標(biāo)值
然后我們看下計(jì)算的代碼;
// 計(jì)算單位寬度,view寬度-內(nèi)容的左右邊距以及圓球的半徑,自己體會下為什么 private int getUnitWidth(int count) { return (viewWidth - 2 * DEF_PADDING - 2 * seekBallRadio) / count; }
這個(gè)方法可以說是最重要的一個(gè)了,
//根據(jù)當(dāng)前手指觸摸的x坐標(biāo)計(jì)算,手指離開屏幕以后,應(yīng)該停留到哪個(gè)位置,比如滑動(dòng)到400到500之間但是不到600,我們不能讓他停留在半路上,讓他自動(dòng)找回他停留的左邊,也就是GIF中的小小回彈效果 private int getCurrentSeekX(int upX) { if (null == data) { return 0; } int unitWidth = getUnitWidth(data.size() - 1); return unitWidth * (upX / unitWidth); }
滑動(dòng)事件處理
核心的代碼全部完畢了,我們看下onTouch里面的處理
public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: //記錄手指按下的坐標(biāo) downX = (int) event.getX(); // 根據(jù)當(dāng)前坐標(biāo),確定要移動(dòng)哪個(gè)球球,因?yàn)槲覀冋f了,我們這個(gè)是有兩個(gè)球的,唯一的一個(gè)技巧點(diǎn)就是這個(gè)地方,根據(jù)手指按下的坐標(biāo)找到距離哪個(gè)球位置最近就移動(dòng)哪個(gè)球,這里注意下. currentMovingType = getMovingLeftOrRight(downX); if (BallType.LEFT == currentMovingType) { leftSeekBallX = downX; } else if (BallType.RIGHT == currentMovingType) { rightSeekBallX = downX; } seekPbRectF = new RectF(leftSeekBallX, viewHeight * SEEK_BG_SCALE, rightSeekBallX, viewHeight * SEEK_BG_SCALE + BG_HEIGHT); break; case MotionEvent.ACTION_MOVE: //移動(dòng)的時(shí)候根據(jù)計(jì)算出來的位置以及方向改變兩個(gè)小球的位置以及舉行進(jìn)度條的RectF的范圍 int moveX = (int) event.getX(); // 特殊情況處理,兩個(gè)球重合應(yīng)該怎么辦, if (leftSeekBallX == rightSeekBallX) { if (moveX - downX > 0) { currentMovingType = BallType.RIGHT; rightSeekBallX = moveX; } else { currentMovingType = BallType.LEFT; leftSeekBallX = moveX; } } else { if (BallType.LEFT == currentMovingType) { leftSeekBallX = leftSeekBallX - rightSeekBallX >= 0 ? rightSeekBallX : moveX; } else if (BallType.RIGHT == currentMovingType) { rightSeekBallX = rightSeekBallX - leftSeekBallX <= 0 ? leftSeekBallX : moveX; } } seekPbRectF = new RectF(leftSeekBallX, viewHeight * SEEK_BG_SCALE, rightSeekBallX, viewHeight * SEEK_BG_SCALE + BG_HEIGHT); break; case MotionEvent.ACTION_UP: // 手指離開的時(shí)候,確定返回給UI的數(shù)據(jù)集 if (BallType.LEFT == currentMovingType) { leftPosition = getDataPosition((int) event.getX()); leftSeekBallX = leftSeekBallX - rightSeekBallX >= 0 ? rightSeekBallX : getCurrentSeekX((int) event.getX()) + DEF_PADDING + seekBallRadio; } else if (BallType.RIGHT == currentMovingType) { rightPosition = getDataPosition((int) event.getX()); rightSeekBallX = rightSeekBallX - leftSeekBallX <= 0 ? leftSeekBallX : getCurrentSeekX((int) event.getX()) + DEF_PADDING + seekBallRadio; } if (null != dragFinishedListener) { dragFinishedListener.dragFinished(leftPosition, rightPosition); } break; } // 邊界處理,確保左邊的球不會超過右邊的,右邊的不會超過左邊的 if (BallType.LEFT == currentMovingType) { if (leftSeekBallX < seekBallRadio + DEF_PADDING) { leftSeekBallX = seekBallRadio + DEF_PADDING; } if (leftSeekBallX > viewWidth - seekBallRadio - DEF_PADDING) { leftSeekBallX = viewWidth - seekBallRadio - DEF_PADDING; } } else if (BallType.RIGHT == currentMovingType) { if (rightSeekBallX < seekBallRadio + DEF_PADDING) { rightSeekBallX = seekBallRadio + DEF_PADDING; } if (rightSeekBallX > viewWidth - seekBallRadio - DEF_PADDING) { rightSeekBallX = viewWidth - seekBallRadio - DEF_PADDING; } } seekPbRectF = new RectF(leftSeekBallX, viewHeight * SEEK_BG_SCALE, rightSeekBallX, viewHeight * SEEK_BG_SCALE + BG_HEIGHT); invalidate(); return true; }
大部分的核心的代碼就這么多,然后剩下的view寫完了就該把回調(diào)借口透出給UI 完活了…..
public void setData(List<String> data, OnDragFinishedListener dragFinishedListener) { this.dragFinishedListener = dragFinishedListener; this.data = data; leftPosition = 0; if (null != data && data.size() != 0) { rightPosition = data.size() - 1; } }
源代碼下載地址 https://github.com/GuoFeilong/ATDragViewDemo
以上就是Android開發(fā)自定義雙向SeekBar拖動(dòng)條控件的詳細(xì)內(nèi)容,更多關(guān)于Android自定義雙向SeekBar的資料請關(guān)注腳本之家其它相關(guān)文章!
- Android SeekBar控制視頻播放進(jìn)度實(shí)現(xiàn)過程講解
- Android?SeekBar充當(dāng)Progress實(shí)現(xiàn)兔兔進(jìn)度條Plus
- Android開發(fā)雙向滑動(dòng)選擇器范圍SeekBar實(shí)現(xiàn)
- Android開發(fā)手冊SeekBar拖動(dòng)條使用實(shí)例
- Android通過SeekBar調(diào)節(jié)布局背景顏色
- Android自定義SeekBar實(shí)現(xiàn)滑動(dòng)驗(yàn)證且不可點(diǎn)擊
- Android SeekBar實(shí)現(xiàn)平滑滾動(dòng)
- Android SeekBar在刷新使用中需要注意的問題
相關(guān)文章
Android 實(shí)現(xiàn)界面刷新的幾種方法
這篇文章主要介紹了Android 實(shí)現(xiàn)界面刷新的相關(guān)資料,這里提供了幾種方法及實(shí)例代碼,具有一定的參考價(jià)值,需要的朋友可以參考下2016-11-11安卓逆向騰訊動(dòng)漫app返回?cái)?shù)據(jù)加密分析案例分享
這篇文章主要為大家介紹了安卓逆向騰訊動(dòng)漫app返回?cái)?shù)據(jù)加密分析的案例分享,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2022-02-02Android控件RefreshableView實(shí)現(xiàn)下拉刷新
這篇文章主要為大家詳細(xì)介紹了Android控件RefreshableView實(shí)現(xiàn)下拉刷新,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11Android 線程之自定義帶消息循環(huán)Looper的實(shí)例
這篇文章主要介紹了Android 線程之自定義帶消息循環(huán)Looper的實(shí)例的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-10-10Android studio中生成引用.aar和.jar的方法詳解
這篇文章主要是講解.aar的生成與引用,文中的內(nèi)容屬于完全基礎(chǔ)性概念,對剛學(xué)習(xí)使用Android studio的朋友們很有幫助,有需要的可以參考學(xué)習(xí),下面來一起看看吧。2016-09-09Android編程之TabWidget選項(xiàng)卡用法實(shí)例分析
這篇文章主要介紹了Android編程之TabWidget選項(xiàng)卡用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了TabWidget選項(xiàng)卡的具體實(shí)現(xiàn)技巧與使用注意事項(xiàng),需要的朋友可以參考下2015-12-12