###1. 需求前提说明
越来越多的应用为了增强用户粘性，选择在应用内部整合类似微信朋友圈的模块。这样的模块提供了各式各样的图文混排效果，在wifi情况下能对视频进行自动预览，有交互良好(开发复杂)的评论体验。开发这一模块，对每个细节的性能要求更为严格，为保证列表滑动的流畅性。由于公司战略调整，添加动态功能(朋友圈)，楼主主要负责这一模块的开发，如果有相关问题可以留言讨论，本篇幅主要讲评论组件的封装。
###2. 镇楼图
功能交互点：
- 点击用户昵称，仅昵称文字区域展示按下背景图，跳转进入用户个人主页。
- 点击用户评论，评论+昵称区域展示按下背景图，进行回复评论。
- 长按用户昵称，同(1)效果。
- 长按用户评论，评论+昵称区域展示按下背景图，用于删除评论。
###3. 思路分析
-
Step One: 采用TextView + ClickableSpan
- 代码实现
<TextView
android:id="@+id/commentText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/selectbg_dynamiccomment" //设置按下效果
android:textSize="25sp" />
commentText.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "回复评论", Toast.LENGTH_SHORT).show();
}
});
commentText.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
Toast.makeText(MainActivity.this, "删除评论", Toast.LENGTH_SHORT).show();
return true;
}
});
commentText.setMovementMethod(LinkMovementMethod.getInstance());
CharSequence text = commentText.getText();
SpannableString spannableString = new SpannableString(text);
spannableString.setSpan(new ClickableSpan() {
@Override
public void onClick(View widget) {
Toast.makeText(MainActivity.this, "进入个人主页", Toast.LENGTH_SHORT).show();
}
}, 0, 3, SpannableString.SPAN_INCLUSIVE_EXCLUSIVE);
commentText.setText(spannableString);
复制代码
- 完成度： 完成控件评论区域的点击和长按，即功能交互点的第2点和第4点。
- 缺陷：点击昵称区域会触发TextView的OnClickListener事件，长按昵称区域，会触发TextView的OnLongClickListener事件。
-
Step Two: ClickableSpan对事件(Click、LongClick)进行消费
- 先查看源码，TextView如何调用ClickableSpan中的OnClick方法：
public class TextView extends View {
@Override
public boolean onTouchEvent(MotionEvent event) {
...
final boolean touchIsFinished = (action == MotionEvent.ACTION_UP)
&& (mEditor == null || !mEditor.mIgnoreActionUpEvent) && isFocused();
// 1. TextView 如果没有调用setMovementMethod(xx) 设置ClickableSpan不会生效
if ((mMovement != null || onCheckIsTextEditor()) && isEnabled()
&& mText instanceof Spannable && mLayout != null) {
boolean handled = false;
if (mMovement != null) {
// 2. 由setMovementMethod()设置的MovementMethod处理此次点击。
handled |= mMovement.onTouchEvent(this, (Spannable) mText, event);
}
... // 3. 交由TextView处理
if (handled) {
return true;
}
}
return superResult;
}
}
复制代码
- 原因： 从代码可以看出，TextView在OnTouchEvent方法中对ClickableSpan中的OnClick进行回调处理，但并没有消费掉此次事件直接返回，而是继续交予TextView处理(可能触发TextView的OnClick和OnLongClick)。
- 解决： 重写TextView的OnTouchEvent方法，先判断点击的区域是否是ClickableSpan，如果是，交由ClickableSpan处理后直接return true返回。
- 疑问： 那么如何判断点击的区域为ClickableSpan？ 之前在分析TextView的OnTouchEvent方法中第2点注释，可以知道mMovement.onTouchEvent必定隐藏了判断逻辑。
public class LinkMovementMethod extends ScrollingMovementMethod {
@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(); //获取点击区域在TextView的横向位置
int y = (int) event.getY();
x -= widget.getTotalPaddingLeft(); // 减去TextView左边的padding值，获取TextView文字的【可见】起始位置偏移
y -= widget.getTotalPaddingTop();
x += widget.getScrollX(); // 可见文字起始偏移 + 左边因为滑动被隐藏的文字宽度 = 当前点击文字的排布位置
y += widget.getScrollY();
Layout layout = widget.getLayout(); // 获取TextView上文字的排版
int line = layout.getLineForVertical(y); // 根据Y坐标获取点击位置的行数
int off = layout.getOffsetForHorizontal(line, x); // 根据行数和水平X量获取当前点击位置距离第一个文字左边的偏移量
ClickableSpan[] links = buffer.getSpans(off, off, ClickableSpan.class); // 根据偏移量获取ClickSpan
if (links.length != 0) {
if (action == MotionEvent.ACTION_UP) {
links[0].onClick(widget);
} else if (action == MotionEvent.ACTION_DOWN) {
Selection.setSelection(buffer,
buffer.getSpanStart(links[0]),
buffer.getSpanEnd(links[0]));
}
return true;
} else {
Selection.removeSelection(buffer);
}
}
return super.onTouchEvent(widget, buffer, event);
}
}
复制代码###4. 控件封装
@SuppressLint("AppCompatCustomView")
public class CommentTextView extends TextView {
private int mSpanBackgroundColor = 0xFFE0E0E0;
public CommentTextView(Context context) {
super(context);
init();
}
public CommentTextView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public CommentTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
setMovementMethod(LinkMovementMethod.getInstance());
}
public void setSpanClickBackground(int backgroundColor) {
this.mSpanBackgroundColor = backgroundColor;
}
public void setSpan(int start, int end, int color, boolean textBold, OnClickListener listener) {
CommentClickableSpan commentClickableSpan = new CommentClickableSpan(color, textBold, listener);
setSpan(start, end, commentClickableSpan);
}
public void setSpan(int start, int end, CommentClickableSpan span) {
CharSequence text = getText();
if (TextUtils.isEmpty(text)) {
return;
}
start = Math.max(0, start);
end = Math.min(text.length(), end);
Spannable buffer;
if (text instanceof SpannableString) {
buffer = (Spannable) text;
} else {
buffer = new SpannableString(text);
}
buffer.setSpan(span, start, end, SpannableString.SPAN_INCLUSIVE_EXCLUSIVE);
setText(buffer);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
Object text = getText();
if (text instanceof Spannable) {
Spannable buffer = (Spannable) text;
int action = event.getAction();
if (action == MotionEvent.ACTION_UP
|| action == MotionEvent.ACTION_DOWN) {
int x = (int) event.getX();
int y = (int) event.getY();
x -= getTotalPaddingLeft();
y -= getTotalPaddingTop();
x += getScrollX();
y += getScrollY();
Layout layout = getLayout();
int line = layout.getLineForVertical(y);
int off = layout.getOffsetForHorizontal(line, x);
ClickableSpan[] link = buffer.getSpans(off, off, CommentClickableSpan.class);
if (link.length != 0) {
if (action == MotionEvent.ACTION_UP) {
buffer.setSpan(new BackgroundColorSpan(0x00000000), buffer.getSpanStart(link[0]), buffer.getSpanEnd(link[0]), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
link[0].onClick(this);
} else if (action == MotionEvent.ACTION_DOWN) {
buffer.setSpan(new BackgroundColorSpan(mSpanBackgroundColor), buffer.getSpanStart(link[0]), buffer.getSpanEnd(link[0]), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
Selection.setSelection(buffer, buffer.getSpanStart(link[0]), buffer.getSpanEnd(link[0]));
}
return true;
}
}
}
return super.onTouchEvent(event);
}
public static class CommentClickableSpan extends ClickableSpan {
private int mShowColor;
private boolean mTextBold;
private OnClickListener onClickListener;
public CommentClickableSpan(int color, boolean textBold) {
this.mShowColor = color;
this.mTextBold = textBold;
}
public CommentClickableSpan(int color, boolean textBold, OnClickListener listener) {
this.mShowColor = color;
this.mTextBold = textBold;
this.onClickListener = listener;
}
@Override
public void onClick(View widget) {
//建议使用不带OnClickListener的构造，并添加带自己的业务参数的构造 Router.gotoUserCenterActivity(uid);
if (onClickListener != null) {
onClickListener.onClick(widget);
}
}
@Override
public void updateDrawState(TextPaint ds) {
ds.setColor(mShowColor);
if (mTextBold) {
ds.setFlags(TextPaint.FAKE_BOLD_TEXT_FLAG);
}
ds.setUnderlineText(false);
}
}
}
复制代码设置局部点击时的位置：setSpan()
设置局部按压时背景色：setSpanClickBackground();
扫一扫
2762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
