Android 優(yōu)雅處理重復(fù)點擊(建議收藏)
微信改了推動機(jī)制,真愛請星標(biāo)本公號
公眾號回復(fù)加入BATcoder技術(shù)群BAT
作者:張坤的筆記
鏈接:https://www.jianshu.com/p/04ed8d18c335
一般手機(jī)上的 Android App,主要的交互方式是點擊。用戶在點擊后,App 可能做出在頁面內(nèi)更新 UI、新開一個頁面或者發(fā)起網(wǎng)絡(luò)請求等操作。Android 系統(tǒng)本身沒有對重復(fù)點擊做處理,如果用戶在短時間內(nèi)多次點擊,則可能出現(xiàn)新開多個頁面或者重復(fù)發(fā)起網(wǎng)絡(luò)請求等問題。因此,需要對重復(fù)點擊有影響的地方,增加處理重復(fù)點擊的代碼。
之前的處理方式
之前在項目中使用的是 RxJava 的方案,利用第三方庫 RxBinding 實現(xiàn)了防止重復(fù)點擊:
fun View.onSingleClick(interval: Long = 1000L, listener: (View) -> Unit) {
RxView.clicks(this)
.throttleFirst(interval, TimeUnit.MILLISECONDS)
.subscribe({
listener.invoke(this)
}, {
LogUtil.printStackTrace(it)
})
}
但是這樣有一個問題,比如使用兩個手指同時點擊兩個不同的按鈕,按鈕的功能都是新開頁面,那么有可能會新開兩個頁面。因為 Rxjava 這種方式是針對單個控件實現(xiàn)防止重復(fù)點擊,不是多個控件。
現(xiàn)在的處理方式
現(xiàn)在使用的是時間判斷,在時間范圍內(nèi)只響應(yīng)一次點擊,通過將上次單擊時間保存到 Activity Window 中的 decorView 里,實現(xiàn)一個 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
}
參數(shù) isShareSingleClick 的默認(rèn)值為 true,表示該控件和同一個 Activity 中其他控件共用一個上次單擊時間,也可以手動改成 false,表示該控件自己獨享一個上次單擊時間。
mBinding.btn1.onSingleClick {
// 處理單次點擊
}
mBinding.btn2.onSingleClick(interval = 2000, isShareSingleClick = false) {
// 處理單次點擊
}
其他場景處理重復(fù)點擊
間接設(shè)置點擊
除了直接在 View 上設(shè)置的點擊監(jiān)聽外,其他間接設(shè)置點擊的地方也存在需要處理重復(fù)點擊的場景,比如說富文本和列表。
為此將判斷是否觸發(fā)單次點擊的代碼抽離出來,單獨作為一個方法:
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
) {
...
}
直接在點擊監(jiān)聽回調(diào)中調(diào)用 determineTriggerSingleClick 判斷是否觸發(fā)單次點擊。下面拿富文本和列表舉例。
富文本
繼承 ClickableSpan,在 onClick 回調(diào)中判斷是否觸發(fā)單次點擊:
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 回調(diào)中的 widget,就是設(shè)置富文本的控件,也就是說如果富文本存在多個單次點擊的地方, 就算 isShareSingleClick 值為 false,這些單次點擊還是會共用設(shè)置富文本控件的上次單擊時間。
因此,這里需要特殊處理,在 isShareSingleClick 為 false 的時候,創(chuàng)建一個假的 View 來觸發(fā)單擊事件,這樣富文本中多個單次點擊 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)
}
...
}
在設(shè)置富文本的地方,使用設(shè)置 onSingleClick 實現(xiàn)單次點擊:
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 {
// 處理單次點擊
}
}
}
數(shù)據(jù)綁定
使用 DataBinding 的時候,有時會在布局文件中直接設(shè)置點擊事件,于是在 View.onSingleClick 上增加 @BindingAdapte 注解,實現(xiàn)在布局文件中設(shè)置單次點擊事件,并對代碼做出調(diào)整,這個時候需要將項目中 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
)
}
}
在布局文件中設(shè)置單次點擊:
<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() {
// 處理單次點擊
}
}
總結(jié)
對于直接在 View 上設(shè)置點擊的地方,如果需要處理重復(fù)點擊使用 onSingleClick,不需要處理重復(fù)點擊則使用原來的 setOnClickListener。
對于間接設(shè)置點擊的地方,如果需要處理重復(fù)點擊,則使用 determineTriggerSingleClick 判斷是否觸發(fā)單次點擊。
項目地址
https://github.com/TaylorKunZhang/single-click,覺得用起來很爽的,請不要吝嗇你的 Star !
推薦閱讀
? 耗時2年,Android進(jìn)階三部曲第三部《Android進(jìn)階指北》出版!
? 『BATcoder』做了多年安卓還沒編譯過源碼?一個視頻帶你玩轉(zhuǎn)!
BATcoder技術(shù)群,讓一部分人先進(jìn)大廠
大家好,我是劉望舒,騰訊云TVP,著有暢銷書《Android進(jìn)階之光》《Android進(jìn)階解密》《Android進(jìn)階指北》,連續(xù)四年蟬聯(lián)電子工業(yè)出版社年度優(yōu)秀作者,谷歌開發(fā)者社區(qū)特邀講師。
前華為技術(shù)專家,現(xiàn)大廠技術(shù)負(fù)責(zé)人。
想要加入 BATcoder技術(shù)群,公號回復(fù)BAT 即可。
為了防止失聯(lián),歡迎關(guān)注我的小號
微信改了推送機(jī)制,真愛請星標(biāo)本公號??
