AndroidRichText 让Textview轻松的支持富文本(图像ImageSpan、点击效果等等类似QQ微信聊天)

代码地址:https://github.com/Luction/AndroidRichText

AndroidRichText帮助实现像QQ,微信一样的,一个TextView里既有文字又有表情又有图片的效果,采用插件化的框架,代码简单,可拓展性强。

基础框架包只有四个java文件,

RichTextWrapper :TextView的包裹类,实现支持富文本,通过new RichTextWrapper(TextView v)来构造。
RTMovementMethod: 继承自Android原生的LinkMovementMethod,重写onTouchEvent方法,优化了ClickSpan(点击响应的文字区域)的点击响应。
Resolver:一个接口,我们需要实现一种支持富文本类型时就只需要写一个相应的Resolver重写它的resolve方法,在resolve方法里实现所要实现的富文本样式。

RichTexts:一些公用方法、类、接口的集合。

接下来简单介绍一下如何使用这个框架:
//直接根据TextView new一个RichTextWrapper,之后所有的事情都可以用它完成;
RichTextWrapper richTextWrapper = new RichTextWrapper((TextView) findViewById(R.id.tv_main));

//比如QQ希望在TextView里同时有表情和图片那么就可以相应的写两个Resolver来实现分别的功能,直接在初始化时调用addResolver传入就可以。
richTextWrapper.addResolver(ImageResolver.class,EmotionResolver.class);

//同时,我们如果希望点击图片时有响应事件,可以使用setOnRichTextListener来处理,参数要传入对应的Resolver,这里是ImageResolver,如果我们需要自定义的XXResolver处理的富文本效果实现响应事件,那么久传入XXResolver.class;
richTextWrapper.setOnRichTextListener(ImageResolver.class, new RichTexts.RichTextClickListener() {
    @Override
    public void onRichTextClick(TextView v, String content) {
        //在这里可以进行图片的点击事件处理
     //do something
    }
});

//最后直接把文本set进去就可以
richTextWrapper.setText(content);
addResolver可以传入任意个Resolver,让TextView支持我们需要的富文本类型,如果需要取消支持某种富文本类型,只需要不传入该Resolver比如上文中如果只需要支持表情,那么
richTextWrapper.addResolver(EmotionResolver.class);

不需要做太多代码改动,比较灵活。

那么此外,大家可以看出来另一个关键的地方就是Resolver;Resolver是如何实现呢?这边使用一个Demo来简单示例:

public class ImageResolver implements Resolver {

    public static final String IMG_MATCH_REGULAR = "\\[img](\\w+)\\[/img]";
    public static Pattern PATTERN = Pattern.compile(IMG_MATCH_REGULAR);

//参数中的sp是该Textview的content,extra是方便我们使用的一个附加的数据,默认是空的,我们如果希望从外面传入数据到这里面可以通过richTextWrapper.putExtra()来实现
  @Override
    public void resolve(final TextView textView, final Spannable sp, SparseArray<Object> extra, final RichTexts.RichTextClickListener listener) {
        Matcher matcher = PATTERN.matcher(sp);
        final Context context = textView.getContext();

        while(matcher.find()){
            String content = matcher.group(1);
            final RichTexts.TaggedInfo info = new RichTexts.TaggedInfo(matcher.start(),matcher.end(),content);
            if(listener!=null) {
                RichTexts.RichTextClickSpan span = new RichTexts.RichTextClickSpan(listener,info.content);
                sp.setSpan(span, info.start, info.end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            }
            RichTexts.StickerSpan testSpan = new RichTexts.StickerSpan(context, R.drawable.icon,100,100);
            RichTexts.setImageSpan(sp, info, testSpan);
            textView.postInvalidate();
        }
    }

上面的示例中,RichTextClickSpan是大家如果需要实现点击效果必须要用到的,而StickerSpan则是实现图像效果,以上一个可点击的图像的Resolver就实现了,当然上文中是随便传入一个icon,真实情况,大家需要自己根据内容以及所期待的效果自己再做些调整。。

代码地址:AndroidRichText源码地址



				
时间: 2025-01-07 08:53:29

AndroidRichText 让Textview轻松的支持富文本(图像ImageSpan、点击效果等等类似QQ微信聊天)的相关文章

使用KindEditor富文本编辑器,点击批量上传按钮没有选择图片按钮

问题:批量上传没有选择图片按钮 原因: 因为在打开批量上传窗口的时候会发送一个请求,请求swfupload.swf springmvc把这个请求给拦截了,变成了404 解决方法: 所以应该在web.xml中配置 <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.swf</url-pattern> </servlet-mapping> 把这个请求给

移动端输入框只有输入文本后才能点击效果

现在手机端的提交按钮很多都是在输入内容后才能提交的,如图: 这是没有输入文本时的效果,当然 下一步 按钮也是不可点击的 这个是是输入文本后的效果,可以进行下一步的操作 这样做对数据提交的正确性有一定的保护,同时也增加了用户体验.其实实现这样的效果逻辑很简单.代码如下: /*如果输入内容就给提交按钮添加样式并且添加跳转链接*/ var btn = $('buttn') function judge(){ var lenght1 = $('#input1').val().length; var le

轻量级web富文本框——wangEditor使用手册(1)——基本应用

1. 介绍&下载 wangEditor是用javascript编写的轻量级web富文本编辑器,依赖于jQuery和fontAwesome字体库,支持所有浏览器.使用wangEditor可以轻松创建web富文本框,并可以自定义扩展菜单功能.wangEditor所有源码都已经在github上开源下载. 下载地址:https://github.com/wangfupeng1988/wangEditor 交流QQ群:164999061 2. 生成富文本框 2.1 下载 从https://github.c

用POP动画编写带富文本的自定义动画效果

[源码] https://github.com/YouXianMing/POPNumberCount [效果] [特点] * 支持富文本 * 可定制型强(继承父类重写父类的startAnimation方法即可) * 支持动画的中断与持续 * 支持CAMediaTimingFunction * 数据与UI隔离,便于你封装属于你的类 [核心] // // POPNumberCount.h // POP // // Created by XianMingYou on 15/4/10. // Copyr

iOS 富文本类库RTLabel

本文转载至 http://blog.csdn.net/duxinfeng2010/article/details/9004749 本节关于RTLable基本介绍,原文来自 https://github.com/honcheng/RTLabel RTLabel 基于富文本的格式,适用于iOS,类似HTML的标记. RTLabel 基于UILabel类的拓展,能够支持Html标记的富文本显示,它是基于Core Text,因此也支持Core Text上的一些东西. 特点 粗体和斜体 颜色和大小 下划线

扩展于RCLabel的支持异步加载网络图片的富文本引擎的设计

扩展于RCLabel的支持异步加载网络图片的富文本引擎的设计 在iOS开发中,图文混排一直都是UI编程的一个核心点,也有许多优秀的第三方引擎,其中很有名的一套图文混排的框架叫做DTCoreText.但是在前些日的做的一个项目中,我并没有采用这套框架,原因有二,一是这套框架体积非常大,而项目的需求其实并不太高:二是要在这套框架中修改一些东西,难度也非常大,我最终采用的是一个叫做RCLabel的第三方控件,经过一些简单的优化和完善,达到了项目的要求. 先来介绍一下我项目中的图文混排的需求:首先我从服

iOS 富文本格式字符 以及处理iOS8下textview设置富文本后输入bug

iOS的富文本设置,在iOS8下在textView的代理方法中设置textview的attributedText时,会出现富文本格式未加到text上的情况,可以在初始化时将文本属性赋给textview的typingAttributes.代码如下: NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init]; paragraphStyle.lineSpacing = 7;// 字体的行间距 UIF

Android:TextView显示富文本信息

最近需要在TextView中显示一些超链接等信息,如URL(点击后跳转),显示网络图片等. 整理如下: 1.显示URl,在需要显示URL超链接的TextView中设置 textview.setText(Html.fromHtml(urlString)) (urlString 用html语法来标识) versionText.setMovementMethod(LinkMovementMethod.getInstance()); 上面一句必须设置,否则将无法跳转. 2.显示网络图片 textview

textView富文本点击事件

NSDictionary * attDic = [NSDictionary dictionaryWithObjectsAndKeys:RGBCOLOR(31, 132, 204),NSForegroundColorAttributeName,[NSNumber numberWithInteger:NSUnderlineStyleSingle],NSUnderlineStyleAttributeName,@“url”,NSLinkAttributeName, nil]; 如果想要跳转viewCon