TextView + Spanned实现图文混排以及图片点击交互

最新推荐文章于 2025-05-04 16:14:03 发布

三精-大精wing

最新推荐文章于 2025-05-04 16:14:03 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：安卓实战文章标签： android 图文混排

本文链接：https://blog.youkuaiyun.com/wingichoy/article/details/52685065

本文分享了如何使用SpannableStringBuilder在Android中实现图文混排，并且添加图片点击交互的功能。通过结合Spanned、ClickSpan、ImageSpan和ImageGetter等组件，将HTML内容解析成Spanned字符串，实现点击图片进行放大等交互操作。文中还提供了封装后的控件GitHub地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近要实现图文混排的需求，webview过大，所以想到了用SpannableStringBuilder来实现。不过参考了大量国内文章，大多数是教你如何实现图文混排，并没有提及图片点击交互的。有翻阅了一些国外文章，说的也不是很详细，于是花费时间鼓捣了一下，最终实现了TextView图文混排，加点击交互的效果，在这里给大家分享下以免后来者在此处浪费过多时间。

主要用到的有Spanned ClickSpan ImageSpan ImagerGetter Html 。
先看一下效果图：
这里写图片描述

我把它封装成了一个控件，使用的时候只要将它放到xml布局
下载地址：https://github.com/githubwing/RichTextView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.wingsofts.richtextview.MainActivity"
    >

  <com.wingsofts.richt