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

วิธีจัดการคลิกบนไอคอน Toolbar/Action Bar ใน Android

ภาพรวม

บทความนี้สาธิตวิธีจัดการ Event เมื่อคลิกไอคอน (Home/Up/Action Icons) ใน Toolbar หรือ Action Bar

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

Android Studio → File → New Project → Empty Activity

ขั้นตอนที่ 2: Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="30sp"
        android:gravity="center" />

</LinearLayout>

ขั้นตอนที่ 3: เมนู (res/menu/toolbar_menu.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/action_settings"
        android:title="Settings"
        android:icon="@android:drawable/ic_menu_preferences"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_search"
        android:title="Search"
        android:icon="@android:drawable/ic_menu_search"
        app:showAsAction="ifRoom|collapseActionView"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

</menu>

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

package com.example.myapplication;

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

public class MainActivity extends AppCompatActivity {

    private TextView textView;

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

        textView = findViewById(R.id.text);

        if (getSupportActionBar() != null) {
            getSupportActionBar().setTitle("หน้าหลัก");
            getSupportActionBar().setSubtitle("ยินดีต้อนรับ");
            getSupportActionBar().setDisplayHomeAsUpEnabled(true); // ปุ่ม Up
            getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_custom_back); // ไอคอนกำหนดเอง (optional)
        }

        textView.setText("กดไอคอนใน Toolbar เพื่อทดสอบ");
    }

    // สร้าง Menu
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_menu, menu);
        return true;
    }

    // จัดการคลิก Menu Items และ Home/Up
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

        if (id == android.R.id.home) {
            // ปุ่ม Up/Home ใน Toolbar
            onBackPressed();
            return true;
        } else if (id == R.id.action_settings) {
            textView.setText("กด Settings");
            return true;
        } else if (id == R.id.action_search) {
            textView.setText("กด Search");
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

ใช้ Toolbar โดยตรง (ยืดหยุ่นกว่า)

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

toolbar.setNavigationOnClickListener(v -> {
    // คลิกปุ่ม Navigation (ลูกศร/ไอคอนซ้าย)
    onBackPressed();
});

toolbar.setOnMenuItemClickListener(item -> {
    // คลิก Action Icons (ขวา)
    return onOptionsItemSelected(item);
});

กำหนดไอคอน Home/Up แบบกำหนดเอง

// ใน onCreate
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_custom_back);
// หรือ
toolbar.setNavigationIcon(R.drawable.ic_custom_back);

ทดสอบ

รันแอป → จะเห็นปุ่มลูกศรซ้าย และไอคอน Settings/Search ขวา → กดแต่ละอย่างดู Event