Android 優雅處理重複點選（建議收藏）
一般手機上的 Android App，主要的互動方式是點選。使用者在點選後，App 可能做出在頁面內更新 UI、新開一個頁面或者發起網路請求等操作。Android 系統本身沒有對重複點選做處理，如果使用者在短時間內多次點選，則可能出現新開多個頁面或者重複發起網路請求等問題。因此，需要對重複點選有影響的地方，增加處理重複點選的程式碼。
之前的處理方式
之前在專案中使用的是 RxJava 的方案，利用第三方庫 RxBinding 實現了防止重複點選：
fun View.onSingleClick(interval: Long = 1000L, listener: (View) -> Unit) {
RxView.clicks(this)
.throttleFirst(interval, TimeUnit.MILLISECONDS)
.subscribe({
listener.invoke(this)
}, {
LogUtil.printStackTrace(it)
})
}
但是這樣有一個問題，比如使用兩個手指同時點選兩個不同的按鈕，按鈕的功能都是新開頁面，那麼有可能會新開兩個頁面。因為 Rxjava 這種方式是針對單個控制元件實現防止重複點選，不是多個控制元件。
現在的處理方式
現在使用的是時間判斷，在時間範圍內只響應一次點選，通過將上次單擊時間儲存到 Activity Window 中的 decorView 裡，實現一個 Activity 中所有的 View 共用一個上次單擊時間。
fun View.onSingleClick(
interval: Int = SingleClickUtil.singleClickInterval,
isShareSingleClick: Boolean = true,
listener: (View) -> Unit
) {
setOnClickListener {
val target = if (isShareSingleClick) getActivity(this)?.window?.decorView ?: this else this
val millis = target.getTag(R.id.single_click_tag_last_single_click_millis) as? Long ?: 0
if (SystemClock.uptimeMillis() - millis >= interval) {
target.setTag(
R.id.single_click_tag_last_single_click_millis, SystemClock.uptimeMillis()
)
listener.invoke(this)
}
}
}
private fun getActivity(view: View): Activity? {
var context = view.context
while (context is ContextWrapper) {
if (context is Activity) {
return context
}
context = context.baseContext
}
return null
}
引數 isShareSingleClick 的預設值為 true，表示該控制元件和同一個 Activity 中其他控制元件共用一個上次單擊時間，也可以手動改成 false，表示該控制元件自己獨享一個上次單擊時間。
mBinding.btn1.onSingleClick {
// 處理單次點選
}
mBinding.btn2.onSingleClick(interval = 2000, isShareSingleClick = false) {
// 處理單次點選
}
其他場景處理重複點選
間接設定點選
除了直接在 View 上設定的點選監聽外，其他間接設定點選的地方也存在需要處理重複點選的場景，比如說富文字和列表。
為此將判斷是否觸發單次點選的程式碼抽離出來，單獨作為一個方法：
fun View.onSingleClick(
interval: Int = SingleClickUtil.singleClickInterval,
isShareSingleClick: Boolean = true,
listener: (View) -> Unit
) {
setOnClickListener { determineTriggerSingleClick(interval, isShareSingleClick, listener) }
}
fun View.determineTriggerSingleClick(
interval: Int = SingleClickUtil.singleClickInterval,
isShareSingleClick: Boolean = true,
listener: (View) -> Unit
) {
...
}
直接在點選監聽回撥中呼叫 determineTriggerSingleClick 判斷是否觸發單次點選。下面拿富文字和列表舉例。
富文字
繼承 ClickableSpan，在 onClick 回撥中判斷是否觸發單次點選：
inline fun SpannableStringBuilder.onSingleClick(
listener: (View) -> Unit,
isShareSingleClick: Boolean = true,
...
): SpannableStringBuilder = inSpans(
object : ClickableSpan() {
override fun onClick(widget: View) {
widget.determineTriggerSingleClick(interval, isShareSingleClick, listener)
}
...
},
builderAction = builderAction
)
這樣會有一個問題， onClick 回撥中的 widget，就是設定富文字的控制元件，也就是說如果富文字存在多個單次點選的地方， 就算 isShareSingleClick 值為 false，這些單次點選還是會共用設定富文字控制元件的上次單擊時間。
因此，這裡需要特殊處理，在 isShareSingleClick 為 false 的時候，建立一個假的 View 來觸發單擊事件，這樣富文字中多個單次點選 isShareSingleClick 為 false 的地方都有一個自己的假的 View 來獨享上次單擊時間。
class SingleClickableSpan(
...
) : ClickableSpan() {
private var mFakeView: View? = null
override fun onClick(widget: View) {
if (isShareSingleClick) {
widget
} else {
if (mFakeView == null) {
mFakeView = View(widget.context)
}
mFakeView!!
}.determineTriggerSingleClick(interval, isShareSingleClick, listener)
}
...
}
在設定富文字的地方，使用設定 onSingleClick 實現單次點選：
mBinding.tvText.movementMethod = LinkMovementMethod.getInstance()
mBinding.tvText.highlightColor = Color.TRANSPARENT
mBinding.tvText.text = buildSpannedString {
append("normalText")
onSingleClick({
// 處理單次點選
}) {
color(Color.GREEN) { append("clickText") }
}
}
列表
列表使用 RecyclerView 控制元件，介面卡使用第三方庫 BaseRecyclerViewAdapterHelper。
Item 點選：
adapter.setOnItemClickListener { _, view, _ ->
view.determineTriggerSingleClick {
// 處理單次點選
}
}
Item Child 點選：
adapter.addChildClickViewIds(R.id.btn1, R.id.btn2)
adapter.setOnItemChildClickListener { _, view, _ ->
when (view.id) {
R.id.btn1 -> {
// 處理普通點選
}
R.id.btn2 -> view.determineTriggerSingleClick {
// 處理單次點選
}
}
}
資料繫結
使用 DataBinding 的時候，有時會在佈局檔案中直接設定點選事件，於是在 View.onSingleClick 上增加 @BindingAdapte 註解，實現在佈局檔案中設定單次點選事件，並對程式碼做出調整，這個時候需要將專案中 listener: (View) -> Unit 替換成 listener: View.OnClickListener。
@BindingAdapter(
*["singleClickInterval", "isShareSingleClick", "onSingleClick"],
requireAll = false
)
fun View.onSingleClick(
interval: Int? = SingleClickUtil.singleClickInterval,
isShareSingleClick: Boolean? = true,
listener: View.OnClickListener? = null
) {
if (listener == null) {
return
}
setOnClickListener {
determineTriggerSingleClick(
interval ?: SingleClickUtil.singleClickInterval, isShareSingleClick ?: true, listener
)
}
}
在佈局檔案中設定單次點選：
<androidx.appcompat.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/btn"
app:isShareSingleClick="@{false}"
app:onSingleClick="@{()->viewModel.handleClick()}"
app:singleClickInterval="@{2000}" />
在程式碼中處理單次點選：
class YourViewModel : ViewModel() {
fun handleClick() {
// 處理單次點選
}
}
總結
對於直接在 View 上設定點選的地方，如果需要處理重複點選使用 onSingleClick，不需要處理重複點選則使用原來的 setOnClickListener。
對於間接設定點選的地方，如果需要處理重複點選，則使用 determineTriggerSingleClick 判斷是否觸發單次點選。
專案地址
https://github.com/TaylorKunZhang/single-click，
原文連結：https://www.jianshu.com/p/04ed8d18c335
文末
您的點贊收藏就是對我最大的鼓勵！
歡迎關注我，分享Android乾貨，交流Android技術。
對文章有何見解，或者有何技術問題，歡迎在評論區一起留言討論！