天天看點

android:View随手指的移動而移動

我們經常要做一些效果,比如,點選之後的動畫,随着手指的移動而移動。那麼它們如何實作的呢?我們直到,view的自動移動,我們可以設定動畫,比如之前寫的Fragment的進入與彈出動畫:​​https://github.com/nuptboyzhb/FragmentAnimationDemo​​​ 那麼,我們如何是一個View随着手指的移動而移動呢?

1.onTouch事件

我們為view添加onTouch事件,擷取移動過程中,手指相對螢幕的位置資訊:[code]

@Override
  public boolean onTouch(View v, MotionEvent event) {
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
      break;
    case MotionEvent.ACTION_MOVE:
      moveViewWithFinger(view, event.getRawX(), event.getRawY());
      break;
    case MotionEvent.ACTION_UP:
      break;
    }
    return true;
  }      

2.方法1:setLayoutParams

獲得手指的位置之後,就可以通過動态設定View的布局,達到“移動”view的目的。[code]

/**
   * 設定View的布局屬性,使得view随着手指移動 注意:view所在的布局必須使用RelativeLayout 而且不得設定居中等樣式
   * 
   * @param view
   * @param rawX
   * @param rawY
   */
  private void moveViewWithFinger(View view, float rawX, float rawY) {
    RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) view
        .getLayoutParams();
    params.leftMargin = (int) rawX - ivMove.getWidth() / 2;
    params.topMargin = (int) rawY - topTitleHeight - ivMove.getHeight() / 2;
    view.setLayoutParams(params);
  }      

3.方法2:view.layout(l,t,r,b)

方法二的局限,主要是對view所在的布局有較高的要求,而layout則沒有太多要求,既可以是RelativeLayout,也可以是LinearLayout。

/**
   * 通過layout方法,移動view 
   * 優點:對view所在的布局,要求不苛刻,不要是RelativeLayout,而且可以修改view的大小
   * 
   * @param view
   * @param rawX
   * @param rawY
   */
  private void moveViewByLayout(View view, int rawX, int rawY) {
    int left = rawX - ivMove.getWidth() / 2;
    int top = rawY - topTitleHeight - ivMove.getHeight() / 2;
    int width = left + view.getWidth();
    int height = top + view.getHeight();
    view.layout(left, top, width, height);
  }      

另外,在移動的過程中,還可以動态改變view的大小

注意:部分手機(比如華為,小米等),設定leftMargin無效,會出現View不跟手的現象。此時,我們可以使用view.setX()和view.setY()這兩個屬性替代。

4.Surfaceview中的對象

在SurfaceView中,我們更容易移動一個view,可以參見“新版飛機大戰”源代碼[

​​https://github.com/nuptboyzhb/newplanegame​​]中,主飛機的移動,随着手指的移動而移動。

5.方法1和2的源代碼:

​​https://github.com/nuptboyzhb/MoveViewWithFinger​​

繼續閱讀