Android Spannable

最近在研究android中emoji的显示问题,突然对spannable,特别好奇.
查了一圈资料发现spannable是Android中的一大杀器啊
本文基本上是类似直播的形式,全文大量的粘贴注释...

Spannable是一个接口,我们先来看看它的继承树.

Spannable继承树.png

然后是Spannable,这个接口里面居然还有个类,是一个单例类.


Spannable.png

仔细看了一下,原来Spannable也不是顶层接口...CharSequence才是...

CharSequence.png

我们先看一下CharSequence,居然是java.lang包下的,String是它的实现类...以前学java的时候都没见过...注释上说这个接口代表了一个有序的字符集合,而且定义了几个方法来操作这个字符集合.

package java.lang;

/**
 * This interface represents an ordered set of characters and defines the
 * methods to probe them.
 */
public interface CharSequence

里面有这几个方法.


CharSequence.png

接下来我们看一下Spanned接口,发现有一大堆MARK,POINT之类的常量.

Spanned.png

看一下注释

/**
 * This is the interface for text that has markup objects attached to
 * ranges of it.  Not all text classes have mutable markup or text;
 * see {@link Spannable} for mutable markup and {@link Editable} for
 * mutable text.
 */

再看一下关于MARK和POINT的注释

     * MARK and POINT are conceptually located <i>between</i> two adjacent characters.
     * A MARK is "attached" to the character before, while a POINT will stick to the character
     * after. The insertion cursor is conceptually located between the MARK and the POINT.
     *
     * As a result, inserting a new character between a MARK and a POINT will leave the MARK
     * unchanged, while the POINT will be shifted, now located after the inserted character and
     * still glued to the same character after it.
     *
     * Depending on whether the insertion happens at the beginning or the end of a span, the span
     * will hence be expanded to <i>include</i> the new character (when the span is using a MARK at
     * its beginning or a POINT at its end) or it will be <i>excluded</i>.
     *
     * Note that <i>before</i> and <i>after</i> here refer to offsets in the String, which are
     * independent from the visual representation of the text (left-to-right or right-to-left).

不知道大家看懂了没,反正我是没看懂.
不过还好,最后在StackOverFlow上找到一个答案,认认真真的看了两个答案好几遍,总算是有点明白了.

原文地址:

http://stackoverflow.com/questions/16531555/what-is-the-difference-between-span-point-mark-and-span-mark-point/17846413#17846413

注释上说,MARK和POINT在两个相邻的字符间,MARK贴在前面一个字符后面,POINT贴在后面一个字符前面,然后我们常用的光标就是存在于MARK和POINT之间.

StackOverFlow的答案上用]来表示MARK,用[来表示POINT,我觉得是很形象的,开口的方向代表了他依附字符的方向.也就是说]依附在前面一个字符上,[依附在后面的字符上.

最后我推测,Spanned这个接口提出了SPAN这个概念,并且定义了许多类型的SPAN,每个SPAN都由MARK或SPAN包围,也就是Spanned接口中得那些静态常量:SPAN_MARK_MARK,SPAN_MARK_POINT,SPAN_POINT_MARK,SPAN_POINT_POINT

我再举几个例子,首先SPAN是有长度的,
然后SPAN是不可见的,
然后Spanned这个接口还提出了Start和End的概念,不同类型的Span,Start和End的位置也不同.
一个长度为0的SPAN_MARK_MARK相当于一个标签,

//一个SPAN_MARK_MARK的span
//这个span的Start和End的位置是这样的 ]]Start,End
"]]我是例句"
//无论我们是在Start还是在End出输入内容,span店铺不会变化
"]]hello,我是例句"

//一个SPAN_POINT_POINT的span
//这个span的Start和End的位置是这样的 Start,End[[
"[[我是例句"
//无论我们是在Start还是在End出输入内容,span店铺不会变化
"hello,[[我是例句"

//一个SPAN_MARK_POINT的span
//这个span的Start和End的位置是这样的 ]Start,End[
"][我是例句"
//SPAN_MARK_POINT又叫做SPAN_INCLUSIVE_INCLUSIVE,意思是在Start处和在End处添加内容都会包括在Span中
在Start处输入 "]hello,[我是例句"
在End处输入 "]hello,[我是例句" 

//一个SPAN_POINT_MARK的span
//这个span的Start和End的位置是这样的 Start[]End
"[]我是例句"
//SPAN_MARK_POINT又叫做SPAN_EXCLUSIVE_EXCLUSIVE,意思是在Start处和在End处添加内容都不会包括在Span中
"hello,[]我是例句"
"[]hello,我是例句"
"he[]llo,我是例句"

当然,目前为止,我刚刚说的都是猜测.

后来发现SPAN_MARK_MARK,SPAN_MARK_POINT,SPAN_POINT_MARK,SPAN_POINT_POINT这些常量是作为flag来应用的,每个flag都可以设置成其中任意一种.

接下来我们回来看 Spannable 这个类,最常用的就是这个setSpan

Spannable

接着贴注释...注释里说这个方法会把指定的标记对象贴到startend之间,其中的第四个参数flag我前文已经解释的很清楚了.
所以我们接着看第一个参数Object what,注释里说这个what可以给文字加特技,加功能.

/**
     * Attach the specified markup object to the range <code>start…end</code>
     * of the text, or move the object to that range if it was already
     * attached elsewhere.  See {@link Spanned} for an explanation of
     * what the flags mean.  The object can be one that has meaning only
     * within your application, or it can be one that the text system will
     * use to affect text display or behavior.  Some noteworthy ones are
     * the subclasses of {@link android.text.style.CharacterStyle} and
     * {@link android.text.style.ParagraphStyle}, and
     * {@link android.text.TextWatcher} and
     * {@link android.text.SpanWatcher}.
     */
    public void setSpan(Object what, int start, int end, int flags);

注释里还说Some noteworthy ones are the subclasses of {@link android.text.style.CharacterStyle} ...于是找到了这个类CharacterStyle,我们接着看注释...

/**
 * The classes that affect character-level text formatting extend this
 * class.  Most extend its subclass {@link MetricAffectingSpan}, but simple
 * ones may just implement {@link UpdateAppearance}.
 */

CharacterStyle能够进行字符级别的格式化的类都集成自这个类.我们看下继承树,可以发现很多熟悉的Span,比如URLSpan,StyleSpan,ImageSpan,我猜这些就是可选的what吧.

CharacterStyle继承树.png

种类繁多,我们先看些码一些代码试试效果,那个链接还不能点击,我们慢慢解决.

span效果图.png

代码如下,试了BackgroundColorSpan,StyleSpan,URLSpan,ImageSpan四种,效果还可以

tvSpan = (TextView) findViewById(R.id.tv_span);
SpannableStringBuilder ssb= new SpannableStringBuilder("public static void main \n www.jianshu.com");

ssb.setSpan(new BackgroundColorSpan(0x88ff0000),0,6, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
ssb.setSpan(new StyleSpan(Typeface.BOLD_ITALIC),0,6, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
ssb.setSpan(new URLSpan("www.jianshu.com"),26,41,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

Drawable drawable = getResources().getDrawable(R.drawable.p1);
drawable.setBounds(0,0,tvSpan.getLineHeight(),tvSpan.getLineHeight());
ssb.setSpan(new ImageSpan(drawable,1),7,13,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

tvSpan.setText(ssb);

我们先看BackgroundColorSpan这个类,看看他的setSpan方法是如何实现的.注释上说The flags determine how the span will behave when text is inserted at the start or end of the span's range.说明上面的内容还是靠谱的.这个方法调用了另外一个更多参数的setSpan.

    /**
     * Mark the specified range of text with the specified object.
     * The flags determine how the span will behave when text is
     * inserted at the start or end of the span's range.
     */
    public void setSpan(Object what, int start, int end, int flags) {
        setSpan(true, what, start, end, flags);
    }

setSpan(true, what, start, end, flags);这个方法100多行,除了吧把span存到mSpans,并没有找到更多线索,找了一圈,发现也许和SpanWatcher及他的子类有关系,看的仔细的同学应该发现前面的注释里有提到过....

唔,这个接口看起来很像是span的处理者,第二个参数就是what,不过,这个接口是观察者也说不定...

SpanWatcher.png
/** 
    * When an object of this type is attached to a Spannable, its methods 
    * will be called to notify it that other markup objects have been * added, changed, or removed. */

果然是搞错了,这个是观察者...也许如何操纵Span的代码在TextView里?

打开TextView的源码,先看看import信息

import android.text.SpanWatcher;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.SpannableStringBuilder;
import android.text.Spanned;
import android.text.SpannedString;

好多span相关的类,看来相应的逻辑应该在这里了.
but...TextView的源码有10194行...怎么看啊...

找了半天,在第8061行找到了一个看起来很关键的方法,但是没注释...

 void spanChange(Spanned buf, Object what, int oldStart, int newStart, int oldEnd, int newEnd)

看完发现这个方法也不是我要找的....

既然自己找不到,还是去Google查一查
于是找到了这篇文章

http://flavienlaurent.com/blog/2014/01/31/spans/

开篇第一句

When you set text on a TextView, it uses the base class Layout to manage text rendering.

接下来看到这个类,不过这个类不在SDK里,而是在android源码里,也就是AOSP的代码里,
这个java文件的路径是frameworks/base/core/java/android/text/TextLine.java

/**
 * Represents a line of styled text, for measuring in visual order and
 * for rendering.
 *
 * <p>Get a new instance using obtain(), and when finished with it, return it
 * to the pool using recycle().
 *
 * <p>Call set to prepare the instance for use, then either draw, measure,
 * metrics, or caretToLeftRightOf.
 *
 * @hide
 */
class TextLine

已经下到源码了= =\这个貌似已经超出了我的实力范围...接着ctrl+V


android.text.TextLine documentation says: Represents a line of styled text, for measuring in visual order and for rendering.

TextLine class contains 3 sets of Spans:

MetricAffectingSpan set
CharacterStyle set
ReplacementSpan set
The interesting method is TextLine#handleRun. It’s where all Spans are used to render the text. Relative to the type of Span, TextLine calls:

CharacterStyle#updateDrawState to change the TextPaint configuration for MetricAffectingSpan and CharacterStyle Spans.
TextLine#handleReplacement for ReplacementSpan. It calls Replacement#getSize to get the replacement width, update the font metrics if it’s needed and finally call Replacement#draw.


更多的Span.png

总结

最后也没能把每个过程都找清楚,这篇文章别看没什么质量,可使却也是花了我三天,15个小时左右的时间才写出来的,写完之后觉得并没有什么收获...
但是看到了许多酷酷的东西还是觉得很开心,感觉打开了一扇新的大门,以前认为不可能实现的功能真实的出现在眼前,感觉好爽.

blog还是要写的,越是怕文章没内容越是要写,因为努力的想要写出起码差强人意的文章,也是多努力了好多,多坚持了好久.所以也看到了许多实战几个月都接触不到的东西.

最后推荐这篇文章,刚刚没点开的同学一定不要错过啊!

http://flavienlaurent.com/blog/2014/01/31/spans/

你看,效果酷不酷!

Fireworks

还可以这样


animateblur

还有这样


animatetypewriter
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139
  • 在项目中很常用到Spannable,既丰富了文本又精简了布局。SpannableString、Spanna...
    寻味Android阅读 1,280评论 0 2
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,209评论 0 17
  • 前言 工作找完了,已经干了两个星期。虽然经常加班,不过相比之前的工作,现在过得更加充实、更有意义。现在有点空闲时间...
    带心情去旅行阅读 70,982评论 42 237
  • 【向前一步】 女性获取成功一般会比男性更艰难, 我们应该从下面三点去突破。 1.勇敢点 女性和男性相比总是胆子不够...
    K王之姐阅读 89评论 0 0