Area Aman Xcode 9

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.

Safe Area adalah panduan tata letak ( Safe Layout Guide ) .
Panduan tata letak mewakili bagian dari tampilan Anda yang tidak tertutup oleh bilah dan konten lainnya. Di iOS 11+, Apple mencela panduan tata letak atas dan bawah dan menggantinya dengan panduan tata letak area aman tunggal.

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 overscanCompensationInsetsproperti UIScreen.) Ini juga mencakup ruang tambahan yang ditentukan oleh properti view controller additionalSafeAreaInsets. 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.

Menurut Apple, Xcode 9 - Release note
Interface Builder menggunakan UIView.safeAreaLayoutGuide sebagai pengganti panduan tata letak Top dan Bottom yang sudah tidak digunakan lagi di UIViewController. Untuk menggunakan area aman baru, pilih Panduan Tata Letak Area Aman di inspektur File untuk pengontrol tampilan, dan kemudian tambahkan batasan antara konten Anda dan jangkar area aman baru. Ini mencegah konten Anda dari dikaburkan oleh bilah atas dan bawah, dan oleh wilayah overscan di tvOS. Batasan untuk area aman dikonversi ke Atas dan Bawah ketika menggunakan ke versi iOS sebelumnya.

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:

• Aktifkan 'Tata Letak Area Aman', jika tidak diaktifkan.
• Hapus 'semua kendala' jika mereka menunjukkan koneksi dengan tampilan Super dan pasang kembali semua dengan jangkar tata letak yang aman. ATAU Klik dua kali pada kendala dan edit koneksi dari tampilan super ke jangkar SafeArea

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:

private let greenView = UIView()

Kami mungkin memiliki fungsi untuk mengatur tampilan dan batasan yang dipanggil dari viewDidLoad:

private func setupView() {
  greenView.translatesAutoresizingMaskIntoConstraints = false
  greenView.backgroundColor = .green
  view.addSubview(greenView)
}

Buat batasan margin depan dan belakang seperti biasa menggunakan layoutMarginsGuide dari tampilan root:

 let margins = view.layoutMarginsGuide
    NSLayoutConstraint.activate([
      greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
      greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
 ])

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:

if #available(iOS 11, *) {
  let guide = view.safeAreaLayoutGuide
  NSLayoutConstraint.activate([
   greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0),
   guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor, multiplier: 1.0)
   ])

} else {
   let standardSpacing: CGFloat = 8.0
   NSLayoutConstraint.activate([
   greenView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing),
   bottomLayoutGuide.topAnchor.constraint(equalTo: greenView.bottomAnchor, constant: standardSpacing)
   ])
}

Hasil:

Mengikuti UIViewekstensi, buatlah mudah bagi Anda untuk bekerja dengan SafeAreaLayout secara terprogram.

extension UIView {

  // Top Anchor
  var safeAreaTopAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.topAnchor
    } else {
      return self.topAnchor
    }
  }

  // Bottom Anchor
  var safeAreaBottomAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.bottomAnchor
    } else {
      return self.bottomAnchor
    }
  }

  // Left Anchor
  var safeAreaLeftAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.leftAnchor
    } else {
      return self.leftAnchor
    }
  }

  // Right Anchor
  var safeAreaRightAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.rightAnchor
    } else {
      return self.rightAnchor
    }
  }

}

Berikut ini contoh kode dalam Objective-C :

• Cara menambahkan area aman secara terprogram

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

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 safeAreaLayoutGuidedari UIViewkebutuhan 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:

Panduan tata letak mewakili bagian dari tampilan Anda yang tidak tertutup oleh bilah dan konten lainnya. Saat tampilan terlihat di layar , panduan ini mencerminkan bagian tampilan yang tidak tercakup oleh bilah navigasi, bilah tab, bilah alat, dan tampilan leluhur lainnya. (Di tvOS, area aman mencerminkan area yang tidak tertutup bezel layar.) Jika tampilan saat ini tidak dipasang dalam hierarki tampilan, atau belum terlihat di layar, tepi panduan tata letak sama dengan tepi tampilan .

(penekanan milikku)

Jika Anda membacanya sedini mungkin -viewDidLoad:, layoutFramepanduan ini {{0, 0}, {375, 812}}bukan yang diharapkan{{0, 44}, {375, 734}}

• Sebelumnya di iOS 7.0–11.0 < Deprecated > UIKitmenggunakan topLayoutGuide & bottomLayoutGuide yang merupakan UIViewproperti

• iOS11 + menggunakan safeAreaLayoutGuide yang juga merupakan UIViewproperti

• Aktifkan 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.

• safeAreaLayoutGuide mencerminkan bagian tampilan yang tidak dicakup oleh bilah navigasi, bilah tab, bilah alat, dan tampilan leluhur lainnya.

• 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.safeAreaLayoutGuidesebagai-

ObjC:

  self.demoView.translatesAutoresizingMaskIntoConstraints = NO;
    UILayoutGuide * guide = self.view.safeAreaLayoutGuide;
    [self.demoView.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor].active = YES;
    [self.demoView.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor].active = YES;
    [self.demoView.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES;
    [self.demoView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor].active = YES;

Cepat:

   demoView.translatesAutoresizingMaskIntoConstraints = false
        if #available(iOS 11.0, *) {
            let guide = self.view.safeAreaLayoutGuide
            demoView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
            demoView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
            demoView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
            demoView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
        } else {
            NSLayoutConstraint(item: demoView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        }

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.

Panduan Tata Letak Area Aman membantu menghindari elemen UI Sistem yang tumpang tindih saat memposisikan konten dan kontrol.

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.