Android开发Demo：TextView同时显示图片和文本、同时显示多种颜色

一、预期效果

1、在一个Android TextView控件之中，同时显示文本和图片，如下图所示，文本之间掺夹着一张或多张图片。

2、在一个Android TextView控件之中，同时显示多种颜色，如下图所示，一条文本显示了两种不同的颜色。

二、实现方式

无论是一个TextView同时显示图片和文本，还是同时显示多种颜色，都需要一个Html ImageGetter对象。获得这个对象可以通过下面的代码实现：

private Html.ImageGetter getImageGetter() {return source -> {Drawable drawable = getDrawable(Integer.parseInt(source));drawable.setBounds(0, 0, 60, 60);return drawable;};
}

其中上面的几个参数我也不懂，默认就不需要改变了吧，除非你调用了然后显示异常，可以再去网上看看怎么才能合理设置。

1、同时显示图片和文本。思路：将图片资源通过html标签的方式插入到字符串中，然后TextView再通过setText显示这个带有图片的字符串。如下(tv_1是我定义的TextView控件)：

// 设置文本和图片
StringBuffer str = new StringBuffer();
str.append("故人西辞黄鹤楼");
str.append("<img src='" + R.mipmap.yellow_crane_tower + "'>");
str.append("，");
str.append("烟花三月下扬州。");// 在文本控件中显示
tv_1.setText(Html.fromHtml(str.toString(), getImageGetter(), null));

2、同时显示多种颜色，思路：将文本的颜色通过html标签的方式插入到字符串，然后TextView再通过setText显示这个带有不同颜色的字符串。如下(tv_2是我定义的TextView控件)：

// 设置文本及其颜色
StringBuffer str = new StringBuffer();
str.append("故人西辞黄鹤楼，");
str.append("<font color='#0000FF'>" + "烟花三月下扬州。" + "</font>");// 在文本控件中显示
tv_2.setText(Html.fromHtml(str.toString(), getImageGetter(), null));

三、实际效果

可以看到下面的两个TextView控件中，已经实现了图片与文本的同时显示，以及两种不同颜色的同时显示。

四、完整代码

Activity代码：

package com.cs.blackbox;import androidx.appcompat.app.AppCompatActivity;import android.annotation.SuppressLint;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.text.Html;
import android.widget.TextView;public class TextViewFunctionTestActivity extends AppCompatActivity {// 初始化界面@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_text_view_function_test);demo_1();demo_2();}// 同时显示图片和文本private void demo_1() {// 获取文本控件TextView tv_1 = findViewById(R.id.tft_tv_demo_1);// 设置文本和图片StringBuffer str = new StringBuffer();str.append("故人西辞黄鹤楼");str.append("<img src='" + R.mipmap.yellow_crane_tower + "'>");str.append("，");str.append("烟花三月下扬州。");// 在文本控件中显示tv_1.setText(Html.fromHtml(str.toString(), getImageGetter(), null));}// 同时显示多种颜色private void demo_2() {// 获取文本控件TextView tv_2 = findViewById(R.id.tft_tv_demo_2);// 设置文本及其颜色StringBuffer str = new StringBuffer();str.append("故人西辞黄鹤楼，");str.append("<font color='#0000FF'>" + "烟花三月下扬州。" + "</font>");// 在文本控件中显示tv_2.setText(Html.fromHtml(str.toString(), getImageGetter(), null));}// 获取一个Html ImageGetter@SuppressLint("UseCompatLoadingForDrawables")private Html.ImageGetter getImageGetter() {return source -> {Drawable drawable = getDrawable(Integer.parseInt(source));drawable.setBounds(0, 0, 60, 60);return drawable;};}
}

XML布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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_marginLeft="8dp"android:layout_marginTop="16dp"android:layout_marginRight="8dp"android:layout_marginBottom="16dp"android:orientation="vertical"tools:context=".TextViewFunctionTestActivity"><TextViewandroid:id="@+id/tft_tv_demo_1"android:layout_width="match_parent"android:layout_height="wrap_content"android:textColor="@color/app_black"android:textSize="24sp" /><TextViewandroid:id="@+id/tft_tv_demo_2"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="24dp"android:textColor="@color/app_black"android:textSize="24sp" />
</LinearLayout>

yellow_crane_tower图片文件：自己到网上下载一个图片来替换就好。