Tampilan Layar Tanpa Batas di Capacitor Tanpa Plugin

Mencoba untuk menerapkan tampilan sisi-sisi tanpa plugin di aplikasi Capacitor Anda? Anda tidak memerlukan trik, plugin, atau kerja sekitar. Capacitor memiliki dukungan resmi untuk tampilan sisi-sisi melalui adjustMarginsForEdgeToEdge opsi konfigurasi - itu tidak terlalu luas dokumentasi.

Banyak pengembang kesulitan dengan tata letak sisi-sisi di aplikasi Capacitor, terutama ketika mengincar Android 15+. Mereka sering kali bergantung pada plugin atau CSS yang khusus untuk mencapai tampilan modern sisi-sisi.

Apa itu Tampilan Sisi-Sisi?

Tampilan sisi-sisi memungkinkan konten aplikasi Anda untuk memanjang di balik bar sistem (bar status dan bar navigasi), menciptakan pengalaman UI yang lebih imersif dan modern.

Solusi Resmi: adjustMarginsForEdgeToEdge

Capacitor menyediakan adjustMarginsForEdgeToEdge opsi konfigurasi khusus untuk tujuan ini. Ini terdokumentasi dalam dokumentasi konfigurasi Capacitor resmitetapi mudah dilupakan.

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;

Atau dalam format JSON:

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

Opsi Konfigurasi

The adjustMarginsForEdgeToEdge opsi ini menerima tiga nilai:

1. `"auto"` (Dianjurkan)

adjustMarginsForEdgeToEdge: 'auto'

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

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

2. `"force"`

adjustMarginsForEdgeToEdge: 'force'

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

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

3. `"disable"`

adjustMarginsForEdgeToEdge: 'disable'

Apa yang dilakukan: Menghapus penyesuaian margin otomatis sepenuhnya.

Terbaik untuk: Aplikasi yang mengelola tata letak edge-to-edge secara manual atau tidak ingin perilaku edge-to-edge.

Perlu diingat: 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 menerapkan tampilan edge-to-edge sebagai perilaku default. Aplikasi yang tidak menghandle layout edge-to-edge dengan benar mungkin mengalami masalah UI seperti:

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

Dengan menggunakan konfigurasi resmi adjustMarginsForEdgeToEdge Anda memastikan aplikasi Anda menghandle perubahan ini dengan benar tanpa custom code.

Contoh Lengkap

Berikut adalah contoh konfigurasi lengkap untuk aplikasi modern Capacitor:

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

Ketika menggunakan layar tanpa batas, 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";
}

Menguji Konfigurasi Anda

Setelah mengonfigurasi adjustMarginsForEdgeToEdge, uji aplikasi Anda di:

Perangkat Android 15+ - Pastikan konten dengan benar menghormati bar sistem
Versi Android yang lebih tua - Pastikan kembali kompatibilitas
Ukuran layar yang berbeda - Verifikasi bahwa tata letak bekerja di perangkat yang berbeda
Suhu dan tema gelap - Uji keduanya tema mode

Kesalahan Umum untuk Dihindari

Jangan Gunakan Plugin untuk Ini

Anda tidak memerlukan plugin pihak ketiga seperti capacitor-edge-to-edge atau yang serupa. Konfigurasi asli mengatasi hal ini dengan bersih. Jika Anda memerlukan kontrol halus atas sistem chrome setelah mengaktifkan adjustMarginsForEdgeToEdge, @capgo/capacitor-bar Pelayaran dan @capgo/Indikator Home menambahkan konfigurasi asli tanpa menggantikannya.

Jangan Campur dengan Implementasi Manual

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

Jangan Lupa CSS Area Aman

Konfigurasi mengatur penyesuaian margin, tetapi Anda masih perlu menggunakan CSS insets area aman untuk padding konten yang tepat.

Petunjuk Pindah

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

Hapus plugin edge-to-edge dari dependensi Anda
Tambahkan opsi konfigurasi ke capacitor.config.ts
Bersihkan dan bangun kembali projek Android Anda
Uji 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

Mengantisipasi Masa Depan

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

Test dengan "auto" saat ini untuk menangkap masalah-masalah sebelumnya
Perbarui CSS Anda untuk menghandle area-area yang aman dengan benar
Tinjau tata letak Anda pada perangkat yang diaktifkan edge-to-edge

Sumber Daya Tambahan

Kesimpulan

Tampilan Edge-to-edge di Capacitor tidak memerlukan plugin, trik, atau cara kerja yang rumit. Opsi pengaturan memberikan solusi yang bersih dan asli yang mendapat dukungan resmi dan tahan lama. adjustMarginsForEdgeToEdge Mulai dengan

untuk aplikasi kebanyakan, tes secara menyeluruh di berbagai perangkat, dan tambahkan CSS area aman yang sesuai. Aplikasi Anda akan siap untuk Android 15 dan ke depannya dengan usaha yang minimal. "auto" Pertanyaan atau mengalami masalah?

Masyarakat dan dokumentasi resmi __CAPGO_KEEP_0__ merupakan sumber tambahan yang bagus untuk bantuan tambahan. Teruskan dari Tampilan Edge-to-Edge di Capacitor Tanpa Plugin Android Edge-to-Edge Pedoman CSS Area Aman Margin

Keep going from Edge-to-Edge Display in Capacitor Without Plugins

If Anda menggunakan Jangan Gunakan Edge-to-Edge Display tanpa Plugin Capacitor untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan Menggunakan @capgo/capacitor-live-activities untuk kemampuan native di Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities untuk detail implementasi di @capgo/capacitor-live-activities, Menggunakan @capgo/capacitor-video-player untuk kemampuan native di Menggunakan @capgo/capacitor-video-player, @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation untuk kemampuan asli di Menggunakan @capgo/capacitor-native-navigation.

Tampilan Sisi Penuh di Capacitor Tanpa Plugin