两行文本前面加图片用 ImageSpan的实现

先上效果图:

Paste_Image.png

左边应该是个图片,右边就是文本,并且第二行是与图片的左边相对齐的。

这是一个排行榜,总共有10个条目,一开始UI 就给切了1-3三个icon,但是经过考虑以后,这个标题是两行跟一行混排的这种,如果是1行文本的话还好说,但是还有2行的情况必须还要考虑,没办法这种情况下只能让 UI 把1-10的 icon 图片全部切给我们。

一开始做的时候,在文本前面加图片我们一般用 TextView 的 drawableLeft 属性,但是在实际运行展示的话达不到我们要求的效果,在两行文本的时候图片会占据两行,第二行的文本对其的是图片的右边沿。

没办法了只能考虑用 SpannableString 还有ImageSpan 来实现。
具体代码如下:

SpannableString ss = new SpannableString(position +" "+ data.title);
        //得到drawable对象,即所要插入的图片
 Drawable d = context.getResources().getDrawable(ranks[position]);
 d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
ss.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);

这个地方要注意 setSpan 里面的0跟1 这两个参数,里面的参数代表的一个是 start 一个是 end 就是在字符串中所占的位置,如果都设置为0,0的话就看不到图片了,再加上图片与文字之间还有空间,这样的话就需要我们手动在要展示的字符串加上任意字符还有加的空格,这就是上图代码中 position +" "+ data.title参数的由来。

这应该是我们常用的设置,但是展示的时候有些问题,因为图片比较大展示的时候相比较在文字的上方,展示要求的话是在图片与文本居中。

首先想到的是 setBounds 方法,里面的参数是设置图片的位置的,手动改变初始的位置改为负值看看能不能是图片向下展示,但是都失败了,个人感觉这个地方最低应该就是以文本的展示的最低点为参考的,就是0 ,0 开始的。
没办法只能上网谷歌了,最终代码如下:

SpannableString ss = new SpannableString(position +" "+ data.title);
        //得到drawable对象,即所要插入的图片
ImageSpan span = new MyIm(context, ranks[position]);
ss.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
holder.tvTitle.setText(ss);
 
public class MyIm extends ImageSpan
    {
        public MyIm(Context arg0,int arg1) {
            super(arg0, arg1);
        }
        public int getSize(Paint paint, CharSequence text, int start, int end,
                           Paint.FontMetricsInt fm) {
            Drawable d = getDrawable();
            Rect rect = d.getBounds();
            if (fm != null) {
                Paint.FontMetricsInt fmPaint=paint.getFontMetricsInt();
                int fontHeight = fmPaint.bottom - fmPaint.top;
                int drHeight=rect.bottom-rect.top;

                int top= drHeight/2 - fontHeight/4;
                int bottom=drHeight/2 + fontHeight/4;

                fm.ascent=-bottom;
                fm.top=-bottom;
                fm.bottom=top;
                fm.descent=top;
            }
            return rect.right;
        }

        @Override
        public void draw(Canvas canvas, CharSequence text, int start, int end,
                         float x, int top, int y, int bottom, Paint paint) {
            Drawable b = getDrawable();
            canvas.save();
            int transY = 0;
            transY = ((bottom-top) - b.getBounds().bottom)/2+top;
            canvas.translate(x, transY);
            b.draw(canvas);
            canvas.restore();
        }
    }

这里要注意,一行文本的话重写 ImageSpan的 draw( )方法就行了,但是两行的话就不行了,还是原先的问题,这样的话就需要再重写getSize( )方法了。

水平有限,如果写的有问题的话请各位大大不吝赐教。

参考文章:
Android ImageSpan与TextView中的text居中对齐问题解决
Android ImageSpan的图文居中对齐

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,870评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 前言:这5个小故事,不仅有趣,还富有哲理,特别是最后一个,看得我心头一紧,眼眶发红。 1. 《散步》 一女在违背父...
    正好学拼读阅读 460评论 0 0
  • 最新版本的paragon ntfs for mac的LOGO似乎做了一些变化,像是硬盘的图样,感觉生动了不少。 这...
    想干啥就干啥阅读 3,282评论 1 0
  • 人吃的东西,构成了身体的每个细胞。同样,经历的人和事,也构成了每个思维的细胞。如果,每天吃健康的食物,人的身体就是...
    远黛如眉阅读 160评论 0 0