View 的滑動是 Android 實現自定義控件的基礎，同時在開發中我們也難免會遇到 View 的滑動處理。其實不管是哪種滑動方式，其基本思想都是類似的：當點擊事件傳到 View 時，系統記下觸摸點的坐標，手指移動時系統記下移動后觸摸的坐標并算出偏移量，并通過偏移量來修改View的坐標。
實現 View 滑動有很多種方法，在這里主要講解6種滑動方法，分別是 layout()、offsetLeftAndRight() 與 offsetTopAndBottom()、LayoutParams、Animation、scollTo() 與 scollBy()，以及 Scroller。
一、layout() 方法
View 進行繪制的時候會調用 onLayout() 方法來設置顯示的位置，因此我們同樣也可以通過修改 View 的 left、top、right、bottom 這4種屬性來控制 View 的坐標。首先我們要自定義一個 View，在 onTouchEvent() 方法中獲取觸摸點的坐標，代碼如下所示：
override fun onTouchEvent(event: MotionEvent?): Boolean {// 獲取手指觸摸點的橫坐標和縱坐標val x = event?.x?.toInt()val y = event?.y?.toInt()when (event?.action) {MotionEvent.ACTION_DOWN -> {lastX = x ?: 0lastY = y ?: 0}...}...
}
接下來我們在 ACTION_MOVE 事件中計算偏移量，再調用 layout() 方法重新放置這個自定義 View 的位置即可。
override fun onTouchEvent(event: MotionEvent?): Boolean {...when (event?.action) {...MotionEvent.ACTION_MOVE -> {// 計算移動的距離val offsetX = x ?: (0 - lastX)val offsetY = y ?: (0 - lastY)// 調用 layout 方法來重新放置它的位置layout(left + offsetX, top + offsetY, right + offsetX, bottom + offsetY)}}...
}
在每次移動時都會調用 layout() 方法對屏幕重新布局，從而達到移動 View 的效果。自定義 View 的全部代碼如下所示：
class CustomView(context: Context, attributeSet: AttributeSet) : View(context, attributeSet) {private var lastX = 0private var lastY = 0override fun onTouchEvent(event: MotionEvent?): Boolean {// 獲取手指觸摸點的橫坐標和縱坐標val x = event?.x?.toInt()val y = event?.y?.toInt()when (event?.action) {MotionEvent.ACTION_DOWN -> {lastX = x ?: 0lastY = y ?: 0}MotionEvent.ACTION_MOVE -> {// 計算移動的距離val offsetX = x ?: (0 - lastX)val offsetY = y ?: (0 - lastY)// 調用 layout 方法來重新放置它的位置layout(left + offsetX, top + offsetY, right + offsetX, bottom + offsetY)}}return true}
}
隨后，我們在布局中引用自定義 View 就可以了：
<com.tyhoo.android.demo.CustomViewandroid:id="@+id/test_view"android:layout_width="100dp"android:layout_height="100dp"android:background="@android:color/holo_red_light"... />
運行程序，效果如圖1所示：
圖1中的方塊就是我們自定義的 View，它會隨著我們手指的滑動改變自己的位置。
二、offsetLeftAndRight() 與 offsetTopAndBottom()
這兩種方法和 layout() 方法的效果差不多，其使用方式也差不多。我們將 ACTION_MOVE 中的代碼替換成如下代碼：
override fun onTouchEvent(event: MotionEvent?): Boolean {...when (event?.action) {...MotionEvent.ACTION_MOVE -> {// 計算移動的距離val offsetX = x ?: (0 - lastX)val offsetY = y ?: (0 - lastY)// 對 left 和 right 進行偏移offsetLeftAndRight(offsetX)// 對 top 和 bottom 進行偏移offsetTopAndBottom(offsetY)}}...
}
三、LayoutParams
LayoutParams 主要保存了一個 View 的布局參數，因此我們可以通過 LayoutParams 來改變 View 的布局參數從而達到改變 View 位置的效果。同樣，我們將 ACTION_MOVE 中的代碼替換成如下代碼：
override fun onTouchEvent(event: MotionEvent?): Boolean {...when (event?.action) {...MotionEvent.ACTION_MOVE -> {// 計算移動的距離val offsetX = x ?: (0 - lastX)val offsetY = y ?: (0 - lastY)val layoutParams = layoutParams as ConstraintLayout.LayoutParamslayoutParams.leftMargin = left + offsetXlayoutParams.topMargin = top + offsetYsetLayoutParams(layoutParams)}}...
}
因為父控件是 ConstraintLayout，所以我們用了 ConstraintLayout.LayoutParams。如果父控件是 RelativeLayout，則要使用RelativeLayout.LayoutParams。除了使用布局的 LayoutParams 外，我們還可以用 ViewGroup.MarginLayoutParams 來實現：
override fun onTouchEvent(event: MotionEvent?): Boolean {...when (event?.action) {...MotionEvent.ACTION_MOVE -> {// 計算移動的距離val offsetX = x ?: (0 - lastX)val offsetY = y ?: (0 - lastY)val layoutParams = layoutParams as ViewGroup.MarginLayoutParamslayoutParams.leftMargin = left + offsetXlayoutParams.topMargin = top + offsetYsetLayoutParams(layoutParams)}}...
}
四、Animation
可以采用 View 動畫來移動，在 res 目錄新建 anim 文件夾并創建 translate.xml：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><translateandroid:duration="1000"android:fromXDelta="0"android:toXDelta="300" />
</set>
接下來在 Kotlin 代碼中調用就好了，代碼如下所示：
class MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)val testView = findViewById<CustomView>(R.id.test_view)testView.animation = AnimationUtils.loadAnimation(this, R.anim.translate)}
}
運行程序，效果如圖2所示：
運行程序，我們設置的方塊會向右平移300像素，然后又會回到原來的位置。為了解決這個問題，我們需要在 translate.xml 中加上 fillAfter=“true”，代碼如下所示：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"android:fillAfter="true"><translateandroid:duration="1000"android:fromXDelta="0"android:toXDelta="300" />
</set>
運行程序，效果如圖3所示：
運行代碼后會發現，方塊向右平移300像素后就停留在當前位置了。
需要注意的是，View 動畫并不能改變 View 的位置參數。如果對一個 View 進行如上的平移動畫操作，當 View 平移300像素停留在當前位置時，我們點擊這個 View 并不會觸發點擊事件，但在我們點擊這個 View 的原始位置時卻觸發了點擊事件。對于系統來說這個 View 并沒有改變原有的位置，所以我們點擊其他位置當然不會觸發這個 View 的點擊事件。
五、scrollTo() 與 scollBy()
scrollTo(x, y) 表示移動到一個具體的坐標點，而 scrollBy(dx, dy) 則表示移動的增量為 dx、dy。其中，scollBy 最終也是要調用 scollTo 的。View 的 scollTo 和 scollBy 的源碼如下所示：
public void scrollTo(int x, int y) {if (mScrollX != x || mScrollY != y) {int oldX = mScrollX;int oldY = mScrollY;mScrollX = x;mScrollY = y;invalidateParentCaches();onScrollChanged(mScrollX, mScrollY, oldX, oldY);if (!awakenScrollBars()) {postInvalidateOnAnimation();}}
}public void scrollBy(int x, int y) {scrollTo(mScrollX + x, mScrollY + y);
}
scollTo、scollBy 移動的是 View 的內容，如果在 ViewGroup 中使用，則是移動其所有的子 View。我們將 ACTION_MOVE 中的代碼替換成如下代碼：
override fun onTouchEvent(event: MotionEvent?): Boolean {...when (event?.action) {...MotionEvent.ACTION_MOVE -> {// 計算移動的距離val offsetX = x ?: (0 - lastX)val offsetY = y ?: (0 - lastY)(parent as View).scrollBy(-offsetX, -offsetY)}}return true
}
這里若要實現自定義 View 隨手指移動的效果，就需要將偏移量設置為負值。為什么要設置為負值呢？這是參考對象不同導致的差異。所以我們用 scrollBy 方法的時候要設置負數才會達到自己想要的效果。
六、Scroller
我們在用 scollTo/scollBy 方法進行滑動時，這個過程是瞬間完成的，所以用戶體驗不大好。這里我們可以使用 Scroller 來實現有過渡效果的滑動，這個過程不是瞬間完成的，而是在一定的時間間隔內完成的。Scroller 本身是不能實現 View 的滑動的，它需要與 View 的 computeScroll() 方法配合才能實現彈性滑動的效果。在這里我們實現自定義 View 平滑地向右移動。首先我們要初始化 Scroller，代碼如下所示：
class CustomView(context: Context, attributeSet: AttributeSet) : View(context, attributeSet) {...private var scroller: Scroller? = nullinit {scroller = Scroller(context)}...
}
接下來重寫 computeScroll() 方法，系統會在繪制 View 的時候在 draw() 方法中調用該方法。在這個方法中，我們調用父類的 scrollTo() 方法并通過 Scroller 來不斷獲取當前的滾動值，每滑動一小段距離我們就調用invalidate() 方法不斷地進行重繪，重繪就會調用 computeScroll() 方法，這樣我們通過不斷地移動一個小的距離并連貫起來就實現了平滑移動的效果。
override fun computeScroll() {super.computeScroll()scroller?.let {if (it.computeScrollOffset()) {(parent as View).scrollTo(it.currX, it.currY)invalidate()}}
}
我們在自定義 View 中寫一個 smoothScrollTo 方法，調用 Scroller 的 startScroll() 方法，在 2000ms 內沿 X 軸平移 delta 像素，代碼如下所示：
fun smoothScrollTo(destX: Int, destY: Int) {val scrollX = scrollXval delta = destX - scrollXscroller?.startScroll(scrollX, 0, delta, 0, 2000)invalidate()
}
最后我們再調用自定義 View 的 smoothScrollTo() 方法。這里我們設定自定義 View 沿著 X 軸向右平移 400 像素。
class MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)val testView = findViewById<CustomView>(R.id.test_view)testView.smoothScrollTo(-400, 0)}
}
運行程序，效果如圖4所示：
)
)
