仿微信@好友功能 輸入@跳转、删除整块
2017-10-30 12:44
369 查看
最近在做聊天功能的时候,有一个需求是仿照微信做@好友的功能,本来以为挺简单,但是做到这块的时候,发现和想象的有点不一样,什么整块删除,块可编辑,总之,加个@的功能很简单,但是要做和微信的一样还是费了一些功夫,下面是一个demo仅供参考,防止遗忘
就是这么个功能
我又照着做了这个,仅供参考
按退格键删除整块内容
块内的内容可编辑,编辑完了之后将不附带@功能,只是单纯的文字
到底从哪里开始入手呢,首先完成变成块的需求,
无意中看到这个项目https://github.com/g707175425/CloudEditText ,他是这么写的
看到这里我们就记得了一个关于SpanableString的用法,它可以设置图片,可以随意的设置文字的背景的前景,等等一系列比较酷炫的效果,而且只需要一个TextView,如果需要深入了解Span,可自行百度和Google,我看的是这篇博客http://blog.csdn.net/u012422440/article/details/52155924,关于Span的进阶用法,于是就有了下面的实现
刚开始我是这么写的
写到现在这个整块添加已经做好了,下面开始做整块删除,刚开始的时候我是模仿上面的CloudEditText写的,但我发现好像会用各种问题,于是想了一种方法
上面的意思就是,如果你在EditText中执行删除一个字符的时候,判断前面一个是否是一个Span,如果是自定义的Span就把Span一同删除,关于这个,我可是测试可各种操作才定为这样的
最后是获取需要@的人员名单
先上个效果图
就是这么个功能
我又照着做了这个,仅供参考
1. 分析需求
输入@跳转到联系人界面,选中一个或者多个好友返回到当前界面按退格键删除整块内容
块内的内容可编辑,编辑完了之后将不附带@功能,只是单纯的文字
2. 开始编码
既然是文本输入首先继承EditText自定义一个控件public class MsgEditText extends AppCompatEditText { public MsgEditText(Context context) { super(context); } public MsgEditText(Context context, AttributeSet attrs) { super(context, attrs); } public MsgEditText(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } }
到底从哪里开始入手呢,首先完成变成块的需求,
无意中看到这个项目https://github.com/g707175425/CloudEditText ,他是这么写的
private void generateOneSpan(Spannable spannableString, UnSpanText unSpanText) { //生成一个TextView View spanView = getSpanView(getContext(), unSpanText.showText.toString(), getMeasuredWidth()); //再将TextView转换为一个图片 BitmapDrawable bitmpaDrawable = (BitmapDrawable) UIUtils.convertViewToDrawable(spanView); bitmpaDrawable.setBounds(0, 0, bitmpaDrawable.getIntrinsicWidth(), bitmpaDrawable.getIntrinsicHeight()); //最后将这个图片放到Span里, MyImageSpan what = new MyImageSpan(bitmpaDrawable, unSpanText.showText.toString(),unSpanText.returnText); final int start = unSpanText.start; final int end = unSpanText.end; spannableString.setSpan(what, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); //设置一个Span spannableString.setSpan(touchableSpan, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); }
看到这里我们就记得了一个关于SpanableString的用法,它可以设置图片,可以随意的设置文字的背景的前景,等等一系列比较酷炫的效果,而且只需要一个TextView,如果需要深入了解Span,可自行百度和Google,我看的是这篇博客http://blog.csdn.net/u012422440/article/details/52155924,关于Span的进阶用法,于是就有了下面的实现
//这个是需要成块删除的内容 private class MyTextSpan extends MetricAffectingSpan { private String showText; private long userId; //userId是为了适应需求,如果不需要请自行去掉 public MyTextSpan(String showText, long userId) { this.showText = showText; this.userId = userId; } public String getShowText() { return showText; } public long getUserId() { return userId; } @Override public void updateMeasureState(TextPaint p) { } @Override public void updateDrawState(TextPaint tp) { } } //这个是非整块删除的内容,当然你如果想也是可以删除的 private class UnSpanText { int start; int end; String returnText; UnSpanText(int start, int end, String returnText) { this.start = start; this.end = end; this.returnText = returnText; } }
刚开始我是这么写的
//外部调用一个增加Span的方法 public void addSpan(String showText, String returnText, long userId) { getText().append(showText); SpannableString spannableString = new SpannableString(getText()); makeSpan(spannableString, new UnSpanText(spannableString.length() - showText.length(), spannableString.length(), showText, returnText), userId); setText(spannableString); setSelection(spannableString.length()); } //生成一个需要整体删除的Span private void makeSpan(Spannable sps, UnSpanText unSpanText, long userId) { MyTextSpan what = new MyTextSpan(unSpanText.returnText, userId); int start = unSpanText.start; int end = unSpanText.end; sps.setSpan(what, start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); }
写到现在这个整块添加已经做好了,下面开始做整块删除,刚开始的时候我是模仿上面的CloudEditText写的,但我发现好像会用各种问题,于是想了一种方法
@Override protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) { super.onTextChanged(text, start, lengthBefore, lengthAfter); //向前删除一个字符,@后的内容必须大于一个字符,可以在后面加一个空格 if (lengthBefore == 1 && lengthAfter == 0) { MyTextSpan[] spans = getText().getSpans(0, getText().length(), MyTextSpan.class); for (MyTextSpan myImageSpan : spans) { if (getText().getSpanEnd(myImageSpan) == start && !text.toString().endsWith(myImageSpan.getShowText())) { getText().delete(getText().getSpanStart(myImageSpan), getText().getSpanEnd(myImageSpan)); break; } } } }
上面的意思就是,如果你在EditText中执行删除一个字符的时候,判断前面一个是否是一个Span,如果是自定义的Span就把Span一同删除,关于这个,我可是测试可各种操作才定为这样的
最后是获取需要@的人员名单
//获取用户Id列表,这只是个参考,可根据需求修改 public String getUserIdString() { MyTextSpan[] spans = getText().getSpans(0, getText().length(), MyTextSpan.class); StringBuilder builder = new StringBuilder(); for (MyTextSpan myTextSpan : spans) { String realText = getText().toString().substring(getText().getSpanStart(myTextSpan), getText().getSpanEnd(myTextSpan)); String showText = myTextSpan.getShowText(); if (realText.equals(showText)) { builder.append(myTextSpan.getUserId()).append(","); } } if (!TextUtils.isEmpty(builder.toString())) { builder.deleteCharAt(builder.length() - 1); } return builder.toString(); }
最后我就大方的放个地址你们自己看吧
https://github.com/ddssingsong/AtFriend相关文章推荐
- Android仿微信@好友功能 输入@跳转、删除整块
- 基于Python实现通过微信搜索功能查看谁把你删除了
- Android 高仿微信(QQ)滑动弹出编辑、删除菜单效果,增加下拉刷新功能
- iOS 分享功能之图片压缩(微信好友-朋友圈)
- 利用Python了解微信通信机制,实现查询有多少好友删除你!!
- 【微信小程序】:评论、回复和删除功能 -- 2017/7/14
- Android仿微信通讯录功能,好友排序+字母索引
- python查看微信好友是否删除自己
- 基于Python实现通过微信搜索功能查看谁把你删除了
- React Native开源仿QQ微信列表左右滑动删除等功能组件(react-native-swipeout)
- Android实现屏蔽微信拉黑和删除联系人功能示例
- 黑科技 Python脚本帮你找出微信上删除你好友的人
- Python 脚本帮你找出微信上删除了你的“好友“
- mui 列表项左右滑删除功能升级(仿微信左滑 点击删除后出现确认删除)
- 跳转微信功能(学习总结)
- 就微信最近增加删除聊天记录的二次确认功能再谈一谈产品设计的细节
- 微信小程序 向左滑动删除功能
- 黑科技 Python脚本帮你找出微信上删除你好友的人
- Python 脚本帮你找出微信上删除了你的“好友“
- 友盟社会化分享的坑——微信好友/朋友圈分享跳转不到内容编辑界面