ภาพรวม
ตัวอย่างนี้สาธิตวิธีการทำให้ข้อความบางส่วนใน TextView เป็นตัวหนา (Bold) โดยใช้ SpannableString และ StyleSpan ใน Android ด้วย Kotlin
ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่
สร้างโปรเจกต์ Android ใหม่ใน Android Studio
ขั้นตอนที่ 2: จัดรูปแบบหน้าจอหลัก (activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="70dp"
android:background="#008080"
android:padding="5dp"
android:text="TutorialsPoint"
android:textColor="#fff"
android:textSize="24sp"
android:textStyle="bold" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:textAlignment="center"
android:textColor="@android:color/holo_green_dark"
android:textSize="36sp" />
</RelativeLayout>
ขั้นตอนที่ 3: เขียนโค้ด MainActivity.kt
import android.graphics.Typeface
import android.os.Bundle
import android.text.SpannableString
import android.text.Spanned
import android.text.style.StyleSpan
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
title = "KotlinApp"
val textView = findViewById<TextView>(R.id.textView)
val text = "My favourite food is Biriyani"
val spannableString = SpannableString(text)
val boldSpan = StyleSpan(Typeface.BOLD)
// ตำแหน่งเริ่มต้น 21, สิ้นสุด 29 (คำว่า "Biriyani")
spannableString.setSpan(boldSpan, 21, 29, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
textView.text = spannableString
}
}
ขั้นตอนที่ 4: ตั้งค่า AndroidManifest.xml
ใช้การตั้งค่ามาตรฐาน
ทดสอบการทำงาน
รันแอป ข้อความ "My favourite food is Biriyani" จะแสดงคำว่า "Biriyani" เป็นตัวหนา
Span อื่นๆ ที่น่าสนใจ
| Span Class | ผลลัพธ์ |
|---|---|
StyleSpan(Typeface.BOLD) | ตัวหนา |
StyleSpan(Typeface.ITALIC) | ตัวเอียง |
StyleSpan(Typeface.BOLD_ITALIC) | ตัวหนาเอียง |
ForegroundColorSpan(Color.RED) | สีข้อความ |
BackgroundColorSpan(Color.YELLOW) | สีพื้นหลังข้อความ |
UnderlineSpan() | ขีดเส้นใต้ |
StrikethroughSpan() | ขีดทับ |
RelativeSizeSpan(1.5f) | ปรับขนาดสัมพัทธ์ (1.5 เท่า) |
ClickableSpan | ทำให้ส่วนของข้อความกดได้ |
ImageSpan | แทรกรูปภาพในข้อความ |
สามารถรวมหลาย Span ได้ใน SpannableString เดียวกัน