Android development demo: TextView displays pictures and text at the same time, and displays multiple colors at the same time

1. Expected effects

        1. In an Android TextView control, text and pictures are displayed at the same time, as shown in the figure below. One or more pictures are sandwiched between the text.

        2. In an Android TextView control, multiple colors are displayed at the same time. As shown in the figure below, a text displays two different colors.

2. Implementation method

        Whether a TextView displays pictures and text at the same time, or displays multiple colors at the same time, an Html ImageGetter object is required. Obtaining this object can be achieved through the following code:

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

        I don’t understand the above parameters. There is no need to change them by default. Unless you call them and an exception appears, you can go online to see how to set them appropriately.

        1. Display pictures and text at the same time. Idea: Insert the image resource into the string through html tags, and then TextView displays the string with the image through setText. As follows (tv_1 is the TextView control I defined):

// 设置文本和图片
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. Display multiple colors at the same time. Idea: Insert the color of the text into the string through html tags, and then TextView displays the string with different colors through setText. As follows (tv_2 is the TextView control I defined):

// 设置文本及其颜色
StringBuffer str = new StringBuffer();
str.append("故人西辞黄鹤楼，");
str.append("<font color='#0000FF'>" + "烟花三月下扬州。" + "</font>");

// 在文本控件中显示
tv_2.setText(Html.fromHtml(str.toString(), getImageGetter(), null));

3. Actual effects

        You can see that in the two TextView controls below, the simultaneous display of pictures and text, as well as the simultaneous display of two different colors, has been achieved.

 

4. Complete code

        Activity code:

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 {
    // 初始化界面
    @Override
    protected 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 layout code:

<?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">
    <TextView
        android:id="@+id/tft_tv_demo_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/app_black"
        android:textSize="24sp" />

    <TextView
        android: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 picture file: Just download a picture from the Internet and replace it.

5. Reference materials

        Rewrite ImageGetter to let TextView asynchronously load html content containing images

        ImageGetter displays images in Html

        Html class ImageGetter interface