วิธีสร้างหลายสไตล์ใน TextView เดียวใน Android ด้วย Kotlin

บทนำ

ตัวอย่างนี้สาธิตการใช้ HTML tags ภายใน TextView เพื่อสร้างหลายสไตล์ (ตัวหนา, ตัวเอียง, ขนาดเล็ก, สีตัวอักษร) ในข้อความเดียวกันบน Android โดยใช้ Kotlin

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

สร้างโปรเจกต์ใหม่ใน Android Studio

ขั้นตอนที่ 2: Layout (activity_main.xml)

เพิ่มโค้ดใน 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/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="150dp"
        android:padding="4dp"
        android:textAlignment="center"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView"
        android:layout_marginTop="70dp"
        android:padding="4dp"
        android:textAlignment="center"
        android:textSize="16sp" />

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

</RelativeLayout>

ขั้นตอนที่ 3: MainActivity.kt

เพิ่มโค้ดใน src/MainActivity.kt:

import android.os.Bundle
import android.text.Html
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

@Suppress("DEPRECATION")
class MainActivity : AppCompatActivity() {
    private lateinit var textView: TextView
    private lateinit var textView2: TextView
    lateinit var textView3: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"

        textView = findViewById(R.id.textView)
        textView2 = findViewById(R.id.textView2)
        textView3 = findViewById(R.id.textView3)

        // วิธี 1: เขียน HTML ตรงๆ ในโค้ด
        textView.text = Html.fromHtml(
            "Multiple style inside android textView: bold text: " +
            "bold text, italic text: italic text, small font: small text, " +
            "font color: Text Color, " +
            "font color with bold text: Bold with font color"
        )

        // วิธี 2: ใช้ตัวแปรชั่วคราว
        val text = Html.fromHtml(
            "Multiple style inside android textView: bold text: " +
            "bold text, italic text: italic text, small font: small text, " +
            "font color: Text Color, " +
            "font color with bold text: Bold with font color"
        )
        textView2.text = text

        // วิธี 3: อ่านจาก strings.xml (แนะนำสำหรับข้อความจริง)
        textView3.text = Html.fromHtml(getString(R.string.textStyle))
    }
}

ขั้นตอนที่ 4: Strings.xml

เพิ่มใน res/values/strings.xml:

<resources>
    <string name="textStyle"><![CDATA[
        Multiple style inside android textView: bold text: bold text, italicText text: italic text, small font: small text,
        font color: Text Color, font color with bold text: Bold with font color
    ]]></string>
</resources>

ขั้นตอนที่ 5: AndroidManifest.xml

ตรวจสอบการประกาศ Activity

การทดสอบ

รันแอป จะเห็น TextView 3 อัน แสดงข้อความพร้อมสไตล์หลากหลาย (ตัวหนา, ตัวเอียง, ขนาดเล็ก, สี)

หมายเหตุ: Html.fromHtml() รองรับ HTML tags จำกัด (b, i, u, small, font, br, v.v.) สำหรับการจัดรูปแบบซับซ้อนควรใช้ SpannableString แทน