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

วิธีเพิ่ม Action Icon (Logo) ใน Action Bar บน Android

ภาพรวม

บทความนี้สาธิตวิธีเพิ่มไอคอน/โลโก้ใน Action Bar (ToolBar) และตั้งค่า Title, Subtitle, Home Button

ขั้นตอนที่ 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: เตรียมไอคอน

วางไฟล์รูปภาพ (เช่น logo.png) ใน res/drawable/ หรือใช้ Vector Asset (New → Vector Asset)

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

package com.example.myapplication;

import android.os.Bundle;
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);

        // ตั้งค่า Action Bar
        if (getSupportActionBar() != null) {
            getSupportActionBar().setTitle("หน้าหลัก");
            getSupportActionBar().setSubtitle("ยินดีต้อนรับ");
            getSupportActionBar().setDisplayShowHomeEnabled(true);
            getSupportActionBar().setDisplayUseLogoEnabled(true);
            getSupportActionBar().setLogo(R.drawable.logo); // ใส่ logo ที่นี่
            getSupportActionBar().setDisplayHomeAsUpEnabled(true); // ปุ่มย้อนกลับ
        }

        textView.setText("Action Bar พร้อม Logo แล้ว");
    }

    // จัดการคลิกปุ่ม Home/Up
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            finish(); // ปิด Activity
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

การตั้งค่าสำคัญ

ใช้ Toolbar แทน (แนะนำสำหรับแอปสมัยใหม่)

ใน Layout:

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:title="หน้าหลัก"
    app:subtitle="ยินดีต้อนรับ"
    app:logo="@drawable/logo" />

ใน Activity:

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
if (getSupportActionBar() != null) {
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}

ทดสอบ

รันแอป จะเห็น Action Bar มี Logo ด้านซ้าย Title และ Subtitle กลาง และปุ่มย้อนกลับ

เมธอดหน้าที่
setDisplayShowHomeEnabled(true)แสดง Home/Logo area
setDisplayUseLogoEnabled(true)ใช้ Logo แทน Icon ปกติ
setLogo(R.drawable.logo)กำหนด Drawable ของ Logo
setDisplayHomeAsUpEnabled(true)แสดงปุ่มลูกศรย้อนกลับ (Up button)