วิธีทำ Subscript และ Superscript ข้อความใน Android ด้วย Kotlin

จัดรูปแบบข้อความ Subscript และ Superscript

ตัวอย่างนี้สาธิตวิธีใช้ SpannableStringBuilder ร่วมกับ SubscriptSpan และ SuperscriptSpan เพื่อสร้างข้อความยกกำลัง (Superscript) และข้อความดัชนี (Subscript) ใน Android ด้วย Kotlin

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

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

ขั้นตอนที่ 2: เลย์เอาต์ (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"
    android:padding="8dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Tutorials Point"
        android:textAlignment="center"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="32sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:fontFamily="sans-serif-condensed"
        android:textAlignment="center"
        android:textColor="@android:color/background_dark"
        android:textSize="36sp"
        android:textStyle="bold" />

</RelativeLayout>

ขั้นตอนที่ 3: โค้ดจัดรูปแบบ (src/MainActivity.kt)

import android.os.Bundle
import android.text.SpannableStringBuilder
import android.text.Spanned
import android.text.style.RelativeSizeSpan
import android.text.style.SubscriptSpan
import android.text.style.SuperscriptSpan
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private lateinit var textView: TextView
    private lateinit var strText: String
    private lateinit var spannableStringBuilder: SpannableStringBuilder

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        
        textView = findViewById(R.id.textView)
        strText = "Test text to show SubscriptSpan X2 and SuperscriptSpan Y5 example."
        spannableStringBuilder = SpannableStringBuilder(strText)
        
        // Subscript สำหรับตัวเลข 2
        val subscriptSpan = SubscriptSpan()
        spannableStringBuilder.setSpan(
            subscriptSpan,
            strText.indexOf("2"),
            strText.indexOf("2") + "2".length,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        )
        
        // Superscript สำหรับตัวเลข 5
        val superscriptSpan = SuperscriptSpan()
        spannableStringBuilder.setSpan(
            superscriptSpan,
            strText.indexOf("5"),
            strText.indexOf("5") + "5".length,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        )
        
        // ปรับขนาดตัวอักษรให้เล็กลง
        showSmallSizeText("2")
        showSmallSizeText("5")
        
        textView.text = spannableStringBuilder
    }

    private fun showSmallSizeText(string: String) {
        val relativeSizeSpan = RelativeSizeSpan(0.5f)
        spannableStringBuilder.setSpan(
            relativeSizeSpan,
            strText.indexOf(string),
            strText.indexOf(string) + string.length,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        )
    }
}

ขั้นตอนที่ 4: Manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.q11">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Span อื่นๆ ที่น่าสนใจ

• StyleSpan - Bold, Italic
• ForegroundColorSpan - สีตัวอักษร
• BackgroundColorSpan - สีพื้นหลังตัวอักษร
• UnderlineSpan, StrikethroughSpan - ขีดเส้นใต้/ทับ
• ClickableSpan - ทำให้ข้อความกดได้
• ImageSpan - ใส่รูปภาพในข้อความ