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

วิธีเปลี่ยนสีข้อความของ Menu Item ใน Android ด้วย Kotlin

ภาพรวม

ตัวอย่างนี้สาธิตวิธีการเปลี่ยนสีข้อความและพื้นหลังของ Option Menu Item ใน Android โดยใช้ Theme/Style และ 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"
    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_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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Changing Option Menu Background and text Color"
        android:textAlignment="center"
        android:textColor="@android:color/holo_orange_dark"
        android:textSize="24sp"
        android:textStyle="bold" />
</RelativeLayout>

ขั้นตอนที่ 3: สร้างเมนู (res/menu/menu_items.xml)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/option_menu_item_1"
        android:orderInCategory="1"
        android:title="Menu 1"
        app:showAsAction="never" />
    <item
        android:id="@+id/option_menu_item_2"
        android:orderInCategory="2"
        android:title="Menu 2"
        app:showAsAction="never" />
    <item
        android:id="@+id/option_menu_item_3"
        android:orderInCategory="3"
        android:title="Menu 3"
        app:showAsAction="never" />
</menu>

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

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!-- เปลี่ยนสีพื้นหลัง Menu Item -->
        <item name="android:itemBackground">@color/skyBlue</item>
        <!-- เปลี่ยนสีข้อความ Menu Item -->
        <item name="android:textColor">#ff000f</item>
    </style>
</resources>

ขั้นตอนที่ 5: กำหนดสี (res/values/colors.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="skyBlue">#87CEEB</color>
</resources>

ขั้นตอนที่ 6: เขียนโค้ด MainActivity.kt

import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import androidx.appcompat.app.AppCompatActivity

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

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.menu_items, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            R.id.option_menu_item_1 -> true
            R.id.option_menu_item_2 -> true
            R.id.option_menu_item_3 -> true
            else -> super.onOptionsItemSelected(item)
        }
    }
}

ขั้นตอนที่ 7: ตั้งค่า AndroidManifest.xml

ใช้ Theme ที่สร้างไว้: android:theme="@style/AppTheme"

ทดสอบการทำงาน

รันแอป กดปุ่ม Menu (หรือ Overflow Menu) จะเห็น Menu Item สีข้อความแดง (#ff000f) พื้นหลังสีฟ้าอ่อน (#87CEEB)

ข้อมูลเพิ่มเติม

  • Theme Attributes: `android:itemBackground`, `android:textColor`, `android:textSize`, `android:itemTextAppearance`
  • Per-item Customization: ใช้ SpannableString ใน onPrepareOptionsMenu สำหรับเมนูเฉพาะรายการ
  • Toolbar/ActionBar: หากใช้ Toolbar แยก ให้ตั้ง Theme ให้ Toolbar แทน
  • Material Components: ใช้ `MaterialToolbar` และ `PopupMenu` สำหรับการปรับแต่งที่ทันสมัยกว่า