Saat menjelajahi Xcode9 Beta Ditemukan Area Aman di Pembuat antarmuka Tampilan hierarki penampil. Penasaran dan mencoba untuk mengetahui tentang Area Aman pada dokumentasi Apel, pada intinya doc mengatakan "Area tampilan yang secara langsung berinteraksi dengan tata letak Otomatis" Tapi itu tidak memuaskan saya, saya ingin tahu Praktis menggunakan hal baru ini.
Apakah ada yang punya petunjuk?
Paragraf kesimpulan dari Apple doc for Safe area.
Kelas UILayoutGuide dirancang untuk melakukan semua tugas yang sebelumnya dilakukan oleh pandangan dummy, tetapi untuk melakukannya dengan cara yang lebih aman, lebih efisien. Panduan tata letak tidak mendefinisikan tampilan baru. Mereka tidak berpartisipasi dalam hierarki tampilan. Alih-alih, mereka hanya mendefinisikan wilayah persegi panjang dalam sistem koordinat tampilan milik mereka yang dapat berinteraksi dengan Tata Letak Otomatis.
Jawaban:
Saat tampilan terlihat di layar, panduan ini mencerminkan bagian tampilan yang tidak dicakup oleh konten lain. Area tampilan yang aman mencerminkan area yang dicakup oleh bilah navigasi, bilah tab, bilah alat, dan leluhur lainnya yang mengaburkan pandangan pengontrol tampilan. (Di tvOS, area aman menggunakan bezel layar, seperti yang didefinisikan oleh
overscanCompensationInsets
properti UIScreen.) Ini juga mencakup ruang tambahan yang ditentukan oleh properti view controlleradditionalSafeAreaInsets
. Jika tampilan saat ini tidak diinstal dalam hierarki tampilan, atau belum terlihat di layar, panduan tata letak selalu cocok dengan tepi tampilan.Untuk tampilan root pengontrol tampilan, area aman di properti ini mewakili seluruh bagian konten pengontrol tampilan yang dikaburkan, dan setiap inset tambahan yang Anda tentukan. Untuk tampilan lain dalam hierarki tampilan, area aman hanya mencerminkan bagian dari tampilan yang dikaburkan. Misalnya, jika tampilan sepenuhnya berada dalam area aman dari tampilan root pengontrol tampilan, inset tepi pada properti ini adalah 0.
Berikut ini adalah referensi sederhana sebagai perbandingan (untuk membuat efek visual yang serupa) antara Panduan Tata Letak (Atas & Bawah) yang ada dan Panduan Tata Letak Area Aman.
Tata Letak Area Aman:
AutoLayout
Bagaimana cara bekerja dengan Layout Area Aman?
Ikuti langkah-langkah ini untuk menemukan solusi:
Berikut ini contoh cuplikan, cara mengaktifkan tata letak area aman dan mengedit kendala.
Ini adalah hasil dari perubahan di atas
Desain Tata Letak dengan SafeArea
Saat merancang untuk iPhone X, Anda harus memastikan bahwa tata letak memenuhi layar dan tidak dikaburkan oleh sudut bundar perangkat, rumah sensor, atau indikator untuk mengakses layar Beranda.
Sebagian besar aplikasi yang menggunakan elemen UI standar yang disediakan sistem seperti bilah navigasi, tabel, dan koleksi secara otomatis beradaptasi dengan faktor bentuk baru perangkat. Bahan latar belakang meluas ke tepi layar dan elemen UI dipasang dengan benar dan diposisikan.
Untuk aplikasi dengan tata letak khusus, mendukung iPhone X juga harus relatif mudah, terutama jika aplikasi Anda menggunakan Tata Letak Otomatis dan mematuhi panduan tata letak area dan margin yang aman.
Berikut ini contoh kode (Ref dari: Safe Layout Guide ) :
Jika Anda membuat batasan dalam kode, gunakan properti safeAreaLayoutGuide di UIView untuk mendapatkan jangkar tata letak yang relevan. Mari kita buat kembali contoh Interface Builder di atas dalam kode untuk melihat tampilannya:
Dengan asumsi kami memiliki tampilan hijau sebagai properti di pengontrol tampilan kami:
Kami mungkin memiliki fungsi untuk mengatur tampilan dan batasan yang dipanggil dari viewDidLoad:
Buat batasan margin depan dan belakang seperti biasa menggunakan layoutMarginsGuide dari tampilan root:
Sekarang kecuali Anda hanya menargetkan iOS 11, Anda perlu membungkus batasan panduan tata letak area aman dengan #available dan kembali ke panduan tata letak atas dan bawah untuk versi iOS sebelumnya:
Hasil:
Mengikuti
UIView
ekstensi, buatlah mudah bagi Anda untuk bekerja dengan SafeAreaLayout secara terprogram.Berikut ini contoh kode dalam Objective-C :
Berikut adalah Dokumentasi Resmi Pengembang Apple untuk Panduan Tata Letak Area Aman
Area Aman diperlukan untuk menangani desain antarmuka pengguna untuk iPhone-X. Berikut adalah pedoman dasar untuk Bagaimana merancang antarmuka pengguna untuk iPhone-X menggunakan Layout Area Aman
sumber
margins
danview.leadingAnchor
: saat Anda menggunakanlet margins = view.layoutMarginsGuide
dan nanti digunakanmargins.leadingAnchor
, Anda membatasi tampilan hingga batas tampilan. Ini akan menambah ruang ekstra ke samping. Jika Anda tidak menginginkannya, gunakan sajaview.leadingAnchor
danview.trailingAnchor
dan Anda tidak akan melihat ruang putih di kiri atau kanan ...Saya ingin menyebutkan sesuatu yang menangkap saya pertama ketika saya mencoba untuk beradaptasi aplikasi berbasis SpriteKit untuk menghindari tepi bulat dan "notch" yang baru iPhone X, seperti yang disarankan oleh terbaru Pedoman Human Interface : Properti baru
safeAreaLayoutGuide
dariUIView
kebutuhan untuk ditanya setelah tampilan ditambahkan ke hierarki (misalnya, aktif-viewDidAppear:
) untuk melaporkan bingkai tata letak yang bermakna (jika tidak, ia hanya mengembalikan ukuran layar penuh).Dari dokumentasi properti:
(penekanan milikku)
Jika Anda membacanya sedini mungkin
-viewDidLoad:
,layoutFrame
panduan ini{{0, 0}, {375, 812}}
bukan yang diharapkan{{0, 44}, {375, 734}}
sumber
UIKit
menggunakan topLayoutGuide & bottomLayoutGuide yang merupakanUIView
propertiiOS11 + menggunakan safeAreaLayoutGuide yang juga merupakan
UIView
propertiAktifkan kotak centang Panduan Tata Letak Area Aman dari inspektur file.
Area aman membantu Anda menempatkan tampilan dalam bagian yang terlihat dari keseluruhan antarmuka.
Di tvOS , area aman juga mencakup insets overscan layar, yang mewakili area yang dicakup oleh bezel layar.
Gunakan area aman sebagai bantuan untuk meletakkan konten Anda seperti
UIButton
dll.Saat mendesain untuk iPhone X, Anda harus memastikan bahwa tata letak memenuhi layar dan tidak dikaburkan oleh sudut bundar perangkat, rumah sensor, atau indikator untuk mengakses layar Beranda.
Pastikan latar belakang membentang ke tepi layar, dan tata letak yang dapat digulir secara vertikal, seperti tabel dan koleksi, terus berlanjut hingga ke bawah.
Bilah status lebih tinggi pada iPhone X daripada iPhone lainnya. Jika aplikasi Anda mengasumsikan ketinggian bilah status tetap untuk memposisikan konten di bawah bilah status, Anda harus memperbarui aplikasi Anda untuk secara dinamis memposisikan konten berdasarkan perangkat pengguna. Perhatikan bahwa bilah status pada iPhone X tidak mengubah ketinggian ketika tugas latar belakang seperti rekaman suara dan pelacakan lokasi aktif
print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones
Ketinggian wadah indikator rumah adalah 34 poin.
Setelah mengaktifkan Panduan Tata Letak Area Aman, Anda dapat melihat properti batasan area aman yang tercantum dalam pembuat antarmuka.
Anda dapat mengatur kendala dengan masing-masing
self.view.safeAreaLayoutGuide
sebagai-ObjC:
Cepat:
sumber
Apple memperkenalkan topLayoutGuide dan bottomLayoutGuide sebagai properti dari UIViewController di iOS 7. Mereka memungkinkan Anda membuat batasan untuk menjaga konten Anda agar tidak disembunyikan oleh bilah UIKit seperti status, navigasi, atau bilah tab. Panduan tata letak ini tidak digunakan lagi di iOS 11 dan diganti dengan panduan tata letak area aman tunggal.
Lihat tautan untuk informasi lebih lanjut.
sumber
Area Aman adalah area di antara elemen Sistem UI yang merupakan Bilah Status, Bilah Navigasi dan Bilah Alat atau Bilah Tab. Jadi, ketika Anda menambahkan bilah Status ke aplikasi Anda, Area Aman menyusut. Saat Anda menambahkan Bilah Navigasi ke aplikasi Anda, Area Aman menyusut lagi.
Pada iPhone X, Area Aman menyediakan inset tambahan dari tepi layar atas dan bawah dalam potret bahkan ketika tidak ada bilah yang ditampilkan. Dalam lansekap, Area Aman inset dari sisi layar dan indikator rumah.
Ini diambil dari video Merancang Apple untuk iPhone X di mana mereka juga memvisualisasikan bagaimana elemen yang berbeda mempengaruhi Area Aman.
sumber