View(2) 的滑动

作者: KevinChiu | 来源:发表于2017-10-12 14:58 被阅读0次

参考链接向刘老师学习，所以摘抄了老师的笔记，只想作为自己的技术积累。

简介

不管是哪种滑动的方式基本思想都是类似的：当触摸事件传到View时，系统记下触摸点的坐标，手指移动时系统记下移动后的触摸的坐标并算出偏移量，并通过偏移量来修改View的坐标。
实现View滑动有很多种方法，这篇文章主要讲解六种滑动的方法，分别是：layout()、offsetLeftAndRight()与offsetTopAndBottom()、LayoutParams、动画、scollTo与scollBy和Scroller。

实现 View 滑动的六种方法

layout()

view进行绘制的时候会调用onLayout()方法来设置显示的位置，因此我们同样也可以通过修改View的left、top、right、bottom这四种属性来控制View的坐标。首先我们要自定义一个View，在onTouchEvent()方法中获取触摸点的坐标：

   public boolean onTouchEvent(MotionEvent event) {
        //获取到手指处的横坐标和纵坐标
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = x;
                lastY = y;
                break;
...

接下来我们在ACTION_MOVE事件中计算偏移量，再调用layout()方法重新放置这个自定义View的位置就好了：

case MotionEvent.ACTION_MOVE:
    //计算移动的距离
    int offsetX = x - lastX;
    int offsetY = y - lastY;
    //调用layout方法来重新放置它的位置
    layout(getLeft()+offsetX, getTop()+offsetY,
            getRight()+offsetX , getBottom()+offsetY);
    break;

当我们每次移动时都会调用layout()方法来对自己重新布局，从而达到移动View的效果。

View的宽高是有top、left、right、bottom参数决定。

自定义View的全部代码(MovingView.kt)：

package com.kevin.viewmovingtest

import android.content.Context
import android.support.constraint.ConstraintLayout
import android.util.AttributeSet
import android.util.Log
import android.view.MotionEvent
import android.view.View
import android.widget.LinearLayout


/**
 * Created by Kobe on 2017/10/11.
 * Moving view
 */

class MovingView : View {

    companion object {
        private val TAG = "MovingView"
    }

    // 记录点击时的坐标
    private var lastX = 0
    private var lastY = 0

    // 构造函数
    constructor(context: Context?) : super(context)

    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    // 触碰监听
    override fun onTouchEvent(event: MotionEvent?): Boolean {
        event?.let {
            // 获取当前坐标
            val currentX: Int = event.x.toInt()
            val currentY: Int = event.y.toInt()
            when (event.action) {
                MotionEvent.ACTION_DOWN -> {
                    Log.d(TAG, "MotionEvent.ACTION_DOWN")
                    lastX = currentX
                    lastY = currentY
                }
                MotionEvent.ACTION_MOVE -> {
                    Log.d(TAG, "MotionEvent.ACTION_MOVE")
                    // 移动距离
                    val offsetX = currentX - lastX
                    val offsetY = currentY - lastY
                    // 设置View的坐标
                    Log.d(TAG, "Left:$left,Right:$right,Top:$top,Bottom:$bottom")

                    // 使用layout()
//                    layout(left + offsetX, top + offsetY, right + offsetX, bottom + offsetY)

                    // 使用offsetLeftAndRight()和offsetTopAndBottom()
//                    offsetLeftAndRight(offsetX)
//                    offsetTopAndBottom(offsetY)

                    // 使用LayoutParams
                    val lp: ConstraintLayout.LayoutParams = layoutParams as ConstraintLayout.LayoutParams
                    lp.leftMargin = offsetX + left
                    lp.topMargin = offsetY + top
                    layoutParams = lp
                }
            }
        }
        return true
    }
}

布局中引用自定义View：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/cl_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.kevin.viewmovingtest.MainActivity">

    <com.kevin.viewmovingtest.MovingView
        android:id="@+id/mv_test"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="0dp"
        android:layout_marginRight="0dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintVertical_bias="0.0"
        android:layout_marginLeft="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintHorizontal_bias="0.0" />

</android.support.constraint.ConstraintLayout>

offsetLeftAndRight()与offsetTopAndBottom()

这两种方法和layout()方法效果方法差不多，使用也差不多，我们将ACTION_MOVE中的代码替换成如下代码：

case MotionEvent.ACTION_MOVE:
    //计算移动的距离
    int offsetX = x - lastX;
    int offsetY = y - lastY;
    //对left和right进行偏移
    offsetLeftAndRight(offsetX);
    //对top和bottom进行偏移
    offsetTopAndBottom(offsetY);
    break;

上面代码块对应的变化如下：

MotionEvent.ACTION_MOVE -> {
      Log.d(TAG, "MotionEvent.ACTION_MOVE")
      // 移动距离
      val offsetX = currentX - lastX
      val offsetY = currentY - lastY
      // 设置View的坐标
      Log.d(TAG, "Left:$left,Right:$right,Top:$top,Bottom:$bottom")
//    layout(left + offsetX, top + offsetY, right + offsetX, bottom + offsetY)

      offsetLeftAndRight(offsetX)
      offsetTopAndBottom(offsetY)
}

LayoutParams（改变布局参数）

LayoutParams主要保存了一个View的布局参数，因此我们可以通过LayoutParams来改变View的布局的参数从而达到了改变View的位置的效果。同样的我们将ACTION_MOVE中的代码替换成如下代码：

LinearLayout.LayoutParams layoutParams= (LinearLayout.LayoutParams) getLayoutParams();
              layoutParams.leftMargin = getLeft() + offsetX;
              layoutParams.topMargin = getTop() + offsetY;
              setLayoutParams(layoutParams);

上面对应的代码块变化如下，由于我这里使用ConstraintLayout，所以和刘老师的有点不同，需要在布局文件中做好约束：

MotionEvent.ACTION_MOVE -> {
      Log.d(TAG, "MotionEvent.ACTION_MOVE")
      // 移动距离
      val offsetX = currentX - lastX
      val offsetY = currentY - lastY
      // 设置View的坐标
      Log.d(TAG, "Left:$left,Right:$right,Top:$top,Bottom:$bottom")
      
      // 使用layout()
//  layout(left + offsetX, top + offsetY, right + offsetX, bottom + offsetY)

    // 使用offsetLeftAndRight()和offsetTopAndBottom()
// offsetLeftAndRight(offsetX)
// offsetTopAndBottom(offsetY)

    // 使用LayoutParams
      val lp: ConstraintLayout.LayoutParams = layoutParams as ConstraintLayout.LayoutParams
      lp.leftMargin = offsetX + left
      lp.topMargin = offsetY + top
      layoutParams = lp
}

动画

可以采用View动画来移动，在res目录新建anim文件夹并创建translate.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="300" android:duration="1000"/>
</set>

在代码中引用：

mv_test.animation = AnimationUtils.loadAnimation(this, R.anim.translate)
ObjectAnimator.ofFloat(mv_test, "translationX", 0.toFloat(), 300.toFloat()).setDuration(1000).start()

使用scrollTo与scrollBy

scollTo(x,y)表示移动到一个具体的坐标点
scollBy(dx,dy)则表示移动的增量为dx、dy

scollTo、scollBy移动的是View的内容，如果在ViewGroup中使用则是移动他所有的子View。我们将ACTION_MOVE中的代码替换成如下代码：

((View)getParent()).scrollBy(-offsetX,-offsetY);

这里要实现CustomView随着我们手指移动的效果的话，我们就需要将偏移量设置为负值。

上面对应的代码块变化如下：

MotionEvent.ACTION_MOVE -> {
      Log.d(TAG, "MotionEvent.ACTION_MOVE")
      // 移动距离
      val offsetX = currentX - lastX
      val offsetY = currentY - lastY
      // 设置View的坐标
      Log.d(TAG, "Left:$left,Right:$right,Top:$top,Bottom:$bottom")

      // 使用layout()
//     layout(left + offsetX, top + offsetY, right + offsetX, bottom + offsetY)

      // 使用offsetLeftAndRight()和offsetTopAndBottom()
//     offsetLeftAndRight(offsetX)
//     offsetTopAndBottom(offsetY)

     // 使用LayoutParams
//      val lp: ConstraintLayout.LayoutParams = layoutParams as ConstraintLayout.LayoutParams
//      lp.leftMargin = offsetX + left
//      lp.topMargin = offsetY + top
//      layoutParams = lp

       // 使用scrollTo与scrollBy
       (parent as View).scrollBy(-offsetX, -offsetY)
}

Scroller

用scollTo/scollBy方法来进行滑动时，这个过程是瞬间完成的，所以用户体验不大好。这里我们可以使用Scroller来实现有过度效果的滑动，这个过程不是瞬间完成的，而是在一定的时间间隔完成的。Scroller本身是不能实现View的滑动的，它需要配合View的computeScroll()方法才能弹性滑动的效果。

在这里我们实现CustomView平滑的向右移动。

首先我们要初始化Scroller：

public CustomView(Context context, AttributeSet attrs) {
      super(context, attrs);
      mScroller = new Scroller(context);
  }

接下来重写computeScroll()方法，系统会在绘制View的时候在draw()方法中调用该方法，这个方法中我们调用父类的scrollTo()方法并通过Scroller来不断获取当前的滚动值，每滑动一小段距离我们就调用invalidate()方法不断的进行重绘，重绘就会调用computeScroll()方法，这样我们就通过不断的移动一个小的距离并连贯起来就实现了平滑移动的效果：

@Override
public void computeScroll() {
    super.computeScroll();
    if(mScroller.computeScrollOffset()){
        ((View) getParent()).scrollTo(mScroller.getCurrX(),mScroller.getCurrY());
         //通过不断的重绘不断的调用computeScroll方法
         invalidate();
    }  
}

调用Scroller.startScroll()方法。我们在CustomView中写一个smoothScrollTo()方法，调用Scroller.startScroll()方法，在2000毫秒内沿X轴平移delta像素：

public void smoothScrollTo(int destX,int destY){
      int scrollX=getScrollX();
      int delta=destX-scrollX;
      //1000秒内滑向destX
      mScroller.startScroll(scrollX,0,delta,0,2000);
      invalidate();
  }

最后我们在ViewSlideActivity.java中调用CustomView的smoothScrollTo()方法：

//使用Scroll来进行平滑移动
mCustomView.smoothScrollTo(-400,0);

这里我们是设定CustomView沿着X轴向右平移400像素。

invalidate() 说明一下
说明：请求重绘View树，即draw()过程，假如视图发生大小没有变化就不会调用layout()过程，并且只绘制那些“需要重绘的”视图，即谁(View的话，只绘制该View ；ViewGroup，则绘制整个ViewGroup)请求invalidate()方法，就绘制该视图。
一般引起invalidate()操作的函数如下：

直接调用invalidate()方法，请求重新draw()，但只会绘制调用者本身。

setSelection()方法：请求重新draw()，但只会绘制调用者本身。

setVisibility()方法：当View可视状态在INVISIBLE转换VISIBLE时，会间接调用invalidate()方法，继而绘制该View。

setEnabled()方法：请求重新draw()，但不会重新绘制任何视图包括该调用者本身。

按照上述，重新修改了代码，如下：

创建全局变量mScroller

lateinit var mScroller: Scroller

初始化对象

private fun init(context: Context) {
    // 使用Scroller
    mScroller = Scroller(context)
}

重写computeScroll()方法

override fun computeScroll() {
    super.computeScroll()
    if (mScroller.computeScrollOffset()) {
        (parent as View).scrollTo(mScroller.currX, mScroller.currY)
        //通过不断的重绘不断的调用computeScroll方法
        invalidate()
    }
}

生成接口smoothScrollTo()

fun smoothScrollTo(destX: Int, destY: Int) {
    val scrollX = scrollX
    val delta = destX - scrollX
    val scrollY = scrollY

//    mScroller.startScroll(scrollX,0,delta,0,4000)
    mScroller.startScroll(scrollX,scrollY,destX,destY,6000)
    invalidate()
}

使用该接口

mv_test.smoothScrollTo(-900,-200)

效果图

源码地址

MotionEvent.ACTION_DOWN 按下后只会调用一次，直到第二次按下

View(2) 的滑动

简介

实现 View 滑动的六种方法

layout()

offsetLeftAndRight()与offsetTopAndBottom()

LayoutParams（改变布局参数）

动画

使用scrollTo与scrollBy

Scroller

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读