1. 期待される効果
1. Android TextView コントロールでは、下図のようにテキストと画像が同時に表示され、テキストの間に 1 つ以上の画像が挟まれます。
2. Android TextView コントロールでは複数の色を同時に表示しており、下図のようにテキストに 2 つの異なる色が表示されます。
2. 実施方法
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));3. 実際の効果
以下の 2 つの TextView コントロールでは、画像とテキストの同時表示、および 2 つの異なる色の同時表示が実現されていることがわかります。
4. 完全なコード
アクティビティコード:
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 レイアウト コード:
<?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 画像ファイル: インターネットから画像をダウンロードして置き換えるだけです。
5. 参考資料
ImageGetter を書き換えて、TextView が画像を含む HTML コンテンツを非同期で読み込めるようにします。