Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android Scroller完全解析

Android Scroller完全解析

編輯:關於Android編程

在Android中,任何一個控件都是可以滾動的,因為在View類當中有scrollTo()和scrollBy()這兩個方法,如下圖所示:

這兩個方法的主要作用是將View/ViewGroup移至指定的坐標中,並且將偏移量保存起來。另外:

mScrollX 代表X軸方向的偏移坐標
mScrollY 代表Y軸方向的偏移坐標

這兩個方法都是用於對View進行滾動的,那麼它們之間有什麼區別呢?簡單點講,scrollBy()方法是讓View相對於當前的位置滾動某段距離,而scrollTo()方法則是讓View相對於初始的位置滾動某段距離。

關於偏移量的設置我們可以參看下源碼:

public class View { 
  .... 
  protected int mScrollX; //該視圖內容相當於視圖起始坐標的偏移量,X軸方向   
  protected int mScrollY; //該視圖內容相當於視圖起始坐標的偏移量,Y軸方向 
  //返回值 
  public final int getScrollX() { 
    return mScrollX; 
  } 
  public final int getScrollY() { 
    return mScrollY; 
  } 
  public void scrollTo(int x, int y) { 
    //偏移位置發生了改變 
    if (mScrollX != x || mScrollY != y) { 
      int oldX = mScrollX; 
      int oldY = mScrollY; 
      mScrollX = x; //賦新值,保存當前便宜量 
      mScrollY = y; 
      //回調onScrollChanged方法 
      onScrollChanged(mScrollX, mScrollY, oldX, oldY); 
      if (!awakenScrollBars()) { 
        invalidate(); //一般都引起重繪 
      } 
    } 
  } 
  // 看出區別了吧 。 mScrollX 與 mScrollY 代表我們當前偏移的位置 , 在當前位置繼續偏移(x ,y)個單位 
  public void scrollBy(int x, int y) { 
    scrollTo(mScrollX + x, mScrollY + y); 
  } 
  //... 
} 

於是,在任何時刻我們都可以獲取該View/ViewGroup的偏移位置了,即調用getScrollX()方法和getScrollY()方法。

下面我們寫個例子看下它們的區別吧:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <Button
    android:id="@+id/scroll_to_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="scrollTo"/>

  <Button
    android:id="@+id/scroll_by_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="scrollBy"/>
</LinearLayout>

外層使用了一個LinearLayout,在裡面包含了兩個按鈕,一個用於觸發scrollTo邏輯,一個用於觸發scrollBy邏輯。

public class MainActivity extends AppCompatActivity {

  private LinearLayout layout;
  private Button scrollToBtn;
  private Button scrollByBtn;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    layout = (LinearLayout) findViewById(R.id.layout);
    scrollToBtn = (Button) findViewById(R.id.scroll_to_btn);
    scrollByBtn = (Button) findViewById(R.id.scroll_by_btn);
    scrollToBtn.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        layout.scrollTo(getResources().getDimensionPixelOffset(R.dimen.horizontal_scroll),
            getResources().getDimensionPixelOffset(R.dimen.horizontal_scroll));
      }
    });
    scrollByBtn.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        layout.scrollBy(getResources().getDimensionPixelOffset(R.dimen.horizontal_scroll),
            getResources().getDimensionPixelOffset(R.dimen.horizontal_scroll));
      }
    });
  }
}



<resources>
  <dimen name="horizontal_scroll">-20dp</dimen>
  <dimen name="vertical_scroll">-30dp</dimen>
</resources>

當點擊了scrollTo按鈕時,我們調用了LinearLayout的scrollTo()方法,當點擊了scrollBy按鈕時,調用了LinearLayout的scrollBy()方法。那有的朋友可能會問了,為什麼都是調用的LinearLayout中的scroll方法?這裡一定要注意,不管是scrollTo()還是scrollBy()方法,滾動的都是該View內部的內容,而LinearLayout中的內容就是我們的兩個Button,如果你直接調用button的scroll方法的話,那結果一定不是你想看到的。

另外還有一點需要注意,就是兩個scroll方法中傳入的參數,第一個參數x表示相對於當前位置橫向移動的距離,正值向左移動,負值向右移動。第二個參數y表示相對於當前位置縱向移動的距離,正值向上移動,負值向下移動。
運行一下程序:

當我們點擊scrollTo按鈕時,兩個按鈕會一起向右下方滾動,之後再點擊scrollTo按鈕就沒有任何作用了,界面不會再繼續滾動,只有點擊scrollBy按鈕界面才會繼續滾動,並且不停點擊scrollBy按鈕界面會一起滾動下去。

Scroller類

從上面例子運行結果可以看出,利用scrollTo()/scrollBy()方法把一個View偏移至指定坐標(x,y)處,整個過程是直接跳躍的,沒有對這個偏移過程有任何控制,對用戶而言不太友好。於是,基於這種偏移控制,Scroller類被設計出來了,該類的主要作用是為偏移過程制定一定的控制流程,從而使偏移更流暢,更完美。
我們分析下源碼裡去看看Scroller類的相關方法,其源代碼(部分)如下: 路徑位於 \frameworks\base\core\Java\android\widget\Scroller.java

public class Scroller { 

  private int mStartX;  //起始坐標點 , X軸方向 
  private int mStartY;  //起始坐標點 , Y軸方向 
  private int mCurrX;   //當前坐標點 X軸, 即調用startScroll函數後,經過一定時間所達到的值 
  private int mCurrY;   //當前坐標點 Y軸, 即調用startScroll函數後,經過一定時間所達到的值 

  private float mDeltaX; //應該繼續滑動的距離, X軸方向 
  private float mDeltaY; //應該繼續滑動的距離, Y軸方向 
  private boolean mFinished; //是否已經完成本次滑動操作, 如果完成則為 true 

  //構造函數 
  public Scroller(Context context) { 
    this(context, null); 
  } 
  public final boolean isFinished() { 
    return mFinished; 
  } 
  //強制結束本次滑屏操作 
  public final void forceFinished(boolean finished) { 
    mFinished = finished; 
  } 
  public final int getCurrX() { 
    return mCurrX; 
  } 
   /* Call this when you want to know the new location. If it returns true, 
   * the animation is not yet finished. loc will be altered to provide the 
   * new location. */  
  //根據當前已經消逝的時間計算當前的坐標點,保存在mCurrX和mCurrY值中 
  public boolean computeScrollOffset() { 
    if (mFinished) { //已經完成了本次動畫控制,直接返回為false 
      return false; 
    } 
    int timePassed = (int)(AnimationUtils.currentAnimationTimeMillis() - mStartTime); 
    if (timePassed < mDuration) { 
      switch (mMode) { 
      case SCROLL_MODE: 
        float x = (float)timePassed * mDurationReciprocal; 
        ... 
        mCurrX = mStartX + Math.round(x * mDeltaX); 
        mCurrY = mStartY + Math.round(x * mDeltaY); 
        break; 
      ... 
    } 
    else { 
      mCurrX = mFinalX; 
      mCurrY = mFinalY; 
      mFinished = true; 
    } 
    return true; 
  } 
  //開始一個動畫控制,由(startX , startY)在duration時間內前進(dx,dy)個單位,即到達坐標為(startX+dx , startY+dy)出 
  public void startScroll(int startX, int startY, int dx, int dy, int duration) { 
    mFinished = false; 
    mDuration = duration; 
    mStartTime = AnimationUtils.currentAnimationTimeMillis(); 
    mStartX = startX;    mStartY = startY; 
    mFinalX = startX + dx; mFinalY = startY + dy; 
    mDeltaX = dx;      mDeltaY = dy; 
    ... 
  } 
} 

其中比較重要的兩個方法為:

public boolean computeScrollOffset()
函數功能說明:根據當前已經消逝的時間計算當前的坐標點,保存在mCurrX和mCurrY值中。

public void startScroll(int startX, int startY, int dx, int dy, int duration)
函數功能說明:開始一個動畫控制,由(startX , startY)在duration時間內前進(dx,dy)個單位,到達坐標為(startX+dx , startY+dy)處。

computeScroll()方法介紹:
為了易於控制滑屏控制,Android框架提供了 computeScroll()方法去控制這個流程。在繪制View時,會在draw()過程調用該方法。因此, 再配合使用Scroller實例,我們就可以獲得當前應該的偏移坐標,手動使View/ViewGroup偏移至該處。
computeScroll()方法原型如下,該方法位於ViewGroup.java類中

/** 
   * Called by a parent to request that a child update its values for mScrollX and mScrollY if necessary. This will typically be done if the child is animating a scroll using a {@link android.widget.Scroller Scroller} 
   * object. 
   * 由父視圖調用用來請求子視圖根據偏移值 mScrollX,mScrollY重新繪制 */
  public void computeScroll() { //空方法 ,自定義ViewGroup必須實現方法體     
  } 

為了實現偏移控制,一般自定義View/ViewGroup都需要重載該方法 。其調用過程位於View繪制流程draw()過程中,如下:

@Override 
protected void dispatchDraw(Canvas canvas){ 
  ... 

  for (int i = 0; i < count; i++) { 
    final View child = children[getChildDrawingOrder(count, i)]; 
    if ((child.mViewFlags & VISIBILITY_MASK) == VISIBLE || child.getAnimation() != null) { 
      more |= drawChild(canvas, child, drawingTime); 
    } 
  } 
} 
protected boolean drawChild(Canvas canvas, View child, long drawingTime) { 
  ... 
  child.computeScroll(); 
  ... 
} 

實例演示

ViewPager相信每個人都再熟悉不過了,因此它實在是太常用了,我們可以借助ViewPager來輕松完成頁面之間的滑動切換效果,但是如果問到它是如何實現的話,我感覺大部分人還是比較陌生的。其實說到ViewPager最基本的實現原理主要就是兩部分內容,一個是事件分發,一個是Scroller。對於事件分發,不了解的同學可以參考我這篇博客Android事件的分發、攔截和執行。
接下來我將結合事件分發和Scroller來實現一個簡易版的ViewPager。首先自定義一個ViewGroup,不了解的可以參考Android自定義ViewGroup(一)之CustomGridLayout這篇文章。平滑偏移的主要做法如下:

第一、調用Scroller實例去產生一個偏移控制(對應於startScroll()方法)
第二、手動調用invalid()方法去重新繪制,剩下的就是在computeScroll()裡根據當前已經逝去的時間,獲取當前應該偏移的坐標(由Scroller實例對應的computeScrollOffset()計算而得)
第三、當前應該偏移的坐標,調用scrollBy()方法去緩慢移動至該坐標處。

新建一個ScrollerLayout並讓它繼承自ViewGroup來作為我們的簡易ViewPager布局,代碼如下所示:

public class ScrollerLayout extends ViewGroup {

  private Scroller mScroller; //用於完成滾動操作的實例
  private VelocityTracker mVelocityTracker = null ; //處理觸摸的速率
  public static int SNAP_VELOCITY = 600 ; //最小的滑動速率
  private int mTouchSlop = 0 ;      //最小滑動距離,超過了,才認為開始滑動
  private float mLastionMotionX = 0 ;  //上次觸發ACTION_MOVE事件時的屏幕坐標
  private int curScreen = 0 ; //當前屏幕
  private int leftBorder;  //界面可滾動的左邊界
  private int rightBorder; //界面可滾動的右邊界

  //兩種狀態: 是否處於滑屏狀態
  private static final int TOUCH_STATE_REST = 0; //什麼都沒做的狀態
  private static final int TOUCH_STATE_SCROLLING = 1; //開始滑屏的狀態
  private int mTouchState = TOUCH_STATE_REST; //默認是什麼都沒做的狀態

  public ScrollerLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
    // 創建Scroller的實例
    mScroller = new Scroller(context);
    //初始化一個最小滑動距離
    mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int childCount = getChildCount();
    for (int i = 0; i < childCount; i++) {
      View childView = getChildAt(i);
      // 為ScrollerLayout中的每一個子控件測量大小
      measureChild(childView, widthMeasureSpec, heightMeasureSpec);
    }
  }

  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    if (changed) {
      int childCount = getChildCount();
      for (int i = 0; i < childCount; i++) {
        View childView = getChildAt(i);
        // 為ScrollerLayout中的每一個子控件在水平方向上進行布局
        childView.layout(i * childView.getMeasuredWidth(), 0, (i + 1) * childView.getMeasuredWidth(), childView.getMeasuredHeight());
      }
    }
    // 初始化左右邊界值
    leftBorder = getChildAt(0).getLeft();
    rightBorder = getChildAt(getChildCount() - 1).getRight();
  }

  @Override
  public boolean onInterceptTouchEvent(MotionEvent ev) {
    final int action = ev.getAction();
    //表示已經開始滑動了,不需要走該Action_MOVE方法了(第一次時可能調用)。
    //該方法主要用於用戶快速松開手指,又快速按下的行為。此時認為是處於滑屏狀態的。
    if ((action == MotionEvent.ACTION_MOVE) && (mTouchState != TOUCH_STATE_REST)) {
      return true;
    }
    final float x = ev.getX();
    switch (action) {
      case MotionEvent.ACTION_MOVE:
        final int xDiff = (int) Math.abs(mLastionMotionX - x);
        //超過了最小滑動距離,就可以認為開始滑動了
        if (xDiff > mTouchSlop) {
          mTouchState = TOUCH_STATE_SCROLLING;
        }
        break;
      case MotionEvent.ACTION_DOWN:
        mLastionMotionX = x;
        mTouchState = mScroller.isFinished() ? TOUCH_STATE_REST : TOUCH_STATE_SCROLLING;
        break;
      case MotionEvent.ACTION_CANCEL:
      case MotionEvent.ACTION_UP:
        mTouchState = TOUCH_STATE_REST;
        break;
    }
    return mTouchState != TOUCH_STATE_REST;
  }

  public boolean onTouchEvent(MotionEvent event){
    super.onTouchEvent(event);
    //獲得VelocityTracker對象,並且添加滑動對象
    if (mVelocityTracker == null) {
      mVelocityTracker = VelocityTracker.obtain();
    }
    mVelocityTracker.addMovement(event);
    //觸摸點
    float x = event.getX();
    switch(event.getAction()){
      case MotionEvent.ACTION_DOWN:
        //如果屏幕的動畫還沒結束,你就按下了,我們就結束上一次動畫,即開始這次新ACTION_DOWN的動畫
        if(mScroller != null){
          if(!mScroller.isFinished()){
            mScroller.abortAnimation();
          }
        }
        mLastionMotionX = x ; //記住開始落下的屏幕點
        break ;
      case MotionEvent.ACTION_MOVE:
        int detaX = (int)(mLastionMotionX - x ); //每次滑動屏幕,屏幕應該移動的距離
        if (getScrollX() + detaX < leftBorder) {  //防止用戶拖出邊界這裡還專門做了邊界保護,當拖出邊界時就調用scrollTo()方法來回到邊界位置
          scrollTo(leftBorder, 0);
          return true;
        } else if (getScrollX() + getWidth() + detaX > rightBorder) {
          scrollTo(rightBorder - getWidth(), 0);
          return true;
        }
        scrollBy(detaX, 0);//開始緩慢滑屏咯。 detaX > 0 向右滑動 , detaX < 0 向左滑動
        mLastionMotionX = x ;
        break ;
      case MotionEvent.ACTION_UP:
        final VelocityTracker velocityTracker = mVelocityTracker ;
        velocityTracker.computeCurrentVelocity(1000);
        //計算速率
        int velocityX = (int) velocityTracker.getXVelocity() ;
        //滑動速率達到了一個標准(快速向右滑屏,返回上一個屏幕) 馬上進行切屏處理
        if (velocityX > SNAP_VELOCITY && curScreen > 0) {
          // Fling enough to move left
          snapToScreen(curScreen - 1);
        }
        //快速向左滑屏,返回下一個屏幕
        else if(velocityX < -SNAP_VELOCITY && curScreen < (getChildCount()-1)){
          snapToScreen(curScreen + 1);
        }
        //以上為快速移動的 ,強制切換屏幕
        else{
          //我們是緩慢移動的,因此先判斷是保留在本屏幕還是到下一屏幕
          snapToDestination();
        }
        //回收VelocityTracker對象
        if (mVelocityTracker != null) {
          mVelocityTracker.recycle();
          mVelocityTracker = null;
        }
        //修正mTouchState值
        mTouchState = TOUCH_STATE_REST ;
        break;
      case MotionEvent.ACTION_CANCEL:
        mTouchState = TOUCH_STATE_REST ;
        break;
    }
    return true ;
  }

  //我們是緩慢移動的,因此需要根據偏移值判斷目標屏是哪個
  private void snapToDestination(){
    //判斷是否超過下一屏的中間位置,如果達到就抵達下一屏,否則保持在原屏幕
    //公式意思是:假設當前滑屏偏移值即 scrollCurX 加上每個屏幕一半的寬度,除以每個屏幕的寬度就是我們目標屏所在位置了。
    int destScreen = (getScrollX() + getWidth() / 2 ) / getWidth() ;
    snapToScreen(destScreen);
  }

  //真正的實現跳轉屏幕的方法
  private void snapToScreen(int whichScreen){
    //簡單的移到目標屏幕,可能是當前屏或者下一屏幕,直接跳轉過去,不太友好,為了友好性,我們在增加一個動畫效果
    curScreen = whichScreen ;
    //防止屏幕越界,即超過屏幕數
    if(curScreen > getChildCount() - 1)
      curScreen = getChildCount() - 1 ;
    //為了達到下一屏幕或者當前屏幕,我們需要繼續滑動的距離.根據dx值,可能向左滑動,也可能向右滑動
    int dx = curScreen * getWidth() - getScrollX() ;
    mScroller.startScroll(getScrollX(), 0, dx, 0, Math.abs(dx) * 2);
    //由於觸摸事件不會重新繪制View,所以此時需要手動刷新View 否則沒效果
    invalidate();
  }

  @Override
  public void computeScroll() {
    //重寫computeScroll()方法,並在其內部完成平滑滾動的邏輯
    if (mScroller.computeScrollOffset()) {
      scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
      invalidate();
    }
  }
}

代碼比較長,但思路比較清晰。
(1)首先在ScrollerLayout的構造函數裡面我們創建Scroller的實例,由於Scroller的實例只需創建一次,因此我們把它放到構造函數裡面執行。另外在構建函數中我們還初始化的TouchSlop的值,這個值在後面將用於判斷當前用戶的操作是否是拖動。
(2)接著重寫onMeasure()方法和onLayout()方法,在onMeasure()方法中測量ScrollerLayout裡的每一個子控件的大小,在onLayout()方法中為ScrollerLayout裡的每一個子控件在水平方向上進行布局,布局類似於方向為horizontal的LinearLayout。
(3) 接著重寫onInterceptTouchEvent()方法, 在這個方法中我們記錄了用戶手指按下時的X坐標位置,以及用戶手指在屏幕上拖動時的X坐標位置,當兩者之間的距離大於TouchSlop值時,就認為用戶正在拖動布局,置狀態為TOUCH_STATE_SCROLLING,當用戶手指抬起,重置狀態為TOUCH_STATE_REST。這裡當狀態值為TOUCH_STATE_SCROLLING時返回true,將事件在這裡攔截掉,阻止事件傳遞到子控件當中。
(4)那麼當我們把事件攔截掉之後,就會將事件交給ScrollerLayout的onTouchEvent()方法來處理。
如果當前事件是ACTION_MOVE,說明用戶正在拖動布局,那麼我們就應該對布局內容進行滾動從而影響拖動事件,實現的方式就是使用我們剛剛所學的scrollBy()方法,用戶拖動了多少這裡就scrollBy多少。另外為了防止用戶拖出邊界這裡還專門做了邊界保護,當拖出邊界時就調用scrollTo()方法來回到邊界位置。
如果當前事件是ACTION_UP時,說明用戶手指抬起來了,但是目前很有可能用戶只是將布局拖動到了中間,我們不可能讓布局就這麼停留在中間的位置,因此接下來就需要借助Scroller來完成後續的滾動操作。首先計算滾動速率,判斷當前動作是scroll還是fling。如果是fling,再根據fling的方向跳轉到上一頁或者下一頁,調用函數snapToScreen。如果是scroll,就調用函數snapToDestination,函數中首先根據當前的滾動位置來計算布局應該繼續滾動到哪一頁,滾動到哪一頁同樣調用snapToScreen。再來看看snapToScreen寫法吧,其實是調用startScroll()方法來滾動數據,緊接著調用invalidate()方法來刷新界面。
(5)重寫computeScroll()方法,並在其內部完成平滑滾動的邏輯 。在整個後續的平滑滾動過程中,computeScroll()方法是會一直被調用的,因此我們需要不斷調用Scroller的computeScrollOffset()方法來進行判斷滾動操作是否已經完成了,如果還沒完成的話,那就繼續調用scrollTo()方法,並把Scroller的curX和curY坐標傳入,然後刷新界面從而完成平滑滾動的操作。

現在ScrollerLayout已經准備好了,接下來我們修改activity_main.xml布局中的內容,如下所示:

<?xml version="1.0" encoding="utf-8"?>
<com.hx.scroller.ScrollerLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <ImageView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@drawable/crazy_1" />

  <ImageView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@drawable/crazy_2" />

  <ImageView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@drawable/crazy_3" />

</com.hx.scroller.ScrollerLayout>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持本站。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved