需求說(shuō)明
在開發(fā)過(guò)程中，遇到了這樣一個(gè)需求，要求能夠?qū)⒁粋€(gè)控件設(shè)置為可以拖動(dòng)的。當(dāng)用戶長(zhǎng)按一個(gè)控件時(shí)，這個(gè)控件能夠隨著用戶的手勢(shì)進(jìn)行移動(dòng)，涉及的控件包括view及viewgroup.
設(shè)計(jì)思路
由于控件需要根據(jù)用戶的手勢(shì)進(jìn)行移動(dòng)，因此不可避免的就是要獲取到用戶的手勢(shì)行為，因此可以通過(guò)事件分發(fā)機(jī)制中的touch方法中獲取到用戶的手勢(shì)行為，進(jìn)而重新更新當(dāng)前控件的位置即可。
代碼示例
View控件
對(duì)于像繼承自TextView或者ImageView這種不涉及到viewgroup的view，可以通過(guò)繼承實(shí)現(xiàn)一個(gè)新的類，然后重寫其onTouchEvent方法即可。
- 需要控件能夠根據(jù)手勢(shì)實(shí)時(shí)移動(dòng)，因此需要在
ACTION_MOVE移動(dòng)狀態(tài)中更新view控件的位置，在其中獲取具體的位置，調(diào)用layout方法更新位置。 - 為了防止當(dāng)用戶抬起手指之后父控件刷新導(dǎo)致的已經(jīng)滑動(dòng)的View回到原位，因此需要在手勢(shì)抬起
ACTION_UP時(shí)重新更新View的layoutParam保證View的位置發(fā)生移動(dòng)。 - 控件需要被設(shè)置為
clickable = true，否則可能無(wú)法獲取到ACTION_MOVE或者ACTION_UP手勢(shì)。
示例代碼如下：
package com.example.floatingwindowdemo.custom.floatview
import android.content.Context
import android.util.AttributeSet
import android.view.MotionEvent
import android.widget.LinearLayout
import androidx.appcompat.widget.AppCompatTextView
import com.example.floatingwindowdemo.LogUtils
class FloatTextView : AppCompatTextView {
constructor(context: Context) : super(context) {}
constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet) {}
constructor(context: Context, attributeSet: AttributeSet, defStyleAttr: Int)
: super(context, attributeSet, defStyleAttr) {
}
init {
}
//記錄最后的位置
private var lastX: Int = 0
private var lastY: Int = 0
override fun onTouchEvent(event: MotionEvent?): Boolean {
var action = event?.action ?: return super.onTouchEvent(event)
var isLongTouch = event
when (action) {
MotionEvent.ACTION_DOWN -> {
lastX = event.rawX.toInt()
lastY = event.rawY.toInt()
}
MotionEvent.ACTION_MOVE -> {
//偏移距離
var dx = (event.rawX.toInt()) - lastX
var dy = (event.rawY.toInt()) - lastY
var l = left + dx
var r = right + dx
var b = bottom + dy
var t = top + dy
//利用layout方法重新更新view的位置
layout(l, t, r, b)
lastX = event.rawX.toInt()
lastY = event.rawY.toInt()
}
MotionEvent.ACTION_UP -> {
//此處重新設(shè)置LayoutParams,防止當(dāng)父布局重新刷新時(shí)導(dǎo)致控件回歸原處
var lp = LinearLayout.LayoutParams(width, height)
lp.setMargins(left, top, 0, 0)
LogUtils.instance.getLogPrint("$left $top $right $bottom")
layoutParams = lp
}
}
return super.onTouchEvent(event)
}
}
Viewgroup
對(duì)于需要有多個(gè)控件同時(shí)拖動(dòng)的Viewgroup，可以通過(guò)繼承實(shí)現(xiàn)一個(gè)Viewgroup新類，然后通過(guò)攔截touch事件完成對(duì)手勢(shì)的獲取。實(shí)現(xiàn)拖動(dòng)的思路類似于上文。
示例代碼如下：
package com.example.floatingwindowdemo.custom.floatview
import android.content.Context
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import android.widget.LinearLayout
import android.widget.TextView
import androidx.appcompat.widget.AppCompatImageView
import com.example.floatingwindowdemo.R
class FloatWindow : LinearLayout {
constructor(context: Context) : super(context) {}
constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet) {}
constructor(context: Context, attributeSet: AttributeSet, defStyleAttr: Int) :
super(context, attributeSet, defStyleAttr) {
}
private var image: AppCompatImageView? = null
private var text: TextView? = null
private var lastX: Int = 0
private var lastY: Int = 0
init {
View.inflate(context, R.layout.float_window_layout, this)
image = findViewById(R.id.img_float_window)
text = findViewById(R.id.text_float_window)
}
override fun onInterceptTouchEvent(ev: MotionEvent?): Boolean {
var action = ev?.action ?: return super.onInterceptTouchEvent(ev)
when (action) {
MotionEvent.ACTION_DOWN -> {
lastX = ev.rawX.toInt()
lastY = ev.rawY.toInt()
}
MotionEvent.ACTION_MOVE -> {
var dx = ev.rawX.toInt() - lastX
var dy = ev.rawY.toInt() - lastY
var l = left + dx
var r = right + dx
var t = top + dy
var b = bottom + dy
layout(l, t, r, b)
lastX = ev.rawX.toInt()
lastY = ev.rawY.toInt()
}
MotionEvent.ACTION_UP -> {
var lp = LinearLayout.LayoutParams(width, height)
lp.setMargins(left, top, right, bottom)
layoutParams = lp
}
}
return super.onInterceptTouchEvent(ev)
}
}
添加邊界設(shè)置
上述代碼中沒(méi)有控件位置對(duì)屏幕邊緣的限制，因此當(dāng)滑動(dòng)時(shí)很有可能會(huì)滑出屏幕邊緣，如果要解決這個(gè)問(wèn)題，需要對(duì)當(dāng)前位置做些判斷，可以通過(guò)如下幾步來(lái)解決此問(wèn)題：
- 獲取到屏幕的高和寬
- 在重新確定控件位置時(shí)判斷是否已經(jīng)超出了屏幕邊界，如果超出了屏幕邊界，需要重置其位置。
1. 獲取屏幕寬高
可以通過(guò)DisplayMetrics來(lái)獲取屏幕的寬和高，，示例代碼如下：
private var displayMetrics: DisplayMetrics = resources.displayMetrics
//寬度
private var screenWidth = displayMetrics.widthPixels
//高度
private var screenHeight = displayMetrics.heightPixels
2. 即時(shí)判斷邊緣
由于是在MotionEvent.ACTION_MOVE時(shí)重置的控件的位置，所以需要在此時(shí)判斷當(dāng)前控件的位置是否已經(jīng)超過(guò)了邊界，如果超過(guò)了邊界，需要重置其位置，示例代碼如下：
MotionEvent.ACTION_MOVE -> {
var dx = ev.rawX.toInt() - lastX
var dy = ev.rawY.toInt() - lastY
var l = left + dx
var r = right + dx
var t = top + dy
var b = bottom + dy
//當(dāng)滑動(dòng)出邊界時(shí)需要重新設(shè)置位置
if (l < 0) {
l = 0
r = width
}
if (t < 0) {
t = 0
b = height
}
if (r > screenWidth) {
r = screenWidth
l = screenWidth - width
}
if (b > screenHeight) {
b = screenHeight
t = screenHeight - height
}
layout(l, t, r, b)
lastX = ev.rawX.toInt()
lastY = ev.rawY.toInt()
}
后續(xù)文章
Android可拖動(dòng)控件（二）：簡(jiǎn)易懸浮窗
