Batasan Tata Letak Terprogram di Xamarin.iOS

Artikel
07/13/2023

Panduan ini menyajikan bekerja dengan batasan Tata Letak Otomatis iOS dalam kode C# alih-alih membuatnya di iOS Designer.

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.

Biasanya saat bekerja dengan Tata Letak Otomatis di iOS, Anda akan menggunakan Penyusun Antarmuka Xcode untuk menempatkan Batasan Tata Letak secara grafis pada item UI Anda. Namun, mungkin ada kalanya Anda perlu membuat dan menerapkan batasan dalam kode C#. Misalnya, saat menggunakan elemen UI yang dibuat secara dinamis ditambahkan ke UIView.

Panduan ini akan menunjukkan kepada Anda cara membuat dan bekerja dengan batasan menggunakan kode C# alih-alih membuatnya secara grafis di Penyusun Antarmuka Xcode.

Membuat Batasan Secara Terprogram

Seperti yang dinyatakan di atas, biasanya Anda akan bekerja dengan Batasan Tata Letak Otomatis di Desainer iOS. Untuk waktu yang Anda lakukan harus membuat batasan Anda secara terprogram, Anda memiliki tiga opsi untuk dipilih:

Layout Anchors - API ini menyediakan akses ke properti jangkar (seperti TopAnchor, BottomAnchor atau HeightAnchor) item UI yang dibatasi.
Batasan Tata Letak - Anda dapat membuat batasan secara langsung menggunakan NSLayoutConstraint kelas .
Bahasa Pemformatan Visual - Menyediakan metode seperti seni ASCII untuk menentukan batasan Anda.

Bagian berikut akan membahas setiap opsi secara rinci.

Jangkar Tata Letak

Dengan menggunakan kelas , NSLayoutAnchor Anda memiliki antarmuka yang fasih untuk membuat batasan berdasarkan properti jangkar item UI yang dibatasi. Misalnya, panduan tata letak atas dan bawah Pengontrol Tampilan mengekspos TopAnchorproperti , BottomAnchor dan HeightAnchor jangkar saat Tampilan mengekspos properti tepi, tengah, ukuran, dan garis besar.

Penting

Selain set standar properti jangkar, Tampilan iOS juga menyertakan LayoutMarginsGuides properti dan ReadableContentGuide . Properti ini mengekspos UILayoutGuide objek untuk bekerja dengan margin Tampilan dan panduan konten yang dapat dibaca masing-masing.

Layout Anchors menyediakan beberapa metode untuk membuat batasan dalam format yang mudah dibaca dan ringkas:

ConstraintEqualTo - Menentukan hubungan di mana first attribute = second attribute + [constant] dengan nilai offset yang disediakan constant secara opsional.
ConstraintGreaterThanOrEqualTo - Menentukan hubungan di mana first attribute >= second attribute + [constant] dengan nilai offset yang disediakan constant secara opsional.
ConstraintLessThanOrEqualTo - Menentukan hubungan di mana first attribute <= second attribute + [constant] dengan nilai offset yang disediakan constant secara opsional.

Contohnya:

// Get the parent view's layout
var margins = View.LayoutMarginsGuide;

// Pin the leading edge of the view to the margin
OrangeView.LeadingAnchor.ConstraintEqualTo (margins.LeadingAnchor).Active = true;

// Pin the trailing edge of the view to the margin
OrangeView.TrailingAnchor.ConstraintEqualTo (margins.TrailingAnchor).Active = true;

// Give the view a 1:2 aspect ratio
OrangeView.HeightAnchor.ConstraintEqualTo (OrangeView.WidthAnchor, 2.0f);

Batasan Tata Letak umum dapat diekspresikan hanya sebagai ekspresi linier. Ambil contoh berikut:

Yang akan dikonversi ke baris kode C# berikut menggunakan Layout Anchors:

PurpleView.LeadingAnchor.ConstraintEqualTo (OrangeView.TrailingAnchor, 10).Active = true;

Di mana bagian kode C# sesuai dengan bagian yang diberikan dari persamaan sebagai berikut:

Persamaan	Kode
Item 1	PurpleView
Atribut 1	LeadingAnchor
Hubungan	ConstraintEqualTo
Pengali	Default ke 1.0 sehingga tidak ditentukan
Item 2	OrangeView
Atribut 2	TrailingAnchor
Terus-menerus	10.0

Selain hanya menyediakan parameter yang diperlukan untuk menyelesaikan persamaan batasan tata letak tertentu, masing-masing metode Jangkar Tata Letak memberlakukan keamanan jenis parameter yang diteruskan kepada mereka. Jadi jangkar batasan horizontal seperti LeadingAnchor atau TrailingAnchor hanya dapat digunakan dengan jenis jangkar horizontal lainnya dan pengali hanya disediakan untuk batasan ukuran.

Batasan Tata Letak

Anda dapat menambahkan batasan Tata Letak Otomatis secara manual dengan langsung membuat NSLayoutConstraint dalam kode C#. Tidak seperti menggunakan Layout Anchors, Anda harus menentukan nilai untuk setiap parameter, meskipun tidak akan berpengaruh pada batasan yang ditentukan. Akibatnya, Anda akhirnya akan menghasilkan sejumlah besar kode boilerplate yang sulit dibaca. Contohnya:

//// Pin the leading edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, View, NSLayoutAttribute.LeadingMargin, 1.0f, 0.0f).Active = true;

//// Pin the trailing edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, View, NSLayoutAttribute.TrailingMargin, 1.0f, 0.0f).Active = true;

//// Give the view a 1:2 aspect ratio
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Height, NSLayoutRelation.Equal, OrangeView, NSLayoutAttribute.Width, 2.0f, 0.0f).Active = true;

NSLayoutAttribute Di mana enum menentukan nilai untuk margin tampilan dan sesuai dengan LayoutMarginsGuide properti seperti Left, , RightTop dan NSLayoutRelationBottom enum menentukan hubungan yang akan dibuat antara atribut yang diberikan sebagai Equal, LessThanOrEqual atau GreaterThanOrEqual.

Tidak seperti API Layout Anchor, NSLayoutConstraint metode pembuatan tidak menyoroti aspek penting dari batasan tertentu dan tidak ada pemeriksaan waktu kompilasi yang dilakukan pada batasan. Akibatnya, mudah untuk membangun batasan yang tidak valid yang akan melemparkan pengecualian pada runtime.

Bahasa Format Visual

Bahasa Format Visual memungkinkan Anda menentukan batasan menggunakan seni ASCII seperti string yang menyediakan representasi visual batasan yang dibuat. Ini memiliki kelebihan dan kekurangan berikut:

Bahasa Format Visual memberlakukan pembuatan batasan yang valid saja.
Batasan output Tata Letak Otomatis ke konsol menggunakan Bahasa Format Visual sehingga pesan penelusuran kesalahan akan menyerupai kode yang digunakan untuk membuat batasan.
Bahasa Format Visual memungkinkan Anda membuat beberapa batasan secara bersamaan dengan ekspresi yang sangat ringkas.
Karena tidak ada validasi sisi kompilasi dari string Bahasa Format Visual, masalah hanya dapat ditemukan saat runtime.
Karena Bahasa Format Visual menekankan visualisasi atas kelengkapan beberapa jenis batasan tidak dapat dibuat dengannya (seperti rasio).

Anda mengambil langkah-langkah berikut saat menggunakan Bahasa Format Visual untuk membuat batasan:

NSDictionary Buat yang berisi Tampilkan objek dan Panduan Tata Letak dan kunci string yang akan digunakan saat menentukan format.
Secara opsional buat NSDictionary yang menentukan sekumpulan kunci dan nilai (NSNumber) yang digunakan sebagai nilai Konstanta untuk batasan.
Buat string format untuk tata letak satu kolom atau baris item.
FromVisualFormat Panggil metode NSLayoutConstraint kelas untuk menghasilkan batasan.
ActivateConstraints Panggil metode NSLayoutConstraint kelas untuk mengaktifkan dan menerapkan batasan.

Misalnya, untuk membuat batasan di depan dan berikutnya dalam Bahasa Format Visual, Anda dapat menggunakan yang berikut ini:

// Get views being constrained
var views = new NSMutableDictionary (); 
views.Add (new NSString ("orangeView"), OrangeView);

// Define format and assemble constraints
var format = "|-[orangeView]-|";
var constraints = NSLayoutConstraint.FromVisualFormat (format, NSLayoutFormatOptions.AlignAllTop, null, views);

// Apply constraints
NSLayoutConstraint.ActivateConstraints (constraints);

Karena Bahasa Format Visual selalu membuat batasan titik nol yang dilampirkan ke margin Tampilan induk saat menggunakan penspasian default, kode ini menghasilkan hasil yang identik dengan contoh yang disajikan di atas.

Untuk desain UI yang lebih kompleks, seperti beberapa tampilan turunan pada satu baris, Bahasa Format Visual menentukan penspasian horizontal dan perataan vertikal. Seperti dalam contoh di atas di mana ia menentukan AlignAllTopNSLayoutFormatOptions perataan semua tampilan dalam baris atau kolom ke bagian atasnya.

Lihat Lampiran Bahasa Format Visual Apple untuk beberapa contoh menentukan batasan umum dan Tata Bahasa String Format Visual.

Ringkasan

Panduan ini menyajikan pembuatan dan bekerja dengan batasan Tata Letak Otomatis di C# dibandingkan dengan membuatnya secara grafis di iOS Designer. Pertama, ia melihat menggunakan Layout Anchors (NSLayoutAnchor) untuk menangani Tata Letak Otomatis. Selanjutnya, ini menunjukkan cara bekerja dengan Batasan Tata Letak (NSLayoutConstraint). Terakhir, disajikan menggunakan Bahasa Format Visual untuk Tata Letak Otomatis.