ClickableSpan 用来实现 TextView里的文字局部的高亮和点击事件。
介绍：
If an object of this type is attached to the text of a TextView with a movement method of LinkMovementMethod, the affected spans of text can be selected. If selected and clicked, the {@link #onClick} method will* be called.
意思是这东西加到TextView上，并设置LinkMovementMethod，就可以选择或点击并回调onClick方法。
源码：
public abstract class ClickableSpan extends CharacterStyle implements UpdateAppearance {
private static int sIdCounter = 0;
private int mId = sIdCounter++;
/**
* Performs the click action associated with this span.
*/
public abstract void onClick(@NonNull View widget);
/**
* Makes the text underlined and in the link color.
*/
@Override
public void updateDrawState(@NonNull TextPaint ds) {
ds.setColor(ds.linkColor);
ds.setUnderlineText(true);
}
/**
* Get the unique ID for this span.
*
* @return The unique ID.
* @hide
*/
public int getId() {
return mId;
}
}
源码比较简单，就是能改变文字样式的同时有个onClick抽象方法。
遇到问题
问题：
使用中，我们经常在vm层（vm里或者 vm的辅助逻辑类里）设置数据（比如SpannableString），如果设置的是ClickableSpan。设置样式外，还需要实现onClick方法，即点击事件。然而点击事件往往是UI层的逻辑。一般不允许在vm层写点击事件逻辑。向 vm里传点击事件（往往是内部类会持有fragment），不是很可取。
目标：
我希望vm层只对数据的设置，UI层设置点击事件。
方案：
定义一个可以设置事件，并携带数据的 ClickableSpan。
class DataClickSpan(@ColorInt val color: Int) : ClickableSpan() {
val map = HashMap<String, Any?>()
var listener: OnClickListener? = null
interface OnClickListener {
fun onSpanClick(widget: View, map: HashMap<String, Any?>)
}
override fun onClick(widget: View) {
listener?.onSpanClick(widget, map)
}
override fun updateDrawState(ds: TextPaint) {
//设置颜色
ds.color = color
//去掉下划线
ds.isUnderlineText = false
}
}
/**
* 设置点击事件。
*/
fun Spanned.setDataClickListener(listener: DataClickSpan.OnClickListener?) {
getSpans(0, this.length - 1, DataClickSpan::class.java)
.forEach { it.listener = listener }
}
再整一个BindingAdapter方法：
@BindingAdapter(value = ["binding_spanned_data", "binding_spanned_clickListener"], requireAll = true)
fun TextView.setSpannedClickListenerOfString(data: Spanned?, listener: DataClickSpan.OnClickListener?) {
data?.setDataClickListener(listener)
movementMethod = ClickLinkMovementMethod// 这个是自定义LinkMovementMethod
}
使用：
vm 层使用，设置携带数据：
// 携带 imAccount
SpannableString("这是可以点击的文字").apply {
setSpan(DataClickSpan(getColor(R.color.color_576B95))
.apply { map[IM_ACCOUNT] = joinGroupMsg.inviteImAccount },
1, length - 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE)
}
UI 层使用，设置事件，比如这个SpannableString是设置再某个item的TextView 上。
- 让这个Item的 VHModel 的OnItemEventListener继承DataClickSpan.OnClickListener
- 再布局里设置：
<TextView
binding_spanned_clickListener="@{listener}"
binding_spanned_data="@{item.removeDesc}"
.../>
- 在Fragment里实现接口：
override fun onSpanClick(widget: View, map: HashMap<String, Any?>) {
val imAccount = map[ConvertUtil.IM_ACCOUNT]
if (imAccount is String) {
RouterManager.goImUser(UserParams(imAccount), "ChatFragment")
}
}
结论：
没啥好的，就是曲折去实现分离而已。
vm 还有间接依赖View。
vm持有SpannableString，
SpannableString持有ClickableSpan，
ClickableSpan持有listener，
listener持有fragment。
emmmm....
ClickableSpan设计就是这样。那就来了解了解它的实现原理吧。
LinkMovementMethod：
ClickableSpan源码也看了，显然它不是主要关键。那是谁去调用ClickableSpan的onClick方法，怎么决定调用时机呢？
ClickableSpan文件头介绍中，已供出主谋是LinkMovementMethod（是一个单例）。
点击事件，显然离不开onTach的方法。LinkMovementMethod里正好有，那就决定是它了。
@Override
public boolean onTouchEvent(TextView widget, Spannable buffer,
MotionEvent event) {
int action = event.getAction();
if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_DOWN) {
int x = (int) event.getX();
int y = (int) event.getY();
x -= widget.getTotalPaddingLeft();
y -= widget.getTotalPaddingTop();
x += widget.getScrollX();
y += widget.getScrollY();
// 找触碰的位置。
Layout layout = widget.getLayout();
// 第几行。
int line = layout.getLineForVertical(y);
// 第几个字符。
int off = layout.getOffsetForHorizontal(line, x);
// 找出触摸到的文本中的 ClickableSpan。
ClickableSpan[] links = buffer.getSpans(off, off, ClickableSpan.class);
if (links.length != 0) {
ClickableSpan link = links[0];
if (action == MotionEvent.ACTION_UP) {
// 不认识，不管它。
if (link instanceof TextLinkSpan) {
((TextLinkSpan) link).onClick(
widget, TextLinkSpan.INVOCATION_METHOD_TOUCH);
} else {
// 手指抬起时回调onClick方法。
link.onClick(widget);
}
} else if (action == MotionEvent.ACTION_DOWN) {
// 按下设置一下选中样式。也就是光标。
if (widget.getContext().getApplicationInfo().targetSdkVersion
>= Build.VERSION_CODES.P) {
// Selection change will reposition the toolbar. Hide it for a few ms for a
// smoother transition.
widget.hideFloatingToolbar(HIDE_FLOATING_TOOLBAR_DELAY_MS);
}
Selection.setSelection(buffer,
buffer.getSpanStart(link),
buffer.getSpanEnd(link));
}
return true;
} else {
// 清除选中样式。也就是光标。
Selection.removeSelection(buffer);
}
}
return super.onTouchEvent(widget, buffer, event);
}
所以LinkMovementMethod也是根据触摸的位置找出ClickableSpan（同一个位置设置多个的话，也只会执行第一个），然后回调onClick。
LinkMovementMethod是被TextView回调。
看到这里ClickableSpan的实现原理基本就清楚了。
其他方案
有个大胆的想法💡：
我先自定义只带数据和样式的span。再定义一个 MySpanListener 里面有个方法onClick(v:View,data:Data)。
然后自定义LinkMovementMethod（比如叫MyMovementMethod）。同上在onTouchEvent里找出自己定义span。然后根据textView拿到listener。回调onClick(v:View,data:Data)方法。
那么问题是红字的怎么去实现（主要问题是listener，以什么维度储存，怎么储存）。比如在MyMovementMethod里设置一个弱引用的map：WeakHashMap<TextView,MySpanListener>
也是一种方法，但是看起来挺别扭。哈。。。
配一张图
另一个问题
LinkMovementMethod有个很大的问题，就是长按时。依旧会回调onClick方法。这就会出现交互伤的bug。
解决方案：
object ClickLinkMovementMethod : LinkMovementMethod() {
private const val CLICK_DELAY = 500L
private var lastClickTime: Long = 0
override fun onTouchEvent(widget: TextView?, buffer: Spannable?, event: MotionEvent?): Boolean {
event ?: return false
widget ?: return false
val action = event.action
if (action == MotionEvent.ACTION_UP ||
action == MotionEvent.ACTION_DOWN) {
var x = event.x.toInt()
var y = event.y.toInt()
x -= widget.totalPaddingLeft
y -= widget.totalPaddingTop
x += widget.scrollX
y += widget.scrollY
val layout: Layout = widget.layout
val line: Int = layout.getLineForVertical(y)
val off: Int = layout.getOffsetForHorizontal(line, x.toFloat())
val link: Array<ClickableSpan> = buffer?.getSpans(off, off, ClickableSpan::class.java)
?: return true
if (link.isNotEmpty()) {
if (action == MotionEvent.ACTION_UP) {
if (System.currentTimeMillis() - lastClickTime < CLICK_DELAY) {
link[0].onClick(widget)
}
} else if (action == MotionEvent.ACTION_DOWN) {
lastClickTime = System.currentTimeMillis()
Selection.setSelection(buffer,
buffer.getSpanStart(link[0]),
buffer.getSpanEnd(link[0]))
}
return true
} else {
Selection.removeSelection(buffer)
}
}
return false
}
}
总结：
- ClickableSpan实现点击监听的原理是LinkMovementMethod。
- LinkMovementMethod存在长按时交互的bug。
- ClickableSpan的数据&事件分离依旧期望更优质的方案。
网友评论