Tampilan Tumpukan di Xamarin.iOS
Artikel ini membahas penggunaan kontrol UIStackView baru di aplikasi Xamarin.iOS untuk mengelola serangkaian subview baik di tumpukan yang disusun secara horizontal atau vertikal.
Penting
Harap dicatat bahwa meskipun StackView didukung di iOS Designer, Anda mungkin menemukan bug kegunaan saat menggunakan saluran Stabil. Mengalihkan saluran Beta atau Alpha harus meringankan masalah ini. Kami telah memutuskan untuk menyajikan panduan ini menggunakan Xcode sampai perbaikan yang diperlukan diterapkan di saluran Stabil.
Kontrol Tampilan Tumpukan (UIStackView
) memanfaatkan kekuatan Tata Letak Otomatis dan Kelas Ukuran untuk mengelola tumpukan subview, baik secara horizontal maupun vertikal, yang secara dinamis merespons orientasi dan ukuran layar perangkat iOS.
Tata letak semua subview yang dilampirkan ke Tampilan Tumpukan dikelola olehnya berdasarkan properti yang ditentukan pengembang seperti sumbu, distribusi, perataan, dan penspasian:
Saat menggunakan UIStackView
di aplikasi Xamarin.iOS, pengembang dapat menentukan subview baik di dalam Storyboard di iOS Designer, atau dengan menambahkan dan menghapus subview dalam kode C#.
Dokumen ini terdiri dari dua bagian: mulai cepat untuk membantu Anda menerapkan tampilan tumpukan pertama Anda, lalu beberapa detail teknis lainnya tentang cara kerjanya.
Video UIStackView
Mulai Cepat UIStackView
Sebagai pengenalan cepat kontrol UIStackView
, kita akan membuat antarmuka sederhana yang memungkinkan pengguna untuk memasukkan peringkat dari 1 hingga 5. Kita akan menggunakan dua Tampilan Tumpukan: satu untuk mengatur antarmuka secara vertikal di layar perangkat dan satu untuk mengatur ikon peringkat 1-5 secara horizontal di seluruh layar.
Tentukan UI
Mulai proyek Xamarin.iOS baru dan edit file Main.storyboard di Penyusun Antarmuka Xcode. Pertama, seret satu Tampilan Tumpukan Vertikal pada Pengontrol Tampilan:
Di Pemeriksa Atribut, atur opsi berikut:
Mana:
- Sumbu – Menentukan apakah Tampilan Tumpukan mengatur subview baik Secara Horizontal atau Vertikal.
- Perataan – Mengontrol bagaimana subview diratakan dalam Tampilan Tumpukan.
- Distribusi – Mengontrol bagaimana subview berukuran dalam Tampilan Tumpukan.
- Penspasian – Mengontrol ruang minimal di antara setiap subview dalam Tampilan Tumpukan.
- Relatif Garis Besar – Jika dicentang, spasi vertikal setiap subview akan berasal dari garis besarnya.
- Margin Tata Letak Relatif – Menempatkan subview relatif terhadap margin tata letak standar.
Saat bekerja dengan Tampilan Tumpukan, Anda dapat menganggap Perataan sebagai lokasi X dan Y dari subview dan Distribusi sebagai Tinggi dan Lebar.
Penting
UIStackView
dirancang sebagai tampilan kontainer non-rendering dan dengan demikian, tidak ditarik ke kanvas seperti subkelas lainnya dari UIView
. Jadi mengatur properti seperti BackgroundColor
atau mengambil alih DrawRect
tidak akan memiliki efek visual.
Lanjutkan ke tata letak antarmuka aplikasi dengan menambahkan Label, ImageView, dua Tombol dan Tampilan Tumpukan Horizontal sehingga menyerupai yang berikut ini:
Konfigurasikan Tampilan Tumpukan Horizontal dengan opsi berikut:
Karena kami tidak ingin ikon yang mewakili setiap "titik" dalam peringkat direntangkan saat ditambahkan ke Tampilan Tumpukan Horizontal, kami telah mengatur Perataan ke Tengah dan Distribusi untuk Mengisi Sama.
Terakhir, kawat Outlet dan Tindakan berikut:
Mengisi UIStackView dari Kode
Kembali ke Visual Studio untuk Mac dan edit file ViewController.cs dan tambahkan kode berikut:
public int Rating { get; set;} = 0;
...
partial void IncreaseRating (Foundation.NSObject sender) {
// Maximum of 5 "stars"
if (++Rating > 5 ) {
// Abort
Rating = 5;
return;
}
// Create new rating icon and add it to stack
var icon = new UIImageView (new UIImage("icon.png"));
icon.ContentMode = UIViewContentMode.ScaleAspectFit;
RatingView.AddArrangedSubview(icon);
// Animate stack
UIView.Animate(0.25, ()=>{
// Adjust stack view
RatingView.LayoutIfNeeded();
});
}
partial void DecreaseRating (Foundation.NSObject sender) {
// Minimum of zero "stars"
if (--Rating < 0) {
// Abort
Rating =0;
return;
}
// Get the last subview added
var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];
// Remove from stack and screen
RatingView.RemoveArrangedSubview(icon);
icon.RemoveFromSuperview();
// Animate stack
UIView.Animate(0.25, ()=>{
// Adjust stack view
RatingView.LayoutIfNeeded();
});
}
Mari kita lihat beberapa bagian kode ini secara rinci. Pertama, kita menggunakan if
pernyataan untuk memeriksa bahwa tidak ada lebih dari lima "bintang" atau kurang dari nol.
Untuk menambahkan "bintang" baru, kita memuat gambarnya dan mengatur Mode Kontennya ke Menskalakan Kecocokan Aspek:
var icon = new UIImageView (new UIImage("icon.png"));
icon.ContentMode = UIViewContentMode.ScaleAspectFit;
Ini membuat ikon "bintang" tidak terdistorsi saat ditambahkan ke Tampilan Tumpukan.
Selanjutnya, kita menambahkan ikon "bintang" baru ke koleksi subview Tampilan Tumpukan:
RatingView.AddArrangedSubview(icon);
Anda akan melihat bahwa kami menambahkan ke UIImageView
UIStackView
properti 's ArrangedSubviews
dan bukan ke SubView
. Tampilan apa pun yang Anda inginkan agar Tampilan Tumpukan mengontrol tata letaknya harus ditambahkan ke ArrangedSubviews
properti .
Untuk menghapus subview dari Tampilan Stack, pertama-tama kita mendapatkan subview untuk dihapus:
var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];
Kemudian kita perlu menghapusnya dari ArrangedSubviews
koleksi dan Tampilan Super:
// Remove from stack and screen
RatingView.RemoveArrangedSubview(icon);
icon.RemoveFromSuperview();
Menghapus subview hanya ArrangedSubviews
dari koleksi yang mengeluarkannya dari kontrol Stack View, tetapi tidak menghapusnya dari layar.
Menguji UI
Dengan semua elemen dan kode UI yang diperlukan, Anda sekarang dapat menjalankan dan menguji antarmuka. Saat UI ditampilkan, semua elemen dalam Tampilan Tumpukan Vertikal akan diberi spasi sama dari atas ke bawah.
Saat pengguna mengetuk tombol Tingkatkan Peringkat , "bintang" lain ditambahkan ke layar (hingga maksimum 5):
"Bintang" akan secara otomatis dipusatkan dan didistribusikan secara merata dalam Tampilan Tumpukan Horizontal. Saat pengguna mengetuk tombol Kurangi Peringkat , "bintang" dihapus (hingga tidak ada yang tersisa).
Detail Tampilan Tumpukan
Sekarang setelah kita memiliki gambaran umum tentang apa UIStackView
kontrolnya dan cara kerjanya, mari kita lihat lebih dalam beberapa fitur dan detailnya.
Tata Letak Otomatis dan Kelas Ukuran
Seperti yang kita lihat di atas, ketika subview ditambahkan ke Tampilan Tumpukan tata letaknya benar-benar dikontrol oleh Tampilan Tumpukan tersebut menggunakan Tata Letak Otomatis dan Kelas Ukuran untuk memosisikan dan mengukur tampilan yang disusun.
Tampilan Tumpukan akan menyematkan subview pertama dan terakhir dalam koleksinya ke tepi Atas dan Bawah untuk Tampilan Tumpukan Vertikal atau tepi Kiri dan Kanan untuk Tampilan Tumpukan Horizontal. Jika Anda mengatur LayoutMarginsRelativeArrangement
properti ke true
, maka tampilan menyematkan subview ke margin yang relevan alih-alih tepi.
Tampilan Tumpukan menggunakan properti subview IntrinsicContentSize
saat menghitung ukuran subview di sepanjang yang ditentukan Axis
(kecuali untuk FillEqually Distribution
). Mengubah FillEqually Distribution
ukuran semua subview sehingga ukurannya sama, sehingga mengisi Tampilan Tumpukan di Axis
sepanjang .
Dengan pengecualian Fill Alignment
, Tampilan Tumpukan menggunakan properti subview IntrinsicContentSize
untuk menghitung ukuran tampilan yang setimpal dengan yang diberikan Axis
. Fill Alignment
Untuk , semua subview berukuran sehingga memenuhi Tampilan Tumpukan yang setimpal dengan yang diberikan Axis
.
Penempatan dan Ukuran Tampilan Tumpukan
Meskipun Tampilan Tumpukan memiliki kontrol total atas tata letak subview apa pun (berdasarkan properti seperti Axis
dan Distribution
), Anda masih perlu memosisikan Tampilan Tumpukan (UIStackView
) dalam tampilan induknya menggunakan Tata Letak Otomatis dan Kelas Ukuran.
Umumnya, ini berarti menyematkan setidaknya dua tepi Tampilan Tumpukan untuk memperluas dan mengontrak, sehingga menentukan posisinya. Tanpa batasan tambahan, Tampilan Tumpukan akan secara otomatis diubah ukurannya agar sesuai dengan semua subview-nya sebagai berikut:
- Ukuran di sepanjang ukurannya
Axis
akan menjadi jumlah semua ukuran subview ditambah ruang apa pun yang telah ditentukan di antara setiap subview. LayoutMarginsRelativeArrangement
Jika properti adalahtrue
, ukuran Tampilan Tumpukan juga akan menyertakan ruang untuk margin.- Ukuran yang seterusnya
Axis
akan diatur ke subview terbesar dalam koleksi.
Selain itu, Anda dapat menentukan batasan untuk Tinggi dan Lebar Tampilan Tumpukan. Dalam hal ini, subview akan ditata (berukuran) untuk mengisi ruang yang ditentukan oleh Tampilan Tumpukan seperti yang ditentukan oleh Distribution
properti dan Alignment
.
BaselineRelativeArrangement
Jika properti adalah true
, subview akan ditata berdasarkan garis besar subview pertama atau terakhir, alih-alih menggunakan posisi Atas, Bawah, atau Tengah- Y. Ini dihitung pada konten Tampilan Tumpukan sebagai berikut:
- Tampilan Tumpukan Vertikal akan mengembalikan subview pertama untuk garis besar pertama dan yang terakhir untuk yang terakhir. Jika salah satu subview ini adalah Tampilan Tumpukan, garis besar pertama atau terakhirnya akan digunakan.
- Tampilan Tumpukan Horizontal akan menggunakan subview tertingginya untuk garis besar pertama dan terakhir. Jika tampilan tertinggi juga merupakan Tampilan Tumpukan, tampilan tersebut akan menggunakan subview tertinggi sebagai garis besar.
Penting
Perataan Garis Besar tidak berfungsi pada ukuran subview yang direntangkan atau dikompresi karena garis besar akan dihitung ke posisi yang salah. Untuk Perataan Garis Besar, pastikan Tinggi subview cocok dengan Tinggi Tampilan Konten Intrinsik.
Penggunaan Tampilan Tumpukan Umum
Ada beberapa jenis tata letak yang berfungsi dengan baik dengan kontrol Tampilan Tumpukan. Menurut Apple, berikut adalah beberapa kegunaan yang lebih umum:
- Tentukan Ukuran Sepanjang Sumbu – Dengan menyematkan kedua tepi di sepanjang Tampilan
Axis
Tumpukan dan salah satu tepi yang berdekatan untuk mengatur posisi, tampilan Tumpukan akan tumbuh di sepanjang sumbu agar sesuai dengan ruang yang ditentukan oleh subview-nya. - Tentukan Posisi Subview – Dengan menyematkan ke tepi yang berdekatan dari Tampilan Tumpukan ke tampilan induknya, Tampilan Tumpukan akan tumbuh di kedua dimensi agar sesuai dengan yang berisi subview.
- Tentukan Ukuran dan Posisi Tumpukan – Dengan menyematkan keempat tepi Tampilan Tumpukan ke tampilan induk, Tampilan Tumpukan mengatur subview berdasarkan ruang yang ditentukan dalam Tampilan Tumpukan.
- Tentukan Ukuran Perpendiktif Sumbu – Dengan menyematkan kedua tepi yang setimpal ke Tampilan
Axis
Tumpukan dan salah satu tepi di sepanjang sumbu untuk mengatur posisi, tampilan Tumpukan akan tumbuh seterusnya ke sumbu agar sesuai dengan ruang yang ditentukan oleh sub-gambarannya.
Mengelola Tampilan
UIStackView
dirancang sebagai tampilan kontainer non-penyajian dan dengan demikian, tidak ditarik ke kanvas seperti subkelas lainnya dari UIView
. Mengatur properti seperti BackgroundColor
atau mengambil alih DrawRect
tidak akan memiliki efek visual.
Ada beberapa properti yang mengontrol bagaimana Tampilan Tumpukan akan mengatur kumpulan subviewnya:
- Sumbu – Menentukan apakah Tampilan Tumpukan mengatur subview baik Secara Horizontal atau Vertikal.
- Perataan – Mengontrol bagaimana subview diratakan dalam Tampilan Tumpukan.
- Distribusi – Mengontrol bagaimana subview berukuran dalam Tampilan Tumpukan.
- Penspasian – Mengontrol ruang minimal di antara setiap subview dalam Tampilan Tumpukan.
- Relatif Garis Besar – Jika
true
, spasi vertikal setiap subview akan berasal dari garis besarnya. - Margin Tata Letak Relatif – Menempatkan subview relatif terhadap margin tata letak standar.
Biasanya Anda akan menggunakan Tampilan Tumpukan untuk mengatur sejumlah kecil subview. Antarmuka Pengguna yang lebih kompleks dapat dibuat dengan menyarangkan satu atau beberapa Tampilan Tumpukan di dalam satu sama lain (seperti yang kami lakukan di Mulai Cepat UIStackView di atas).
Anda dapat lebih menyempurnakan tampilan UI dengan menambahkan batasan tambahan ke subview (misalnya untuk mengontrol Tinggi atau Lebar). Namun, perawatan harus diambil untuk tidak menyertakan batasan yang bertentangan dengan yang diperkenalkan oleh Tampilan Tumpukan itu sendiri.
Mempertahankan Tampilan Tersusun dan Konsistensi Sub Tampilan
Tampilan Tumpukan akan memastikan bahwa propertinya ArrangedSubviews
selalu merupakan subset propertinya Subviews
menggunakan aturan berikut:
- Jika subview ditambahkan ke
ArrangedSubviews
koleksi, subview akan secara otomatis ditambahkan keSubviews
koleksi (kecuali sudah menjadi bagian dari koleksi tersebut). - Jika subview dihapus dari
Subviews
koleksi (dihapus dari tampilan), subview juga dihapus dariArrangedSubviews
koleksi. - Menghapus subview dari
ArrangedSubviews
koleksi tidak menghapusnya dariSubviews
koleksi. Jadi tidak akan lagi ditata oleh Tampilan Tumpukan, tetapi masih akan terlihat di layar.
Koleksi ArrangedSubviews
selalu merupakan subset koleksi Subview
, namun urutan subview individu dalam setiap koleksi dipisahkan dan dikontrol oleh yang berikut:
- Urutan subview dalam
ArrangedSubviews
koleksi menentukan urutan tampilannya dalam tumpukan. - Urutan subview dalam
Subview
koleksi menentukan Z-Order (atau layering) mereka dalam tampilan kembali ke depan.
Mengubah Konten Secara Dinamis
Tampilan Tumpukan akan secara otomatis menyesuaikan tata letak subview setiap kali subview ditambahkan, dihapus, atau disembunyikan. Tata letak juga akan disesuaikan jika ada properti Tampilan Tumpukan yang disesuaikan (seperti Axis
).
Perubahan tata letak dapat dianimasikan dengan menempatkannya dalam Blok Animasi, misalnya:
// Animate stack
UIView.Animate(0.25, ()=>{
// Adjust stack view
RatingView.LayoutIfNeeded();
});
Banyak properti Tampilan Tumpukan dapat ditentukan menggunakan Kelas Ukuran dalam Papan Cerita. Properti ini akan dianimasikan secara otomatis adalah respons terhadap perubahan ukuran atau orientasi.
Ringkasan
Artikel ini telah membahas kontrol baru UIStackView
(untuk iOS 9) untuk mengelola serangkaian subview di tumpukan yang diatur secara horizontal atau vertikal di aplikasi Xamarin.iOS.
Ini dimulai dengan contoh sederhana menggunakan Stack Views untuk membuat UI, dan selesai dengan tampilan yang lebih rinci tentang Stack Views dan properti dan fiturnya.