TextView图文混排

Shihira 发布于2019-04-23 15:20 / 723人阅读

摘要：大家都知道，有一个的方法来设置上下左右位置的图标，当然，也可以在布局文件中设置，然而问题来了，假如我们把图标放在左边，当我们让分多行显示的时候，会出现一种情况，左边的图标并不会与第一行对齐，而是与整个居中对齐。

大家都知道，textView有一个setCompoundDrawables的方法来设置上下左右位置的图标，当然，也可以在xml布局文件中设置，然而问题来了，假如我们把图标放在左边，当我们让TextView分多行显示的时候，会出现一种情况，左边的图标并不会与第一行对齐，而是与整个textView居中对齐。

即我们要的是下图：

结果是这个图：

怎么办呢？我们可以用图文混排：

我们可以利用SpannableString和ImageSpan。

1、构建SpannableString对象。

SpannableString spanString = new SpannableString(textView.getText().toString());

2、获取Drawable对象，即将我们的图案转换为Drawable对象，并设置大小。

Drawable tvDrawable = ContextCompat.getDrawable(mContext, R.drawable.pic);
tvDrawable.setBounds(0, 0, tvDrawable.getMinimumWidth(), tvDrawable.getMinimumHeight());

3、构建ImageSpan 对象

ImageSpan span = new ImageSpan(tvDrawable, ImageSpan.ALIGN_BASELINE);

4、设置给上面的SpannableString对象

spanString.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);

5、最终设置给TextView

textView.setText(spanString)

加下来讲讲上面的方法：

1、ImageSpan对象，第二个参数为图像与文字的对齐方式，ImageSpan只带有两个对齐方式，分别是：ALIGN_BASELINE、ALIGN_BOTTOM。

ALIGN_BOTTOM 表示与文字内容的底部对齐，如果在构造ImageSpan时没有传入对齐方式，那么默认就是这种底部对齐。

ALIGN_BASELINE, 表示与文字内容的基线对齐

ImageSpan Span = new ImageSpan(tvDrawable, ImageSpan.ALIGN_BASELINE);

2、setSpan()方法

public void setSpan(Object what, int start, int end, int flags) {
        super.setSpan(what, start, end, flags);
    }

what传入各种Span类型的实例;
start和end标记要替代的文字内容的范围；
flags是用来标识在Span范围内的文本前后输入新的字符时是否把它们也应用这个效果,它有如下几个：

Spanned.SPAN_EXCLUSIVE_EXCLUSIVE、

Spanned.SPAN_INCLUSIVE_EXCLUSIVE、

Spanned.SPAN_EXCLUSIVE_INCLUSIVE、

Spanned.SPAN_INCLUSIVE_INCLUSIVE

INCLUSIVE表示应用该效果，EXCLUSIVE表示不应用该效果，如Spanned.SPAN_INCLUSIVE_EXCLUSIVE表示对前面的文字应用该效果，而对后面的文字不应用该效果。

坑：

1、既然ImageSpan只带有两个对齐方式，那我们需要自己实现居中对齐：

class MyImageSpan extends ImageSpan {

        public static final int ALIGN_CENTER = 2;

        public MyImageSpan(Drawable d, int verticalAlignment) {
            super(d, verticalAlignment);
        }

        @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();

            Paint.FontMetricsInt fm = paint.getFontMetricsInt();

            //系统默认为ALIGN_BOTTOM
            int transY = bottom - b.getBounds().bottom;
            if (mVerticalAlignment == ALIGN_BASELINE) {
                transY -= fm.descent;
            } else {
                transY = ((y + fm.descent + y + fm.ascent) / 2
                        - b.getBounds().bottom / 2);
            }
            canvas.translate(x, transY);
            b.draw(canvas);
            canvas.restore();
        }

        @Override
        public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
            Drawable b = getDrawable();
            Rect rect = b.getBounds();
            if (fm != null) {
                Paint.FontMetricsInt painFm = paint.getFontMetricsInt();
                int fontHeight = (painFm.bottom - painFm.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;
        }
    }

为何上面的自定义能够实现居中对齐呢？首先要了解Paint.FontMetrics。

请看另一篇博客：https://www.cnblogs.com/tangZH/p/8692910.html

云服务器私有云图文混排 css图文混排 html图文混排图文混排实例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2610.html

Android自动解析html带图片，实现图文混排

摘要：便是图片的路径，如果图片在本地，可以这样做最终调用这样便可以实现图文混排了，在该显示图片的地方显示图片。如果是要显示网络上的图片，方法可以这样第三个参数其作用是把带标记的文本内容字符串转化成可以显示效果的的字符串。在android中，如何将html代码转换为text，然后显示在textview中呢，有一个简单直接的方法： textView.setText(Html.fromHtml(con...

CNZPH 2019-04-23 15:11 评论0 收藏0
[Android]TextView图文混排对齐

摘要：图片垂直居中显示评论内容，设置标签链接跳转占位用替换文本 package com.chargerlink.app.ui.charging.panel.comment; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android...

张率功 2019-06-25 10:48 评论0 收藏0
知识库 - 收藏集 - 掘金

摘要：进程间通信详解掘金最近项目有进程间通信的需求，我使用的是通信的方式，这是中很传统的一种进程间通信的方式，在这里分享给大家。使用图片加载框架最详细的使用指南掘金写在前面中有几个比较有名的图片加载框架，和。 Android 进程间通信 AIDL详解 - 掘金最近项目有进程间通信的需求，我使用的是IPC通信的方式，这是Android中很传统的一种进程间通信的方式，在这里分享给大家。进程间通...

loonggg 2019-06-25 11:26 评论0 收藏0
［分享］iOS开发－50行代码实现图文混排

摘要：图文混排在这两块中使用最为常见，我已经做好了图文混排。文中会讲述几点小技巧图文混排动态计算文字长度图片拉伸方法。开头本文是技术集中的第一篇技术性文章，所以就记录一点简单且浅显易懂的东西。现在即时通讯和朋友圈这两块功能基本上属于app的标配功能了吧。图文混排在这两块中使用最为常见，我已经做好了demo:图文混排demohttps://github.com/Joker-King...。...

yy13818512006 2019-06-25 15:04 评论0 收藏0
iOS开发UI篇--一个支持图文混排的ActionSheet

摘要：官方提供的以下方式对进行实例化从这个我们可以看出，我们只能设置文本标题，包括和，官方提供的该控件并不支持图文混排。但有的时候，交互提给我们的需求又需要我们的具有图文混排的效果，那就需要我们自己仿造系统自带的，完成该需求。一、简介 UIActionSheet是IOS提供给我们开发者的底部弹出菜单控件，一般用于菜单选择、操作确认、删除确认等功能。IOS官方提供的以下方式对UIAction...

jkyin 2019-06-25 17:02 评论0 收藏0