Tampilan Tanpa Batas di Capacitor Tanpa Plugin

Tampilan Layar Tanpa Batas di Capacitor Tanpa Menggunakan Plugin

Apa itu Capacitor? Belajar cara mengkonfigurasi tampilan sisi kiri di aplikasi Capacitor Anda menggunakan opsi konfigurasi resmi adjustMarginsForEdgeToEdge - tidak perlu plugin atau trik.

Kredit Artikel

Martin Donadieu

Pengarang

Valeria

Pengulas

Jordan

Pengasuh

Mencoba Menerapkan Tampilan Edge-to-Edge di Aplikasi Capacitor Anda? Anda tidak perlu menggunakan trik, plugin, atau kerja sama. Capacitor memiliki dukungan resmi untuk layar edge-to-edge melalui adjustMarginsForEdgeToEdge Opsi konfigurasi - itu hanya tidak terdokumentasikan secara luas.

Many developers struggle with edge-to-edge layouts in Capacitor apps, especially when targeting Android 15+. They often resort to custom plugins or CSS hacks to achieve the modern edge-to-edge look. But there’s a better, native way.

Apa itu Layar Tanpa Batas?

Edge-to-edge display allows your app content to extend behind system bars (status bar and navigation bar), creating a more immersive, modern UI experience. Starting with Android 15, Google is pushing edge-to-edge as the standard for all apps.

Solusi Resmi: aturMarginUntukTampilanSisiSamping

Mengapa Capacitor menyediakan adjustMarginsForEdgeToEdge opsi konfigurasi khusus untuk tujuan ini. Ini terdokumentasi dalam panduan konfigurasi Capacitor resmi, tetapi mudah untuk melewatinya.

Bagaimana Cara Mengkonfigurasinya

Tambahkan ini ke capacitor.config.ts atau capacitor.config.json:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'My App',
  webDir: 'dist',
  android: {
    adjustMarginsForEdgeToEdge: 'auto' // or 'force' or 'disable'
  }
};

export default config;

Dalam format JSON:

{
  "appId": "com.example.app",
  "appName": "My App",
  "webDir": "dist",
  "android": {
    "adjustMarginsForEdgeToEdge": "auto"
  }
}

Opsi Konfigurasi

The adjustMarginsForEdgeToEdge option menerima tiga nilai:

1. `"auto"` (Recommended)

adjustMarginsForEdgeToEdge: 'auto'

Apa yang dilakukannya: Mengatur pengaturan otomatis untuk Android 15+ dan windowOptOutEdgeToEdgeEnforcement Mengatur margin secara cerdas berdasarkan perangkat dan pengaturan.

Terbaik untuk: Aplikasi produksi yang paling banyak ingin edge-to-edge pada perangkat yang didukung sambil menjaga konsistensi dengan Android versi lama.

2. `"force"`

adjustMarginsForEdgeToEdge: 'force'

Apa yang dilakukannya: Menggunakan penyesuaian margin secara paksa untuk edge-to-edge tanpa mempertimbangkan versi Android atau pengaturan lainnya.

Terbaik untuk: Aplikasi yang ingin memiliki perilaku edge-to-edge di semua versi Android yang didukung.

3. `"disable"`

adjustMarginsForEdgeToEdge: 'disable'

Apa yang dilakukannya: Mengaktifkan penyesuaian margin secara otomatis secara keseluruhan.

Terbaik untuk: Aplikasi yang mengatur tata letak tepi-tepi secara manual atau tidak ingin perilaku tepi-tepi.

Note: Saat ini "disable" adalah default, tetapi ini akan berubah menjadi "auto" di Capacitor 8.

Mengapa Ini Penting untuk Android 15+

Mulai dengan Android 15, Google memaksakan tampilan tepi-tepi sebagai perilaku default. Aplikasi yang tidak mengatasi tata letak tepi-tepi dengan benar mungkin mengalami masalah UI seperti:

Konten disembunyikan di balik bar sistem
Spasi dan padding yang tidak nyaman
Tampilan yang tidak konsisten di berbagai perangkat
Pengalaman pengguna yang buruk

Dengan menggunakan resmi adjustMarginsForEdgeToEdge Konfigurasi, Anda memastikan aplikasi Anda menangani perubahan-perubahan ini dengan benar tanpa kode code.

Contoh Lengkap

Contoh konfigurasi lengkap untuk aplikasi modern Capacitor berikut ini:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'My Awesome App',
  webDir: 'www',
  server: {
    androidScheme: 'https'
  },
  android: {
    // Enable edge-to-edge automatically on supported devices
    adjustMarginsForEdgeToEdge: 'auto',

    // Other Android config options...
    backgroundColor: '#ffffff'
  }
};

export default config;

Konsiderasi CSS

Menggunakan layar edge-to-edge, Anda mungkin perlu menambahkan beberapa CSS untuk mengatasi area aman:

/* Add padding for system bars */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Or use viewport-fit */
meta[name="viewport"] {
  content: "width=device-width, initial-scale=1, viewport-fit=cover";
}

Pengujian Konfigurasi Anda

Setelah mengonfigurasi adjustMarginsForEdgeToEdge, uji aplikasi Anda di:

Perangkat Android 15+ - Periksa bahwa konten dengan benar menghormati bar sistem
Versi Android yang lebih tua - Pastikan kembali kompatibilitas
Perbedaan Ukuran Layar Verifikasi tata letak bekerja di berbagai perangkat
Templat Cahaya dan Gelap - Tes mode tema kedua

Kesalahan Umum untuk Dihindari

Tidak Menggunakan Plugin untuk Ini

Kamu tidak memerlukan plugin pihak ketiga seperti capacitor-edge-to-edge atau serupa. Konfigurasi native mengatasi hal ini dengan baik. Jika Anda memerlukan kontrol yang lebih halus atas chrome sistem setelah mengaktifkan adjustMarginsForEdgeToEdge, @capgo/capacitor-bar navigasi dan @capgo/home-indicator menambahkan konfigurasi asli tanpa menggantinya

Jangan Campur dengan Implementasi Manual

Jika Anda menggunakan adjustMarginsForEdgeToEdge, hapus semua pengaturan manual pengaturan jendela atau trik CSS yang mungkin Anda tambahkan.

Jangan Lupa Pengaturan Area Aman CSS

Pengaturan konfigurasi mengatur penyesuaian margin, tetapi Anda masih perlu menggunakan pengaturan area aman CSS untuk penataan konten yang tepat.

Panduan Pemindahan

Jika Anda saat ini menggunakan plugin atau trik untuk edge-to-edge:

Hapus semua plugin edge-to-edge dari dependensi Anda
Tambahkan opsi konfigurasi ke dalam capacitor.config.ts
Membersihkan dan merekonstruksi projek Android Anda
Tes secara menyeluruh pada perangkat target

# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..

# Rebuild
npx cap copy android
npx cap open android

Future-Proofing

Ingatlah bahwa Capacitor 8 akan membuat "auto" nilai default. Untuk mempersiapkan:

Tes dengan "auto" saat ini untuk menangkap masalah-masalah sejak awal
Perbarui CSS Anda untuk menghandle area-area yang aman dengan benar
Ulas kembali tata letak Anda Pada perangkat dengan layar tepi ke tepi

Sumber Daya Tambahan

Kesimpulan

Tampilan layar tanpa batas di Capacitor tidak memerlukan plugin, trik, atau cara kerja yang rumit. adjustMarginsForEdgeToEdge Opsi konfigurasi ini menyediakan solusi asli yang bersih dan mendukung secara resmi serta tahan lama.

Mulai dengan "auto" for most apps, test thoroughly across devices, and add appropriate safe area CSS. Your app will be ready for Android 15 and beyond with minimal effort.

Masyarakat __CAPGO_KEEP_0__ dan Masyarakat komunitas Capacitor Dokumentasi resmi are great resources for additional help.

Teruskan dari Display Edge-to-Edge di Capacitor Tanpa Plugin

Jika Anda menggunakan Display Edge-to-Edge di Capacitor Tanpa Plugin untuk merencanakan perilaku media dan interface native, hubungkannya dengan Menggunakan @capgo/capacitor-aktivitas-hidup untuk kemampuan native di Menggunakan @capgo/capacitor-aktivitas-hidup, @capgo/capacitor-aktivitas-hidup untuk detail implementasi di @capgo/capacitor-aktivitas-hidup, Menggunakan @capgo/capacitor-player-video untuk kemampuan native di Menggunakan @capgo/capacitor-player-video, @capgo/capacitor-player video untuk detail implementasi di @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation untuk kemampuan asli di Menggunakan @capgo/capacitor-native-navigation.