android图文混排

Android官方对TextView的图文混排提供了支持，我们可以从以下三种方式实现TextView的图文混排：

1.在TextView中使用Compound Drawable属性；
2.在TextView中使用Spannable多样式显示；
3.在TextView中显示HTML文本

一、在TextView中使用Compound Drawable属性

一共有两种方式可以实现：XML布局设置和Java代码设置。

1. xml布局

 <TextView
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="查看新的内容"
        android:textSize="18sp"
        android:drawablePadding="10dp"
        android:drawableLeft="@drawable/arrow"/>

android:drawableLeft	在文字左边设置图片
android:drawableTop	在文字上边设置图片
android:drawableRight	在文字右边设置图片
android:drawableBottom	在文字下边设置图片
android:drawableStart	API 17后生效，LTR时在左边，RTL时在右边
android:drawableEnd	API 17后生效，LTR时在右边，RTL时在左边
android:drawablePadding	图片和文字的间距

2. java代码

textView = (TextView) findViewById(R.id.textView);
        Drawable drawable = getResources().getDrawable(R.drawable.see);
        drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());
        textView.setCompoundDrawables(null,null,null,drawable);
        textView.setCompoundDrawablePadding(10);

注意：必须setBounds()测量图片边界，否则不显示。

setCompoundDrawables	设置上下左右位置的图片
setCompoundDrawablesRelative	设置四周的图片，其中两边对应xml中的start,end
setCompoundDrawablesWithIntrinsicBounds	设置上下左右位置的图片，图片有默认的边界
setCompoundDrawablesRelativeWithIntrinsicBounds	设置四周的图片，图片有默认的边界
setCompoundDrawablePadding	设置图片与文字之间的间距

3.缺陷

当TextView设置成固定大小时，由于文字距离边界的距离过大，会导致文字与图片之间设置的间距无效，如下图。

解决方案：

①设置TextView的内填充

通过设置paddingLeft、paddingRight、paddingTop、paddingBottom来缩写这个间距

②自定义TextView重新布局

a.先自定义属性iconPadding来设置间距，并提供方法给外部调用。

b.重写setCompoundDrawablesWithIntrinsicBounds()方法来获取我们设置的drawable宽高。

c.最后重写onLayout方法。

可以先参考：Android技巧之drawablePadding的那些事,该篇文章只解决了左右失效的问题。后期会整理个解决图文混排的工具库，里面会有具体方案。

二、 在TextView中使用Spannable多样式显示；

setText(CharSequence text)中接收的是CharSequence。而SpannableString和SpannableStringBuilder是其实现类，是可以直接赋值的。并且两者的setSpan()方法可以设置一些格式对象（例如字体大小、下划线、替换为图片等），这就可以实现富文本了。

Spannable实现子类：SpannableString，SpannableStringBuilder（可变，类似于StringBuilder）。

Spannable中定义了抽象方法：setSpan(Object what, int start, int end, int flags)和removeSpan(Object what)。这两个方法实现了对字符串的灵活编辑。

使用方法：

        SpannableString span3 = new SpannableString("我如果爱你");
        ImageSpan image = new ImageSpan(this,R.drawable.collect, DynamicDrawableSpan.ALIGN_BOTTOM);
        span3.setSpan(image,3,4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        tv3.setText(span3);

其中ImageSpan默认对其方式有两种：ALIGN_BOTTOM及ALIGN_BASELINE。很可惜我们平常用的居中对其的方式没有，不过可以通过自定义实现，后续会在开源出来。

三、html 显示

一般显示HTML内容有两种方式：

• 使用 Android 提供的 WebView 控件。
• 通过将 HTML 内容转化为 Spanned 格式在 TextView 中进行显示。

现在大多数都用WebView的方式。但是并不是所有的场景下都适合使用 WebView 来显示 HTML 内容，例如，如果应用要显示的内容只是一部分 HTML 片段，就可以利用 TextView 来进行显示，并且效率较高。

由于这种方式不太常用，就不深入介绍，里面可以实现的效果还是很好的。

Android 中的 TextView 组件常用于显示文本内容，其实它也可以显示 HTML 的内容。

简单来讲，这就需要先把 HTML 的内容以字符串的形式获取后，经过 android.text.Html.fromHtml()转化成 Spanned 的格式，然后将其传递到 TextView 的 setText()方法中，这样就可以在 TextView 中显示 HTML 页面的内容了。

fromHtml(String source, ImageGetter imageGetter,TagHandler tagHandler)

用户交互

formHtml()方法已经将 HTML 内容中的超链接和图片转义成为 UrlSpan 和 ImageSpan，进而在 TextView 中完成显示。但是此时是没有任何用户交互的，用户只能看到 HTML 的内容，下面介绍如何添加用户交互功能。

要完成用户交互，这里我们需要在 TextView 中还需要调用textView.setMovementMethod()方法。

Android 提供了 LinkMovementMethod 类以实现了对于文本内容中超链接的遍历，并且支持对于超链接的点击事件。

所以只要在添加下面一行代码，就可以使点击 UrlSpan 能够触发打开链接的功能。

textView.setMovementMethod(LinkMovementMethod.getInstance())

如果想要更多的用户交互效果，可以自定义LinkMovementMethod 类，重写onTouchEvent方法来实现。

本文为转载内容
原文链接：http://www.jianshu.com/p/6843f332c8df