在之前的項(xiàng)目中有一個(gè)輸入身高的需求，本來是通過一個(gè)EditText進(jìn)行輸入的，但是做出來后我咋看咋別扭，之前玩薄荷健康，里面有一個(gè)身高體重的選擇，是通過一個(gè)刻度尺來實(shí)現(xiàn)的，效果還不錯(cuò)。但是Android中并沒有為我們提供刻度尺這個(gè)View，所以就決定自定義一個(gè)出來。
我們先來看效果圖
可以通過左右滑動(dòng)進(jìn)行身高的選擇，下面我將會(huì)詳細(xì)的分析整個(gè)View的實(shí)現(xiàn)過程。
1 圖像繪制
1.1刻度線的繪制
private void drawScale(Canvas canvas){
for(int i =0;i<=mScaleTotalCount;i++){
if(i%10==0){
mScalePaint.setStrokeWidth(6);
canvas.drawLine(i*mScaleMargin,0,
i*mScaleMargin,mScaleHeight*2,mScalePaint);
canvas.drawText(i+mStartScale+"",i*mScaleMargin,
mScaleHeight*2+mOffset,mTextPaint);
}else {
mScalePaint.setStrokeWidth(3);
canvas.drawLine(i*mScaleMargin,0,
i*mScaleMargin,mScaleHeight,mScalePaint);
}
}
}
刻度線的繪制還是非常簡單的，mScaleTotalCount和mScaleMargin分別代表總刻度數(shù)和每個(gè)刻度之間的間隔。
1.2指示器的繪制
在這里我事先提一下，中間的指示器我是在另一個(gè)ViewGroup中進(jìn)行繪制的，具體為什么后面我會(huì)詳細(xì)講解的。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Path path = new Path();
path.moveTo(mCenterX-mOffset,0);
path.lineTo(mCenterX+mOffset,0);
path.lineTo(mCenterX, (float) (mOffset*1.2));
path.close();
canvas.drawPath(path,mPaint);
}
指示器是一個(gè)白色的三角形，在本例中我是通過Path進(jìn)行繪制的，其中mCenterX為X軸中心坐標(biāo)，整個(gè)繪制繪制過程也是非常簡單。
2 觸摸反饋
2.1 scrollTo()、scrollBy()、Scroller
一個(gè)標(biāo)準(zhǔn)的刻度尺是可以左右滑動(dòng)的，所以接下來我就為大家詳細(xì)的去講解觸摸滑動(dòng)的實(shí)現(xiàn)過程。在講解之前我需要先給同學(xué)們普及幾個(gè)概念：scrollTo()、scrollBy()和Scroller，如果了解的同學(xué)可以直接跳過此環(huán)節(jié)。
在Android中View的移動(dòng)可以通過調(diào)用自身的scrollTo(int x,int y)跟scrollBy(int x,int y)進(jìn)行，兩者的區(qū)別是：scrollTo(int x,int y)的每一次移動(dòng)是相對于原始位置進(jìn)行的。而scrollBy(int x,int y)的移動(dòng)是相對一上一次位置進(jìn)行的，其實(shí)scrollBy()內(nèi)部也是通過scrollTo(int x,int y)進(jìn)行實(shí)現(xiàn)的。兩個(gè)移動(dòng)方法都遵循右正左負(fù)。
下面我就著重說一下Scroller這個(gè)類。先回憶一個(gè)場景，ViewPager我們大家應(yīng)該都很熟悉，ViewPager在滑動(dòng)的時(shí)候它會(huì)自動(dòng)的、平滑的矯正到相應(yīng)的位置，這個(gè)功能是怎么實(shí)現(xiàn)的呢？答案就是通過Scroller。Scroller是Android為我們提供的一個(gè)專門用于處理滾動(dòng)效果的工具類，Scroller本身是不會(huì)使View進(jìn)行移動(dòng)的，而是提供了一套算法，具體的移動(dòng)還是通過scrollTo()和scrollBy()進(jìn)行的。Scroller的使用也是非常簡單的，具體可以分為如下幾個(gè)步驟：
1.創(chuàng)建Scroller實(shí)例
mScroller = new Scroller(context);
2.調(diào)用startScroll()對滾動(dòng)操作的設(shè)置
startX和 startY為起始位置，dx和 dy為偏移量
mScroller.startScroll(int startX, int startY, int dx, int dy);
3.重寫View的computeScroll()方法，在其內(nèi)部結(jié)合Scroller實(shí)現(xiàn)具體的移動(dòng)操作
@Override
public void computeScroll() {
super.computeScroll();
if(mScroller.computeScrollOffset()){//判斷本次滾動(dòng)是否結(jié)束
scrollTo(mScroller.getCurrX(),0);//移動(dòng)View
postInvalidate();//刷新界面
}
}
computeScroll()是由onDraw()調(diào)用的，所以要加上一個(gè)結(jié)束標(biāo)記即computeScrollOffset()，否則會(huì)無限遞歸。本文章對Scroller的敘述先告一段落了，如果想詳細(xì)的了解Scroller請參考郭霖大神這篇文章
2.2 實(shí)現(xiàn)View的滾動(dòng)
首先我們要重寫onTouchEvent()
@Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int) event.getX();
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
if(mScroller!=null&&mScroller.isFinished()){
mScroller.abortAnimation();
}
mLastScale = x;
return true;
case MotionEvent.ACTION_MOVE:
int dx = mLastScale - x + mScrollX;
scrollTo(dx,0);
changeScale();
return true;
case MotionEvent.ACTION_UP:
mScrollX = getScrollX();
int transX;
int offSetX = mScaleMargin*(mScreenScaleCount/2);
if(mScrollX>mWidth-offSetX){//超出最大值
transX = getScrollX() - mWidth + offSetX;
mScrollX = mWidth - offSetX;
Log.i("zs","大于最大值");
}else if(getScrollX()<-offSetX){//小于最小值
transX = getScrollX() + offSetX;
mScrollX = -offSetX;
Log.i("zs","小于最小值");
}else {//在范圍內(nèi)
transX = getScrollX()%mScaleMargin;
if(transX>(mScaleMargin/2)){
transX = -(mScaleMargin - transX);
}
mScrollX = getScrollX() - transX;
Log.i("zs","在范圍內(nèi)");
}
mScroller.startScroll(getScrollX(),0,-transX,0);
postInvalidate();
return true;
}
return super.onTouchEvent(event);
}
private void changeScale(){
int minScale = mStartScale;
int maxScale = mStartScale + mScaleTotalCount;
int scrollScale = (int) Math.rint((double) getScrollX()/
(double) mScaleMargin);
//初始刻度值+滾動(dòng)刻度值
mCurrentScale = scrollScale + mScreenScaleCount/2 + mStartScale;
if(mScrollCallback!=null){
//超出最大值
if(mCurrentScale>maxScale){
mCurrentScale = maxScale ;
}
//低于最小值
else if(mCurrentScale<minScale){
mCurrentScale = minScale ;
}
mScrollCallback.setScale(mCurrentScale);
}
}
在DOWN事件中進(jìn)行mScroller的動(dòng)畫的初始化并且記錄當(dāng)前X軸坐標(biāo)的值。在MOVE時(shí)間中進(jìn)行View的移動(dòng)并且通過接口將當(dāng)前刻度值進(jìn)行傳遞。在UP事件中進(jìn)行位置的矯正，矯正是通過 Scroller的startScroll()結(jié)合computeScroll()進(jìn)行的。整個(gè)View的繪制以及滑動(dòng)目前我們都已經(jīng)完成，這里要講一下之前文章中提到過得為什么指示器要單獨(dú)用一個(gè)ViewGroup，其實(shí)剛開始指示器是寫在一起的，但是View不管滑動(dòng)到什么位置，指示器都是要在屏幕中間的，這樣就會(huì)有一個(gè)小問題，在滑動(dòng)中要不斷矯正指示器的位置，雖然最終效果是比較和諧的，但是滑動(dòng)過程中指示器會(huì)左右漂浮不定，很影響美觀，所以我就將指示器寫在了另外一個(gè)View中，通過自定義組合View將指示器覆蓋在刻度尺上面。
Demo已托管至github：刻度尺
總結(jié)
整個(gè)刻度尺的實(shí)現(xiàn)可分為四部分：圖像的繪制、觸摸滑動(dòng)、指示器的繪制、組合View，其中觸摸滑動(dòng)是核心點(diǎn)和難點(diǎn)，但掌握了scrollTo()和Scroller實(shí)現(xiàn)起來還是非常簡單的，最后將刻度尺和指示器進(jìn)行組合。這里吐槽一下我自己，明明就一個(gè)刻度尺確用了兩個(gè)個(gè)View來實(shí)現(xiàn)，雖然效果看起來還不錯(cuò)但還是感覺比較笨重，如果哪位老兄有好的解決方案希望及時(shí)告知，在此萬分感謝。另外，由于項(xiàng)目中用到的那個(gè)自定義刻度尺參雜了很多項(xiàng)目中的內(nèi)容，所以不便拿出來講解，文章中講到的這個(gè)實(shí)例是我臨時(shí)寫的，為了便于描述，自定義屬性我就沒加進(jìn)來，如果大家想用到自己的項(xiàng)目中適配下尺寸即可，不過我還是希望大家能夠自己手動(dòng)的去寫，我寫這篇文章的目的就是為那些不懂得同學(xué)打通思路。
說些題外話，這是我的第二篇文章，寫起來如同第一篇文章一樣，還是蠻吃力的，修了又修改了又改，還是感覺文章結(jié)構(gòu)上存在很多問題，這樣讓我發(fā)現(xiàn)了我的很多不足，希望大家在這方面能對給與我一些指點(diǎn)，在此萬分感謝。
