Android实现类似QQ对话框的@他人的整体解决方案
Android实现类似QQ对话框的@他人的整体解决方案
在我们公司的新版APP中社区板块有个在回复回帖中有个@他们的功能，基本需求和QQ群组对话框里@群或组里任何一个成员类似。而数据传输方面，选择了直接传输富文本格式的数据让后台解析出@的对象。基本的需求如下：
- 用户输入@后就弹出于之有关系的用户,点击返回编辑框输入@UserName(空格),并且整体变色
- 取消@操作后，编辑器将留下@符号
- 点击只能点击在@UserName（空格）的外侧
- 删除也是作为一个整体删除
整体效果大家可以看看QQ群组里的对话框@功能。
@了两个用户后的效果图
我大学最开始写代码的时候，我的大学老师告诉我要把代码功能模块一步步拆分出来，首先我们应该完成@UserName(空格)的整体最为一个对象，并在用户选择想要@的对象后最为一个整体并变色呈现在编辑框里。然后是监控输入@后弹出@用户选择列表。接着是点击不了@UserName（空格）之间的的字符，删除也是同理。这个就是整体性要求。
1.@UserName(空格)的整体呈现
最开始的设想是用一个富文本编辑器，但是了解了富文本编辑器基础知识后感觉没必要实现一个富文本编辑器在APP中，而只需要自定义一个Span类就可以满足需求，而Android本身的URLSpan和我们的需求很像。看下他的实现源码：
public class URLSpan extends ClickableSpan implements ParcelableSpan {
private final String mURL;
public URLSpan(String url) {
mURL = url;
}
public URLSpan(Parcel src) {
mURL = src.readString();
}
public int getSpanTypeId() {
return TextUtils.URL_SPAN;
}
public int describeContents() {
return 0;
}
public void writeToParcel(Parcel dest, int flags) {
dest.writeString(mURL);
}
public String getURL() {
return mURL;
}
@Override
public void onClick(View widget) {
Uri uri = Uri.parse(getURL());
Context context = widget.getContext();
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
intent.putExtra(Browser.EXTRA_APPLICATION_ID, context.getPackageName());
context.startActivity(intent);
}
}简单分析下上面的代码，mURL存储了url地址，我们用这个存储用户的userId，而ClickableSpan是一个可以点击的Span，因为我们需要点击进入该用户的用户界面，所以需要实现他的onClick方法。向上ClickableSpan知道可以通过重写他的updateDrawState(TextPaint ds)方法实现变色。所以这是我们的ATSpan的代码：
public class ATSpan extends ClickableSpan {
private String userId;
public ATSpan(String userId) {
this.userId=userId;
}
public String getValue(){
return userId;
}
public void setValue(String userId){
this.userId = userId;
}
@Override
public void onClick(View widget) {
Context context = widget.getContext();
Intent intent = new Intent(context, OthersCCActivity.class);
intent.putExtra("UserId", userId);
context.startActivity(intent);
}
@Override
public void updateDrawState(TextPaint ds) {
ds.setColor(Color.parseColor("#FF5DB5F4"));
}
}2.监控出现@字符输入就弹出选择列表
通过监听editText的输入内容就设置一个TextWatcher监听输入内容改变后的字符变化，强调的是在为什么在onTextChanged中实现字符监听是考虑到对直接对字符(char)的操作比转成字符串的操作上有性能优势和便捷性优势，而且onTextChanged里直接提供了改变的字符的位置,方便我们的判断条件：if ('@' == s.charAt(start) && count == 1)就是判断新输入的字符是@。直接看代码吧。
editText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if (!(s.length() > start)) {
return;
}
if ('@' == s.charAt(start) && count == 1) {
toggleSoftInput(posterContentEt,false);
showPopuSelectFriend();
return;
}
if ((s.charAt(start) == '@') && (s.charAt(start + count - 1) == ' ')) {
if ('@' == s.charAt(start - 1)) {
posterContentEt.getText().delete(start - 1, start);
}
}
}
@Override
public void afterTextChanged(Editable s) {
}
});3.点击 @相关字符的 整体性（就是点不进去，焦点只能落在外面）
先上代码：
posterContentEt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int selectionStart = posterContentEt.getSelectionStart();
ATSpan[] atSpans = posterContentEt.getText().getSpans(0, posterContentEt.getText().length(), ATSpan.class);
int length = atSpans.length;
if (0 == length) {
return;
}
for (ATSpan atSpan : atSpans) {
int start = posterContentEt.getText().getSpanStart(atSpan);
int end = posterContentEt.getText().getSpanEnd(atSpan);
if (selectionStart >= start && selectionStart <= end) {
posterContentEt.setSelection(end);
return;
}
}
}
});用变量selectionStart 记录下光标选择的位置，遍历所有的ATSpan的位置区间（start,end），如果selectionStart在这个区间就直接返回，光标落在整个@用户的最后。
4.同上，删除操作也是只能删除@相关的整体内容
这个其实和上面一段代码差不多，不同的是通过keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_DOWN监听输入字符是删除字符del。
posterContentEt.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_DEL && event.getAction() == KeyEvent.ACTION_DOWN) {
int selectionStart = posterContentEt.getSelectionStart();
ATSpan[] atSpans = posterContentEt.getText().getSpans(0, posterContentEt.getText().length(), ATSpan.class);
int length = atSpans.length;
if (0 == length) {
return false;
}
for (ATSpan atSpan : atSpans) {
int start = posterContentEt.getText().getSpanStart(atSpan);
int end = posterContentEt.getText().getSpanEnd(atSpan);
if (selectionStart >= start && selectionStart <= end) {
posterContentEt.getText().delete(start, end);
return true;
}
}
}
return false;
}
});5.转换成富文本格式的内容传服务器
最后ATSpan转换成富文本格式的字符串传到服务器，上代码关门:
public static String convertSpannedToRichText(Spanned spanned) {
List<CharacterStyle> spanList =
Arrays.asList(spanned.getSpans(0, spanned.length(), CharacterStyle.class));
SpannableStringBuilder stringBuilder = new SpannableStringBuilder(spanned);
for (CharacterStyle characterStyle : spanList) {
int start = stringBuilder.getSpanStart(characterStyle);
int end = stringBuilder.getSpanEnd(characterStyle);
if (start >= 0) {
String htmlStyle = handleCharacterStyle(characterStyle,
stringBuilder.subSequence(start, end).toString());
if (htmlStyle != null) {
stringBuilder.replace(start, end, htmlStyle);
}
}
}
return stringBuilder.toString();
}
private static String handleCharacterStyle(CharacterStyle characterStyle, String text) {
if (characterStyle instanceof ATSpan) {
if (TextUtils.isEmpty(text)){
return "";
}
ATSpan span = (ATSpan) characterStyle;
return String.format("<at userId=\"%s\">%s</at>", span.getValue(), text);
}
return null;
}最后，基本效果和QQ的群组对话框的效果大致差不多，基本完成了项目需求。从源码中找解决需求可能就是完成这个功能的心得吧。包括后面从服务器获取的富文本数据还原成Span对象也还是从Android源码中Html类中的写法活得启发完成的。如果有相关问题可以加我的微信问我。第一次上（写）床（博客），难免紧张。
腾讯云开发者
