Mencoba untuk menerapkan tampilan sisi kiri kanan di aplikasi Capacitor Anda? Anda tidak memerlukan trik, plugin, atau kerja sekitar. Capacitor memiliki dukungan resmi untuk tampilan sisi kiri kanan melalui adjustMarginsForEdgeToEdge Opsi konfigurasi - itu hanya tidak luas dokumentasinya.
Banyak pengembang kesulitan dengan tata letak edge-to-edge di aplikasi Capacitor, terutama ketika menargetkan Android 15+. Mereka sering menggunakan plugin atau trik CSS khusus untuk mencapai tampilan modern edge-to-edge. Tapi ada cara yang lebih baik, native.
Apa itu Display Edge-to-Edge?
Tampilan edge-to-edge memungkinkan konten aplikasi Anda untuk meluas di balik bar sistem (bar status dan bar navigasi), menciptakan pengalaman UI yang lebih imersif dan modern. Mulai dengan Android 15, Google mendorong edge-to-edge sebagai standar untuk semua aplikasi.
Solusi Resmi: aturMarginForEdgeToEdge
Capacitor menyediakan opsi konfigurasi khusus untuk tujuan ini. Ini terdokumentasi dalam dokumentasi konfigurasi Capacitor resmi adjustMarginsForEdgeToEdge tetapi mudah untuk melewatkan. official Capacitor config documentationTambahkan ini ke file
atau
__CAPGO_KEEP_0__ capacitor.config.ts __CAPGO_KEEP_0__ 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"
}
}Pilihan Konfigurasi
The adjustMarginsForEdgeToEdge Pilihan ini menerima tiga nilai:
1. "auto" (Dianjurkan)
adjustMarginsForEdgeToEdge: 'auto'Apa yang dilakukan: Mengatur secara otomatis untuk Android 15+ dan pengaturan. windowOptOutEdgeToEdgeEnforcement Menyesuaikan margin 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 memperhatikan 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 menghandle layout edge-to-edge secara manual atau tidak ingin perilaku edge-to-edge.
Catatan: Saat ini "disable" adalah default, tetapi ini akan berubah menjadi "auto" dalam Capgo Capacitor 8.
Mengapa Ini Penting untuk Android 15+
Mulai dengan Android 15, Google memaksa perilaku layar edge-to-edge sebagai perilaku default. Aplikasi yang tidak menghandle layout edge-to-edge dengan benar mungkin mengalami masalah UI seperti:
- Isi yang disembunyikan di balik bar-bar sistem
- Penyisipan yang tidak nyaman dan padding
- Tampilan yang tidak konsisten di perangkat-perangkat
- Pengalaman pengguna yang buruk
Dengan menggunakan versi resmi adjustMarginsForEdgeToEdge konfigurasi, Anda memastikan aplikasi Anda mengatasi perubahan-perubahan ini dengan benar tanpa code yang diatur sendiri.
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;Pertimbangan CSS
Ketika menggunakan tampilan tanpa batas, Anda mungkin perlu menambahkan beberapa CSS untuk mengatasi area-area yang 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";
}Tes Konfigurasi Anda
Setelah mengonfigurasi adjustMarginsForEdgeToEdgeTes aplikasi Anda pada:
- Ponsel Android versi 15 ke atas - Pastikan konten dengan benar menghormati bar sistem
- Ponsel Android versi lebih lama - Pastikan kembali kompatibilitas
- Ukuran layar yang berbeda - Verifikasi bahwa tata letak bekerja di perangkat yang berbeda
- Mode tema terang dan gelap - Tes kedua mode tema
Kesalahan Umum untuk Dihindari
Tidak Gunakan Plugin untuk Ini
Anda tidak memerlukan plugin pihak ketiga seperti capacitor-edge-to-edge atau serupa. Konfigurasi asli mengatasi hal ini dengan bersih. Jika Anda memerlukan kontrol halus atas chrome sistem setelah mengaktifkan adjustMarginsForEdgeToEdge, @capgo/capacitor-bar-navigasi dan @capgo/indikator-rumah menambahkan konfigurasi asli tanpa menggantikannya.
Tidak Campurkan dengan Implementasi Manual
Jika Anda menggunakan adjustMarginsForEdgeToEdge, hapus pengaturan manual insets jendela atau hack CSS yang telah Anda tambahkan.
Tidak Lupa CSS Area Aman
Konfigurasi mengatasi 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 hack untuk edge-to-edge:
- Hapus plugin edge-to-edge dari ketergantungan Anda dari ketergantungan Anda
- Tambahkan opsi konfigurasi ke
capacitor.config.ts - Bersihkan dan bangun kembali projek Android Anda
- Test 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 androidMengantisipasi Masa Depan
Ingatlah bahwa Capacitor 8 akan membuat nilai default. Untuk mempersiapkan: "auto" Test dengan
- perangkat target
"auto"Sekarang untuk menangkap masalah-masalah yang mungkin terjadi sejak awal - 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 kerja sekitar yang rumit. The adjustMarginsForEdgeToEdge Opsi konfigurasi menyediakan solusi yang bersih dan asli yang mendapat dukungan resmi dan tahan lama.
Mulai dengan "auto" untuk aplikasi kebanyakan, tes secara menyeluruh di berbagai perangkat, dan tambahkan CSS area yang aman. Aplikasi Anda akan siap untuk Android 15 dan ke depannya dengan sedikit usaha.
Pertanyaan atau mengalami masalah? Komunitas dan dokumentasi resmi Capacitor adalah sumber daya yang bagus untuk bantuan tambahan. Teruskan dari Display Edge-to-Edge di __CAPGO_KEEP_0__ Tanpa Plugin
Keep going from Edge-to-Edge Display in Capacitor Without Plugins
Display Edge-to-Edge di __CAPGO_KEEP_0__ Tanpa Plugin Edge-to-Edge Display in Capacitor Without Plugins Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities Menggunakan @capgo/capacitor-live-activities For kemampuan asli dalam Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities For detail implementasi dalam @capgo/capacitor-live-activities, Menggunakan @capgo/capacitor-video-player For kemampuan asli dalam Menggunakan @capgo/capacitor-video-player, @capgo/capacitor-video-player For detail implementasi dalam @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation For kemampuan asli dalam Menggunakan @capgo/capacitor-native-navigation.
