Menyembunyikan kolom sistem untuk mode imersif

Beberapa konten paling nyaman dinikmati dalam layar penuh tanpa indikator apa pun di layar bilah status atau bilah navigasi. Beberapa contohnya adalah video, game, gambar galeri, buku, dan {i>slide<i} presentasi. Hal ini disebut sebagai mode imersif. Halaman ini menunjukkan cara melibatkan pengguna lebih mendalam dengan konten dalam layar penuh.

Gambar 1. Contoh mode imersif.

Mode imersif membantu pengguna menghindari keluar yang tidak disengaja selama bermain game dan memberikan pengalaman imersif untuk menikmati gambar, video, dan buku. Namun, perhatikan seberapa sering pengguna masuk dan keluar aplikasi untuk memeriksa notifikasi, untuk melakukan penelusuran mendadak, atau melakukan tindakan lain. Karena mode imersif menyebabkan pengguna kehilangan akses mudah ke navigasi sistem, hanya menggunakan mode imersif ketika manfaat bagi pengalaman pengguna lebih dari sekadar menggunakan layar tambahan spasi.

Gunakan WindowInsetsControllerCompat.hide() untuk menyembunyikan kolom sistem dan WindowInsetsControllerCompat.show() untuk membawa mereka kembali.

Cuplikan berikut menunjukkan contoh konfigurasi tombol untuk disembunyikan dan ditampilkan bilah sistem.

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    ...

    val windowInsetsController =
        WindowCompat.getInsetsController(window, window.decorView)
    // Configure the behavior of the hidden system bars.
    windowInsetsController.systemBarsBehavior =
        WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE

    // Add a listener to update the behavior of the toggle fullscreen button when
    // the system bars are hidden or revealed.
    ViewCompat.setOnApplyWindowInsetsListener(window.decorView) { view, windowInsets ->
        // You can hide the caption bar even when the other system bars are visible.
        // To account for this, explicitly check the visibility of navigationBars()
        // and statusBars() rather than checking the visibility of systemBars().
        if (windowInsets.isVisible(WindowInsetsCompat.Type.navigationBars())
            || windowInsets.isVisible(WindowInsetsCompat.Type.statusBars())) {
            binding.toggleFullscreenButton.setOnClickListener {
                // Hide both the status bar and the navigation bar.
                windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())
            }
        } else {
            binding.toggleFullscreenButton.setOnClickListener {
                // Show both the status bar and the navigation bar.
                windowInsetsController.show(WindowInsetsCompat.Type.systemBars())
            }
        }
        ViewCompat.onApplyWindowInsets(view, windowInsets)
    }
}

Java

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    WindowInsetsControllerCompat windowInsetsController =
            WindowCompat.getInsetsController(getWindow(), getWindow().getDecorView());
    // Configure the behavior of the hidden system bars.
    windowInsetsController.setSystemBarsBehavior(
            WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
    );

    // Add a listener to update the behavior of the toggle fullscreen button when
    // the system bars are hidden or revealed.
    ViewCompat.setOnApplyWindowInsetsListener(
        getWindow().getDecorView(),
        (view, windowInsets) -> {
        // You can hide the caption bar even when the other system bars are visible.
        // To account for this, explicitly check the visibility of navigationBars()
        // and statusBars() rather than checking the visibility of systemBars().
        if (windowInsets.isVisible(WindowInsetsCompat.Type.navigationBars())
                || windowInsets.isVisible(WindowInsetsCompat.Type.statusBars())) {
            binding.toggleFullscreenButton.setOnClickListener(v -> {
                // Hide both the status bar and the navigation bar.
                windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());
            });
        } else {
            binding.toggleFullscreenButton.setOnClickListener(v -> {
                // Show both the status bar and the navigation bar.
                windowInsetsController.show(WindowInsetsCompat.Type.systemBars());
            });
        }
        return ViewCompat.onApplyWindowInsets(view, windowInsets);
    });
}

Secara opsional, Anda dapat menentukan jenis panel sistem yang akan disembunyikan dan menentukan perilakunya saat pengguna berinteraksi dengannya.

Menentukan kolom sistem yang akan disembunyikan

Untuk menentukan jenis kolom sistem yang akan disembunyikan, teruskan salah satu parameter berikut ke WindowInsetsControllerCompat.hide().

Menentukan perilaku kolom sistem tersembunyi

Gunakan WindowInsetsControllerCompat.setSystemBarsBehavior() untuk menentukan perilaku panel sistem tersembunyi saat pengguna berinteraksi dengannya.