溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一 基礎：
自定義View實現跟隨手指滾動的刻度尺，實現了類似SeekBar的滑動選中效果。項目地址，歡迎star！
UI圖：
功能：
二 實現：
先扯一下，再看別人寫的控件的時候總有一種一臉懵逼的感覺，好多凌亂的變量和一大堆的計算邏輯都不知道干嘛用的。比如：PullToRefreshLayout。除非自己按著整體的設計流程寫一遍，一步步的寫，等出了bug你就明白那些操作的價值。結合之前讀第三方控件的經驗，寫這個刻度尺控件的時候就一步步的去完成，從簡單的繪制，到點擊事件，再到滑動fling，最后滑動結束更正滑動位置。每一步遇到的問題都記錄下來，之后再補全解決方法，這就是成長。
1.繪制刻度
這里省略了onMeasure，這里的需求只是計算一下高度就好了。接著看onDraw方法:
private void drawRuler(Canvas canvas) {
mTextIndex = 0;
for (int index = 0; index <= mRulerHelper.getCounts(); index++) {
boolean longLine = mRulerHelper.isLongLine(index);
int lineCount = mLineWidth * index;
mRect.left = index * mLineSpace + lineCount + mMarginLeft;
mRect.top = getStartY(longLine);
mRect.right = mRect.left + mLineWidth;
mRect.bottom = getEndY();
if (longLine) {
if (!mRulerHelper.isFull()) {
mRulerHelper.addPoint(mRect.left);
}
String text = mRulerHelper.getTextByIndex(mTextIndex);
mTextIndex++;
canvas.drawText(text, mRect.centerX(), getMeasuredHeight() - dpFor14, mTextPaint);
}
canvas.drawRect(mRect, mLinePaint);
mRect.setEmpty();
}
}
這里解釋一下為什么刻度采用Rect而不是設置line的寬度，其實最簡單的就是設置Paint的寬度然后canvas.drawLine()。剛繪制的時候就是采用的canvas.drawLine()，繪制完之后發現每個刻度的寬度都被削減了一半，canvas.drawLine()是在設置的（x，y）坐標開始平分line的寬度的（這個你要去體驗一下就會明白）。所以給定坐標之后每個刻度看起來就像是被擠了一樣，所以才采用Rect簡單方便一點。進入正題，繪制有幾個問題：
這個比較靈活，要看具體的需求了。也就是一大格里面包含幾個刻度，一般是包含10個刻度，刻度包括長短刻度。然后一大格刻度表示多少數值，也就是offSet值是多少。之后刻度的范圍也要明確并且能被offSet整除，比如范圍是（low，height），那么（height-low）/（offSet/10）就是你需要繪制多少個刻度。
public void setScope(int start, int count,int offSet) {
if(offSet != 0) {
this.offSet = offSet;
}
lineNumbers = (count - start) / (this.offSet / 10);
}
這個問題要確定一大格之間有幾個小刻度了，一般為10個的話，那么當前的index/10能整除就是到了該繪制長刻度的時候了，mRulerHelper.getCounts()就是我們計算出的總共有幾個刻度。
for (int index = 0; index <= mRulerHelper.getCounts(); index++) {
boolean longLine = mRulerHelper.isLongLine(index);
...
if (longLine) {
canvas.drawText(text, mRect.centerX(), getMeasuredHeight() - dpFor14, mTextPaint);
}
canvas.drawRect(mRect, mLinePaint);
}
之后呢就是我們計算Rect的左邊跟繪制Text的坐標了。。。不細講。。。具體可看這里啊。
有個問題就是你得明白Rect的left top right bottom分別表示那個區間：
[圖片上傳失敗...(image-5d1f26-1554206618213)]
2.處理點擊事件
目前采取的是點擊該View的事件全攔截，感覺也沒別的什么需求需要過濾事件了。事件處理起來很簡單的就是計算出每次移動的差值就好了：
case MotionEvent.ACTION_DOWN:
mPressUp = false;
isFling = false;
startX = event.getX();
break;
case MotionEvent.ACTION_MOVE:
mPressUp = false;
float distance = event.getX() - startX;
if (mPreDistance != distance) {
doScroll((int) -distance, 0, 0);
invalidate();
}
startX = event.getX();
break;
問題就是：
刻度尺如果范圍很大的話總寬度肯定會超出屏幕的，但是Canvas不會繪制屏幕之外的部分，除非等到屏幕之外的部分顯示出來。另外讓View滑動的方法很多，最初使用的是scrollTo方法，該方法滑動的是View的內容，也符合我們要的效果，不過結果查強人意。差值計算之后稍微一滑動，刻度直接沒了，成了一片空白，看起來那個變化值也不大，ok！這是一個疑問ScrollTo+invalidate內容不會顯示，直接沒了。之后呢換成了Scroller，這個玩意不用太多的介紹了，使用之后便達到了我們想要的效果，一樣的變化值。
private void doScroll(int dx, int dy, int duration) {
mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), dx, dy, duration);
}
是否有疑問？既然屏幕之外的東西Canvas不會去繪制，那么滑動的時候肯定是將屏幕之外的部分滑到屏幕中，也就是在滑動的過程中要繼續繪制。從上面的繪制代碼能看到這個繪制過程中跟滑動并沒有任何的聯系，只是單純的for循環繪制而已，為什么呢？第一 我們scrollTo移動的是View的內容，一開始View的實際寬度會超過屏幕的寬度，當沒有滑動的時候，View只會繪制屏幕中的可見區域，即使for循環依然執行也不會繪制到屏幕外面，然后在滑動的時候會不斷的觸發invalidate()方法，也就是for循環會被觸發，View開始在新出現的未繪制的區域繪制。已經繪制過的區域會被滑出屏幕，這樣就會給用戶一個平滑的效果。做完以上兩步你的刻度尺已經有了滑動的效果了。下面就是解決邊界的問題。
3.邊界的處理
UI說當超過邊界之后松手回彈，這樣的交互效果好。這種交互其實最簡單了，在手指離開的時候計算當前的x坐標距離中心指針的x坐標的距離，然后讓Scroller去執行回彈的效果。不過這個操作是整個控件中最為重要的一步，因為當手指抬起的時候，中間指針必須指向一個長刻度，不能停留再短刻度上面，那這個操作就跟邊界回彈的操作重合了，邊界回彈也是讓最小或者最大長刻度滑動到中間指針的位置。所以松手之后的操作就分為三種：
currentX ：滑動停止時的x坐標。
Point：中間指針位置。
low：刻度尺的最小邊界。
height：刻度尺的最大邊界。
-----------------Point-currentX--low------height----------
------low-------currentX--Point--------height----------
------low-------height-----currentX-Point-------
簡單的表示了一下三種位置。
處理就是，先計算出滑動結束之后的當前x坐標跟中間Point的x坐標的距離，然后不為0就使用Scroller滑動：
//計算距離
public int getScrollDistance(int x) {
for (int i = 0; i < mPoints.size(); i++) {
int pointX = mPoints.get(i);
if (0 == i && x < pointX) {
//當前的x比第一個位置的x坐標都小 也就是需要往右移動到第一個長線的位置.
setCurrentText(0);
return x - pointX;
} else if (i == mPoints.size() - 1 && x > pointX) {
//當前的x比最后一個左邊的x都大,也就是需要往左移動到最后一個長線位置.
setCurrentText(texts.size() - 1);
return x - pointX;
} else {
if (i + 1 < mPoints.size()) {
int nextX = mPoints.get(i + 1);
if (x > pointX && x <= nextX) {
int distance = (nextX - pointX) / 2;
int dis = x - pointX;
if (dis > distance) {
//說明往下一個移動
setCurrentText(i + 1);
return x - nextX;
} else {
setCurrentText(i);
//往前一個移動
return x - pointX;
}
}
}
}
}
return 0;
}
開始執行滑動:
public void scrollFinish() {
int finalX = mScroller.getFinalX();
int centerPointX = mRulerHelper.getCenterPointX();
int currentX = centerPointX + finalX;
int scrollDistance = mRulerHelper.getScrollDistance(currentX);
if (0 != scrollDistance) {
//第一個參數是滾動開始時的x的坐標
//第二個參數是滾動開始時的y的坐標
//第三個參數是在X軸上滾動的距離, 負數向右滾動.
//第四個參數是在Y軸上滾動的距離,負數向下滾動.
mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), -scrollDistance, 0, 300);
invalidate();
if (scrollSelected != null) {
scrollSelected.selected(getCurrentText());
}
}
}
這樣已經可以使用了，滑動的刻度尺已經完成了。不過交給UI一看，人家說這東西怎么那么難滑動呢，每次怎么只能滑一大格呢，我要那種fling的感覺。確實，因為在MotionEvent.ACTION_UP的時候都會去矯正一下位置，所以給使用者的感覺就是一次只能滑一格，滑動體驗很不好，只能去增加fling。。。
4.fling
增加fling多簡單啊，Scroller不是有這個方法嗎mScroller.fling()，使用方法這里不再介紹了。fling增加之后，用戶的體驗確實好了很多，不過一個新的問題出現了，就是在fling停止之后怎么矯正位置呢？這是個大問題，卡住了好大一會兒，最終找到了解決方法：
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
//這里是結束之后調用矯正位置的方法。scrollFinish（）。
if (mScroller.getCurrX() == mScroller.getFinalX() && mPressUp && isFling) {
mPressUp = false;
isFling = false;
scrollFinish();
}
scrollTo(mScroller.getCurrX(), 0);
invalidate();
}
super.computeScroll();
}
三 結束
效果在文章一開始已經展示出來了，指針并沒有在該自定義View中繪制，底部的線也是，因為對于指針的需求是多變的，所以用了一個自定義的ViewGroup去完成剩余的指針和底部的實線。底部的實線放在Group中是因為我們的UI效果，底部的實線上面可以沒有刻度，也就是這個底部的線是固定在底部，比我畫在刻度下面跟隨刻度滑動要簡單的多。想到之后的變體，感覺刻度本身的View跟指針分開是比較好擴展的，Group只需要給刻度尺控件傳入中間指針的（x，y）坐標就好了。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
