Tata Letak Otomatis dengan Desainer Xamarin untuk iOS

Peringatan

Desainer iOS tidak digunakan lagi di Visual Studio 2019 versi 16.8 dan Visual Studio 2019 untuk Mac versi 8.8, dan dihapus di Visual Studio 2019 versi 16.9 dan Visual Studio untuk Mac versi 8.9. Cara yang disarankan untuk membangun antarmuka pengguna iOS langsung ada di Mac yang menjalankan Xcode. Untuk informasi selengkapnya, lihat Mendesain antarmuka pengguna dengan Xcode.

Tata Letak Otomatis (juga disebut "tata letak adaptif") adalah pendekatan desain responsif. Tidak seperti sistem tata letak transisi, di mana lokasi setiap elemen dikodekan secara permanen ke titik di layar, Tata Letak Otomatis adalah tentang hubungan - posisi elemen yang relatif terhadap elemen lain pada permukaan desain. Inti dari Tata Letak Otomatis adalah gagasan batasan atau aturan yang menentukan penempatan elemen atau set elemen dalam konteks elemen lain di layar. Karena elemen tidak terikat pada posisi tertentu di layar, batasan membantu membuat tata letak adaptif yang terlihat bagus pada ukuran layar dan orientasi perangkat yang berbeda.

Dalam panduan ini, kami memperkenalkan batasan dan cara bekerja dengannya di Xamarin iOS Designer. Panduan ini tidak mencakup bekerja dengan batasan secara terprogram. Untuk informasi tentang menggunakan Tata Letak Otomatis secara terprogram, lihat dokumentasi Apple.

Persyaratan

Xamarin Designer untuk iOS tersedia di Visual Studio untuk Mac di Visual Studio 2017 dan yang lebih baru di Windows.

Panduan ini mengasumsikan pengetahuan tentang komponen Perancang dari panduan Pengenalan Desainer iOS.

Pengantar Batasan

Batasan adalah representasi matematika dari hubungan antara dua elemen di layar. Mewakili posisi elemen UI sebagai hubungan matematika memecahkan beberapa masalah yang terkait dengan hard-coding lokasi elemen UI. Misalnya, jika kita menempatkan tombol 20px dari bagian bawah layar dalam mode potret, posisi tombol akan berada di luar layar dalam mode lanskap. Untuk menghindari hal ini, kita dapat mengatur batasan yang menempatkan tepi bawah tombol 20px dari bagian bawah tampilan. Posisi untuk tepi tombol kemudian akan dihitung sebagai button.bottom = view.bottom - 20px, yang akan menempatkan tombol 20px dari bagian bawah tampilan dalam mode potret dan lanskap. Kemampuan untuk menghitung penempatan berdasarkan hubungan matematika adalah apa yang membuat batasan begitu berguna dalam desain UI.

Ketika kita mengatur batasan, kita membuat NSLayoutConstraint objek yang mengambil argumen objek untuk dibatasi dan properti, atau atribut, bahwa batasan akan bertindak. Di perancang iOS, atribut mencakup tepi seperti kiri, kanan, atas, dan bawah elemen. Mereka juga menyertakan atribut ukuran seperti tinggi dan lebar, dan lokasi titik tengah, centerX dan centerY. Misalnya, ketika kita menambahkan batasan pada posisi batas kiri dua tombol, Perancang menghasilkan kode berikut di bawah sampul:

View.AddConstraint (NSLayoutConstraint.Create (Button1, NSLayoutAttribute.Left, NSLayoutRelation.Equal, Button2, NSLayoutAttribute.Left, 1, 10));

Bagian berikutnya mencakup bekerja dengan batasan menggunakan iOS Designer, termasuk mengaktifkan dan menonaktifkan Tata Letak Otomatis dan menggunakan Toolbar Batasan.

Aktifkan Tata Letak Otomatis

Konfigurasi iOS Designer default memiliki mode batasan yang diaktifkan. Namun, jika Anda perlu mengaktifkan atau menonaktifkannya secara manual, Anda dapat melakukannya dalam dua langkah:

1. Klik pada ruang kosong pada permukaan desain. Ini membatalkan pilihan elemen apa pun dan memunculkan properti untuk dokumen Storyboard.

2. Centang atau hapus centang pada kotak centang Gunakan Autolayout di panel properti:

   

Secara default, tidak ada batasan yang dibuat atau terlihat di permukaan. Sebaliknya, mereka secara otomatis disimpulkan dari informasi bingkai pada waktu kompilasi. Untuk menambahkan batasan, kita perlu memilih elemen pada permukaan desain dan menambahkan batasan ke dalamnya. Kita dapat melakukannya menggunakan Toolbar Batasan.

Bilah Alat Batasan

Toolbar batasan telah diperbarui dan sekarang terdiri dari dua bagian utama:

• Tombol mode Batasan beralih: Sebelumnya, Anda memasuki mode batasan dengan mengklik lagi pada tampilan yang dipilih pada permukaan desain. Anda sekarang harus menggunakan tombol alih ini di bilah batasan:

  

• Tombol "Perbarui Batasan": Penting untuk dicatat bahwa perubahan bergantung pada apakah Anda berada dalam mode pengeditan batasan.

  • Dalam mode pengeditan Batasan, tombol ini menyesuaikan batasan agar sesuai dengan bingkai elemen.
  • Dalam mode pengeditan bingkai, tombol ini menyesuaikan bingkai elemen agar sesuai dengan posisi yang ditentukan batasan.

Batasan pengeditan popover

Pop-up editor batasan memungkinkan kami menambahkan dan memperbarui beberapa batasan sekaligus untuk tampilan tertentu. Kita dapat membuat beberapa batasan penspasian, rasio aspek, dan perataan, seperti menyelaraskan tampilan ke tepi kiri dua tampilan.

Untuk mengedit batasan pada tampilan yang dipilih, klik elipsis untuk menampilkan popover:

Saat membuka popover batasan, ia menampilkan batasan prasetel apa pun pada tampilan. Kita dapat mengatur semua batasan penspasian yang memilih Semua Sisi dari kotak kombo di sudut kanan atas, dan pilih Hapus Semua untuk menghapusnya.

W akan mengatur lebar dan H akan mengatur batasan tinggi. Saat Anda memeriksa Rasio Aspek, tinggi dan lebar tampilan akan dikontrol pada ukuran layar yang berbeda, lebar tampilan digunakan sebagai pembiru untuk ransum, dan tinggi sebagai denominator.

Empat kotak kombo untuk batasan penspasian mencantumkan tampilan tetangga untuk jangkar batasan

Pengeditan Batasan Berbasis Permukaan

Untuk pengeditan batasan yang lebih disempurnakan, kita dapat berinteraksi dengan batasan langsung di permukaan desain. Bagian ini memperkenalkan dasar-dasar pengeditan batasan berbasis permukaan, termasuk kontrol penspasian pin, area drop, dan bekerja dengan berbagai jenis batasan.

Membuat Batasan

Alat iOS Designer menawarkan dua jenis kontrol untuk memanipulasi elemen pada permukaan desain. Menyeret kontrol dan kontrol penspasian pin, seperti yang diilustrasikan dalam gambar berikut:

Ini dialihkan dengan memilih tombol mode batasan di bilah batasan.

Handel berbentuk 4 T di setiap sisi elemen menentukan tepi atas, kanan, bawah, dan kiri elemen untuk batasan. Dua handel berbentuk I di kanan dan bawah elemen menentukan batas tinggi dan lebar masing-masing. Persegi tengah menangani batasan centerX dan centerY .

Untuk membuat batasan, pilih handel dan seret di suatu tempat di permukaan desain. Saat Anda memulai seret, serangkaian garis/kotak hijau akan muncul di permukaan yang memberi tahu Anda apa yang dapat Anda batasi. Misalnya, pada cuplikan layar di bawah ini, kami membatasi sisi atas tombol tengah:

Perhatikan tiga garis hijau putus-putus di dua tombol lainnya. Garis hijau menunjukkan area drop, atau atribut elemen lain yang dapat kita batasi. Pada cuplikan layar di atas, dua tombol lainnya menawarkan 3 area drop vertikal ( bawah, tengah, atas) untuk membatasi tombol kami. Garis hijau putus-putus di bagian atas tampilan berarti pengontrol tampilan menawarkan batasan di bagian atas tampilan, dan kotak hijau solid berarti pengontrol tampilan menawarkan batasan di bawah panduan tata letak atas.

Penting

Panduan tata letak adalah jenis khusus target batasan yang memungkinkan kami membuat batasan atas dan bawah yang memperhitungkan keberadaan bilah sistem, seperti bilah status atau toolbar. Salah satu kegunaan utamanya adalah memiliki aplikasi yang kompatibel antara iOS 6 dan iOS 7 karena versi terbaru memiliki tampilan kontainer yang diperluas di bawah bilah status. Untuk informasi selengkapnya tentang panduan tata letak atas, lihat dokumentasi Apple.

Tiga bagian berikutnya memperkenalkan bekerja dengan berbagai jenis batasan.

Batasan Ukuran

Dengan batasan ukuran - tinggi dan lebar - Anda memiliki dua opsi. Opsi pertama adalah menyeret handel untuk membatasi ukuran elemen tetangga, seperti yang diilustrasikan oleh contoh di atas. Opsi lainnya adalah mengeklik dua kali handel untuk membuat batasan diri. Ini memungkinkan kami menentukan nilai ukuran konstanta, seperti yang diilustrasikan oleh cuplikan layar di bawah ini:

Batasan Tengah

Handel persegi akan membuat batasan centerX atau centerY , tergantung pada konteksnya. Menyeret handel persegi akan menerangi elemen lain untuk menawarkan area penurunan vertikal dan horizontal, seperti yang diilustrasikan oleh cuplikan layar di bawah ini:

Jika Anda memilih area drop vertikal, batasan centerY akan dibuat. Jika Anda memilih area drop horizontal, batasan akan didasarkan pada centerX.

Batasan Kombinasi

Untuk membuat batasan perataan dan ukuran kesetaraan antara dua elemen, Anda dapat memilih item dari toolbar atas untuk menentukan - secara berurutan - perataan horizontal, perataan vertikal dan kesetaraan ukuran, seperti yang diilustrasikan oleh cuplikan layar di bawah ini:

Memvisualisasikan dan Mengedit Batasan

Saat Anda menambahkan batasan, batasan akan ditampilkan pada permukaan desain sebagai garis biru saat Anda memilih item:

Anda dapat memilih batasan dengan mengklik garis biru dan mengedit nilai batasan langsung di panel properti. Atau, mengklik dua kali pada garis biru akan memunculkan popover yang memungkinkan Anda mengedit nilai langsung di permukaan desain:

Masalah Batasan

Beberapa jenis masalah dapat muncul saat menggunakan batasan:

• Batasan yang bertentangan — Ini terjadi ketika beberapa batasan memaksa elemen memiliki nilai yang bertentangan untuk atribut dan mesin batasan tidak dapat mendamaikannya.
• Item yang kurang dibatasi — Properti elemen (lokasi + ukuran) harus sepenuhnya dicakup oleh serangkaian batasan dan ukuran intrinsiknya agar batasan valid. Jika nilai-nilai ini ambigu, item dikatakan kurang dibatasi.
• Kesalahan penempatan bingkai — Ini terjadi ketika bingkai elemen dan serangkaian batasannya menentukan dua persegi panjang yang dihasilkan yang berbeda.

Bagian ini menguraikan tiga masalah yang tercantum di atas, dan memberikan detail tentang cara menanganinya.

Batasan yang Bertentangan

Batasan yang bertentangan ditandai dengan warna merah dan memiliki simbol peringatan. Mengarahkan mouse ke atas simbol peringatan memunculkan popover dengan informasi tentang konflik:

Item yang Kurang Dibatasi

Item yang kurang dibatasi muncul dalam warna oranye dan memicu munculnya ikon penanda oranye di bilah objek pengontrol tampilan:

Jika Anda mengklik ikon penanda tersebut, Anda bisa mendapatkan informasi tentang item yang kurang dibatasi di adegan dan menyelesaikan masalah dengan sepenuhnya membatasinya atau dengan menghapus batasannya, seperti yang diilustrasikan oleh cuplikan layar di bawah ini:

Kesalahan Penempatan Bingkai

Kesalahan penempatan bingkai menggunakan kode warna yang sama dengan item yang kurang dibatasi. Item akan selalu dirender di permukaan menggunakan bingkai aslinya, tetapi dalam kasus kesalahan penempatan bingkai persegi panjang merah akan menandai di mana item akan berakhir ketika aplikasi berjalan, seperti yang diilustrasikan oleh cuplikan layar di bawah ini:

Untuk mengatasi kesalahan penempatan bingkai, pilih tombol Perbarui Bingkai Berdasarkan Batasan dari toolbar batasan (tombol paling kanan):

Ini akan secara otomatis menyesuaikan bingkai elemen agar sesuai dengan posisi yang ditentukan oleh kontrol.

Mengubah Batasan dalam Kode

Berdasarkan persyaratan aplikasi Anda, mungkin ada kalanya Anda perlu memodifikasi batasan dalam kode. Misalnya, untuk mengubah ukuran atau memposisikan ulang Tampilan Batasan dilampirkan, untuk mengubah prioritas Batasan atau menonaktifkan Batasan sama sekali.

Untuk mengakses Batasan dalam kode, Anda harus terlebih dahulu mengeksposnya di iOS Designer dengan melakukan hal berikut:

1. Buat Batasan seperti biasa (menggunakan salah satu metode yang tercantum di atas).

2. Di Penjelajah Kerangka Dokumen, temukan Batasan yang diinginkan dan pilih:

   

3. Selanjutnya, tetapkan Nama ke Batasan di tab Widget dari Penjelajah Properti:

   

4. Simpan perubahan Anda.

Dengan perubahan di atas, Anda dapat mengakses Batasan dalam kode dan memodifikasi propertinya. Misalnya, Anda dapat menggunakan yang berikut ini untuk mengatur tinggi Tampilan terlampir ke nol:

ViewInfoHeight.Constant = 0;

Mengingat pengaturan berikut untuk Batasan di Perancang iOS:

Kode Tata Letak Yang Ditangguhkan

Alih-alih langsung memperbarui Tampilan terlampir sebagai respons terhadap perubahan Batasan, Mesin Tata Letak Otomatis menjadwalkan Kode Tata Letak Yang Ditangguhkan untuk waktu dekat. Selama pass yang ditangguhkan ini, tidak hanya Batasan Tampilan yang diberikan yang diperbarui, Batasan untuk setiap Tampilan dalam hierarki dihitung ulang dan diperbarui untuk menyesuaikan tata letak baru.

Kapan saja, Anda dapat menjadwalkan Kode Tata Letak Yang Ditangguhkan sendiri dengan memanggil SetNeedsLayout metode atau SetNeedsUpdateConstraints Tampilan induk.

Kode Tata Letak Yang Ditangguhkan terdiri dari dua pass unik melalui hierarki tampilan:

• Kode Pembaruan - Dalam pass ini, Mesin Tata Letak Otomatis melintasi hierarki tampilan dan memanggil UpdateViewConstraints metode pada semua Pengontrol Tampilan dan UpdateConstraints metode pada semua Tampilan.
• Kode Tata Letak - Sekali lagi, Mesin Tata Letak Otomatis melintasi hierarki tampilan, tetapi kali ini memanggil ViewWillLayoutSubviews metode pada semua Pengontrol Tampilan dan LayoutSubviews metode pada semua Tampilan. Metode memperbarui LayoutSubviewsFrame properti dari setiap subview dengan persegi yang dihitung oleh Mesin Tata Letak Otomatis.

Menganimasikan Perubahan Batasan

Selain memodifikasi properti Batasan, Anda dapat menggunakan Animasi Inti untuk menganimasikan perubahan pada Batasan Tampilan. Contohnya:

UIView.BeginAnimations("OpenInfo");
UIView.SetAnimationDuration(1.0f);
ViewInfoHeight.Constant = 237;
View.LayoutIfNeeded();

//Execute Animation
UIView.CommitAnimations();

Kunci di sini adalah memanggil LayoutIfNeeded metode tampilan induk di dalam blok animasi. Ini memberi tahu tampilan untuk menggambar setiap "bingkai" dari lokasi animasi atau perubahan ukuran. Tanpa baris ini, Tampilan hanya akan melekat pada versi akhir tanpa animasi.

Ringkasan

Panduan ini memperkenalkan Tata Letak iOS Otomatis (atau "adaptif") dan konsep batasan sebagai representasi matematika hubungan antara elemen pada permukaan desain. Ini menjelaskan cara mengaktifkan Tata Letak Otomatis di perancang iOS, bekerja dengan toolbar Batasan, dan batasan pengeditan satu per satu pada permukaan desain. Selanjutnya, ini menjelaskan cara memecahkan masalah tiga batasan umum. Akhirnya, ini menunjukkan cara memodifikasi batasan dalam kode.

Link Terkait

• Pengantar Papan Cerita
• Panduan Kontrol yang Dapat Didesain iOS
• Gambaran Umum Desainer Android
• Batasan Terprogram