Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Android

วิธีเปลี่ยน Style ของ TextView ระหว่างรันโปรแกรม (Runtime) ใน Android

ภาพรวม

ตัวอย่างนี้แสดงวิธีเปลี่ยน Style ของ TextView ขณะรันโปรแกรม โดยใช้ setTextAppearance() และ Resource Style/Color

ขั้นตอนที่ 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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Have a nice day!"
        android:textSize="36sp"/>

</RelativeLayout>

ขั้นตอนที่ 3: กำหนด Style (res/values/styles.xml)

<resources>
    <style name="boldText">
        <item name="android:textStyle">bold|italic</item>
        <item name="android:textColor">#FFFFFF</item>
    </style>

    <style name="normalText">
        <item name="android:textStyle">normal</item>
        <item name="android:textColor">#C0C0C0</item>
    </style>
</resources>

ขั้นตอนที่ 4: กำหนด Color (res/values/strings.xml)

<resources>
    <string name="app_name">Sample</string>
    <color name="highlightedTextViewColor">#000088</color>
    <color name="normalTextViewColor">#000044</color>
</resources>

ขั้นตอนที่ 5: โค้ดหลัก (src/MainActivity.java)

import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
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);

        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // API 23+ ใช้ ResId โดยตรง, เก่ากว่าใช้ Context + ResId
                if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) {
                    textView.setTextAppearance(getApplicationContext(), R.style.boldText);
                } else {
                    textView.setTextAppearance(R.style.boldText);
                }
                textView.setBackgroundResource(R.color.highlightedTextViewColor);
            }
        });
    }
}

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

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

การทดสอบ

รันแอป คลิกที่ข้อความ - จะเปลี่ยนเป็น Bold+Italic สีขาว พื้นหลังสีน้ำเงินเข้ม

วิธีอื่นๆ สำหรับการเปลี่ยน Style แบบ Dynamic

1. ใช้ setTypeface() และ setTextColor() โดยตรง

textView.setTypeface(null, Typeface.BOLD_ITALIC);
textView.setTextColor(Color.WHITE);
textView.setBackgroundColor(Color.parseColor("#000088"));

2. ใช้ HTML (จาก API 24+)

textView.setText(Html.fromHtml("<b><i>Bold Italic</i></b>", Html.FROM_HTML_MODE_LEGACY));

3. ใช้ SpannableString (ยืดหยุ่นที่สุด)

SpannableString spannable = new SpannableString("Have a nice day!");
spannable.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), 0, spannable.length(), 0);
spannable.setSpan(new ForegroundColorSpan(Color.WHITE), 0, spannable.length(), 0);
spannable.setSpan(new BackgroundColorSpan(Color.parseColor("#000088")), 0, spannable.length(), 0);
textView.setText(spannable);

4. Material Components: TextAppearance

// ใน styles.xml
<style name="CustomTextAppearance" parent="TextAppearance.MaterialComponents.Headline6">
    <item name="android:textStyle">bold|italic</item>
    <item name="android:textColor">@color/white</item>
</style>

// ใช้งาน
TextViewCompat.setTextAppearance(textView, R.style.CustomTextAppearance);

ข้อควรระวัง

  • setTextAppearance() จะ Override Attribute ทั้งหมดใน Style รวมถึง textSize - อาจทำให้ขนาดเปลี่ยนไป
  • Spannable ให้ควบคุมได้ละเอียดที่สุด (บางส่วนของข้อความ)
  • API 23+ ใช้ ResId โดยตรง ไม่ต้องส่ง Context