วิธีตั้งค่าสีตัวอักษรบางส่วนใน TextView (SpannableString) Android

ภาพรวม

ตัวอย่างนี้สาธิตวิธีการตั้งค่าสีตัวอักษรเฉพาะส่วน (Span) ใน TextView โดยใช้ SpannableString และ ForegroundColorSpan

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

เปิด Android Studio → File → New Project → กรอกรายละเอียดที่จำเป็น

ขั้นตอนที่ 2: จัดทำ Layout (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:textSize="16sp"
        android:padding="12sp"
        android:textStyle="bold|italic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

</RelativeLayout>

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

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.style.ForegroundColorSpan;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    TextView textView;

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

        textView = findViewById(R.id.textView);

        String text = "I appreciate the prayer but I've already got God on my side";
        SpannableString spannableString = new SpannableString(text);

        // สร้าง Span สีต่างๆ
        ForegroundColorSpan cyanSpan = new ForegroundColorSpan(Color.CYAN);
        ForegroundColorSpan blueSpan = new ForegroundColorSpan(Color.BLUE);
        ForegroundColorSpan greenSpan = new ForegroundColorSpan(Color.GREEN);

        // ตั้งค่าสีแต่ละช่วง (start, end, flags)
        // "appreciate" ตำแหน่ง 3-14
        spannableString.setSpan(cyanSpan, 3, 15, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        // "prayer but" ตำแหน่ง 22-31
        spannableString.setSpan(blueSpan, 22, 31, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        // "God on my" ตำแหน่ง 38-48
        spannableString.setSpan(greenSpan, 38, 49, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

        textView.setText(spannableString);
    }
}

ขั้นตอนที่ 4: กำหนดค่า AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <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>

Spannable Flags อธิบาย

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

• StyleSpan(Typeface.BOLD) - ตัวหนา
• StyleSpan(Typeface.ITALIC) - ตัวเอียง
• UnderlineSpan() - ขีดเส้นใต้
• StrikethroughSpan() - ขีดทับ
• RelativeSizeSpan(1.5f) - ปรับขนาด (1.5 เท่า)
• BackgroundColorSpan(Color.YELLOW) - สีพื้นหลัง (Highlight)
• ClickableSpan() - ทำให้คลิกได้ (ต้อง setMovementMethod)
• ImageSpan() - ใส่รูปภาพในข้อความ

การทดสอบ

รันแอปบนอุปกรณ์จริง จะแสดงข้อความที่มีสีหลายสีใน TextView เดียว