วิธีสร้างข้อความหลายสไตล์ใน TextView เดียวบน Android

บทความนี้สาธิตวิธีใช้ HTML tags และ Spanned เพื่อแสดงข้อความหลายสไตล์ (ตัวหนา ตัวเอียง สี ตัวเล็ก) ใน TextView เดียวบน Android

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

เปิด Android Studio → File → New Project → กรอกรายละเอียด

ขั้นตอนที่ 2: จัดรูปแบบหน้าจอ (activity_main.xml)

วาง TextView 3 ตัวใน res/layout/activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_above="@id/textView2"
        android:layout_marginBottom="16dp"
        android:padding="4dp"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="4dp"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView2"
        android:layout_marginTop="16dp"
        android:padding="4dp"
        android:textSize="16sp" />

</RelativeLayout>

ขั้นตอนที่ 3: เขียนโค้ด MainActivity.java

ใช้ Html.fromHtml() เพื่อแปลง HTML string เป็น Spanned:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.text.Spanned;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    TextView textView1, textView2, textView3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView1 = findViewById(R.id.textView1);
        textView2 = findViewById(R.id.textView2);
        textView3 = findViewById(R.id.textView3);

        // วิธีที่ 1: Hardcode HTML string
        String htmlText = "Multiple styles: " +
                "<b>Bold text</b>, " +
                "<i>Italic text</i>, " +
                "<small>Small text</small>, " +
                "<font color='blue'>Blue text</font>, " +
                "<font color='green'><b>Green Bold</b></font>";

        textView1.setText(Html.fromHtml(htmlText));

        // วิธีที่ 2: ใช้ตัวแปร Spanned
        Spanned spannedText = Html.fromHtml(htmlText);
        textView2.setText(spannedText);

        // วิธีที่ 3: ดึงจาก strings.xml (แนะนำสำหรับการจัดการภาษา)
        textView3.setText(Html.fromHtml(getString(R.string.textStyle)));
    }
}

ขั้นตอนที่ 4: เพิ่มสตริงใน strings.xml

แก้ไข res/values/strings.xml โดยใช้ CDATA เพื่อหลีกเลี่ยงการ escape ตัวอักษร:

<resources>
    <string name="app_name">Sample</string>

    <string name="textStyle"><![CDATA[
        Multiple styles: <b>Bold text</b>, <i>Italic text</i>,
        <small>Small text</small>,
        <font color="blue">Blue text</font>,
        <font color="green"><b>Green Bold</b></font>
    ]]></string>
</resources>

HTML Tags ที่รองรับ

หมายเหตุสำคัญ

• Android 7.0 (API 24) ขึ้นไป ควรใช้ Html.fromHtml(text, Html.FROM_HTML_MODE_LEGACY)
• รองรับ CSS แบบจำกัด เช่น style="color:red;"
• สำหรับข้อความยาวหรือซับซ้อน ควรใช้ SpannableString แทน