Tampilan Layar Sentuh dari Ujung ke Ujung di Capacitor Tanpa Plugin

Mencoba untuk menerapkan tampilan penuh layar di aplikasi Capacitor Anda? Anda tidak perlu trik, plugin, atau kerja sama. Capacitor memiliki dukungan resmi untuk tampilan penuh layar melalui adjustMarginsForEdgeToEdge Opsi konfigurasi - itu tidak terlalu dokumentasi luas.

Banyak pengembang kesulitan dengan tata letak sisi ke sisi di aplikasi Capacitor, terutama ketika mengarahkan Android 15+. Mereka sering menggunakan plugin khusus atau trik CSS untuk mencapai tampilan sisi ke sisi modern. Tapi ada cara yang lebih baik, native.

Apa itu Display Sisi ke Sisi?

Tampilan sisi ke sisi 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 sisi ke sisi sebagai standar untuk semua aplikasi.

Solusi Resmi: aturMarginForEdgeToEdge

Capacitor menyediakan opsi konfigurasi khusus untuk tujuan ini. Ini terdokumentasi dalam dokumentasi konfigurasi Capacitor resmi adjustMarginsForEdgeToEdge Namun, itu mudah untuk terlewat. official Capacitor config documentationTambahkan ini ke file

atau

__CAPGO_KEEP_0__ capacitor.config.ts dokumentasi konfigurasi resmi 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

Hal ini 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 cerdas berdasarkan perangkat dan konfigurasi.

Terbaik untuk: Aplikasi produksi yang paling banyak ingin edge-to-edge di 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.

Perlu diingat: Saat ini "disable" merupakan default, tetapi ini akan berubah menjadi "auto" dalam Capacitor 8.

Mengapa Ini Penting untuk Android 15+

Mulai dari Android 15, Google menerapkan display 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
Spasi dan padding yang tidak nyaman
Penampilan yang tidak konsisten di berbagai perangkat
Pengalaman pengguna yang buruk

Dengan menggunakan versi resmi adjustMarginsForEdgeToEdge konfigurasi, Anda memastikan aplikasi Anda mengatasi perubahan-perubahan ini dengan benar tanpa code yang di custom.

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 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";
}

Menguji Konfigurasi Anda

Setelah mengonfigurasi adjustMarginsForEdgeToEdgeTes aplikasi Anda pada:

Perangkat Android 15+ - Pastikan konten mematuhi bar sistem dengan benar
Versi Android yang lebih tua - 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.

Jangan Campur dengan Implementasi Manual

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

Jangan Lupa CSS Area Aman

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

Petunjuk Pindah

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 konfigurasi Anda capacitor.config.ts
Membersihkan dan membangun ulang projek Android Anda
Menguji 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:

Menguji dengan "auto" saat ini untuk menangkap masalah-masalah awal
Mengupdate CSS Anda untuk menghandle area-area yang aman dengan benar
[Review your layouts di perangkat yang mendukung layar tepi ke tepi

Sumber Daya Tambahan

Kesimpulan

Layar Tepi ke Tepi di Capacitor tidak memerlukan plugin, trik, atau penyelesaian yang rumit. Opsi konfigurasi menyediakan solusi yang bersih dan asli yang mendukung 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 upaya minimal. "auto" Pertanyaan atau mengalami masalah?

]} Komunitas Capacitor dan dokumentasi resmi adalah sumber tambahan yang bagus untuk bantuan. Ditulis oleh

Tampilan Penuh Layar di Capacitor Tanpa Plugin