Android中如何实现长文本对齐到ImageView右侧及下方的环绕布局

问题原因 #

你当前使用RelativeLayout无法实现预期效果的核心原因是：普通Android布局容器中，TextView作为独立的子控件，只能设置整体和ImageView的相对位置，无法让内部的文字内容自动流动填充ImageView下方的空白区域，这类图文环绕的混排效果需要用富文本渲染方案实现。

推荐实现方案 #

以下两个方案都适配博客内容的动态加载场景，可通过XML+业务代码组合实现：

方案1：WebView渲染（最适配博客场景） #

博客内容通常包含多种富文本格式，直接用WebView加载拼接好的HTML内容，天然支持图文环绕，无需额外适配格式：

布局XML代码

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    tools:context=".PostDetailsActivity">

    <WebView
        android:id="@+id/postWebView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</ScrollView>

Activity加载逻辑（Kotlin示例，Java写法逻辑一致）

// 从服务端获取的图片地址和博客描述
val imgUrl = "服务端返回的图片地址"
val content = "服务端返回的博客描述文本"
// 拼接HTML代码，设置图片左浮动实现环绕效果
val html = """
    <html>
        <body>
            <img src="$imgUrl" style="float:left; margin-right:10dp; width:200px; height:200px;" />
            <p>$content</p>
        </body>
    </html>
""".trimIndent()
// 加载到WebView，不需要JS可关闭提升安全性
postWebView.settings.javaScriptEnabled = false
postWebView.loadDataWithBaseURL(null, html, "text/html", "utf-8", null)

方案2：原生TextView+Spannable实现环绕 #

如果不想引入WebView，可以通过Spannable把图片插入文本中实现环绕效果：

布局XML代码

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    tools:context=".PostDetailsActivity">

    <TextView
        android:id="@+id/postContentTv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</ScrollView>

Activity设置逻辑

// 异步加载服务端图片得到Drawable对象，设置尺寸为200dp*200dp
val drawable = 加载得到的图片Drawable
drawable.setBounds(0, 0, dp2px(200), dp2px(200))
// 构建Spannable内容
val content = "服务端返回的博客描述文本"
val spannable = SpannableString("  $content")
// 插入顶部对齐的图片Span
val imageSpan = ImageSpan(drawable, ImageSpan.ALIGN_TOP)
spannable.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
// 设置给TextView
postContentTv.text = spannable

注：dp2px为dp转像素的通用工具方法，需自行实现保证多设备适配

内容的提问来源于stack exchange，提问作者Salman