Share via

Tampilan Tumpukan di Xamarin.iOS

  • Artikel

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:

Diagram tata letak Tampilan Tumpukan

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:

Seret satu Tampilan Tumpukan Vertikal pada Pengontrol Tampilan

Di Pemeriksa Atribut, atur opsi berikut:

Mengatur opsi Tampilan Tumpukan

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:

Menata letak UI Tampilan Tumpukan

Konfigurasikan Tampilan Tumpukan Horizontal dengan opsi berikut:

Mengonfigurasi opsi Tampilan Tumpukan Horizontal

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:

Tampilan Tumpukan Outlet dan Tindakan

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 UIImageViewUIStackViewproperti '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):

Contoh eksekusi aplikasi

"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 Axissepanjang .

Dengan pengecualian Fill Alignment, Tampilan Tumpukan menggunakan properti subview IntrinsicContentSize untuk menghitung ukuran tampilan yang setimpal dengan yang diberikan Axis. Fill AlignmentUntuk , 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 adalah true, 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 ke Subviews koleksi (kecuali sudah menjadi bagian dari koleksi tersebut).
  • Jika subview dihapus dari Subviews koleksi (dihapus dari tampilan), subview juga dihapus dari ArrangedSubviews koleksi.
  • Menghapus subview dari ArrangedSubviews koleksi tidak menghapusnya dari Subviews 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.