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

วิธีซ่อน Navigation Bar (แถบปุ่มด้านล่าง) ใน Android

ภาพรวม

บทความนี้สาธิตวิธีซ่อน Navigation Bar (แถบปุ่ม Home/Back/Recent) เพื่อให้แอปแสดงเต็มหน้าจอ (Immersive Mode)

ขั้นตอนที่ 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:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#000"
    tools:context=".MainActivity">

    <DigitalClock
        android:id="@+id/digital"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:textColor="#FFF" />

</LinearLayout>

ใช้ DigitalClock แสดงเวลาเพื่อทดสอบโหมดเต็มหน้าจอ

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

package com.example.myapplication;

import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

        // ซ่อน Action Bar
        if (getSupportActionBar() != null) {
            getSupportActionBar().hide();
        }

        // โหมดเต็มหน้าจอ (Immersive Mode)
        hideNavigationBar();
    }

    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    private void hideNavigationBar() {
        View decorView = getWindow().getDecorView();
        int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_FULLSCREEN
                | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
        decorView.setSystemUiVisibility(uiOptions);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            hideNavigationBar();
        }
    }
}

คำอธิบาย Flag สำคัญ

  • SYSTEM_UI_FLAG_HIDE_NAVIGATION - ซ่อน Navigation Bar
  • SYSTEM_UI_FLAG_FULLSCREEN - ซ่อน Status Bar
  • SYSTEM_UI_FLAG_IMMERSIVE_STICKY - ทำให้แถบปุ่มซ่อนอยู่ได้นานขึ้น แตะจอถึงจะโผล่ชั่วคราว
  • SYSTEM_UI_FLAG_LAYOUT_* - ให้ Layout ขยายเต็มพื้นที่ใต้แถบระบบ

วิธีสมัยใหม่ (Android 11+ / API 30+)

// ใช้ WindowInsetsController แทน (Deprecated flags)
WindowInsetsController controller = getWindow().getInsetsController();
if (controller != null) {
    controller.hide(WindowInsets.Type.navigationBars() | WindowInsets.Type.statusBars());
    controller.setSystemBarsBehavior(WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE);
}

ทดสอบ

รันบนอุปกรณ์จริง จะเห็นแอปเต็มหน้าจอ ไม่มีแถบปุ่มด้านล่างและแถบสถานะด้านบน