Bagikan melalui

Ringkasan Bab 4. Menggulir tumpukan

  • Artikel

Catatan

Buku ini diterbitkan pada musim semi 2016, dan belum diperbarui sejak saat itu. Ada banyak dalam buku yang tetap berharga, tetapi beberapa materi sudah kedaluarsa, dan beberapa topik tidak lagi sepenuhnya benar atau lengkap.

Bab ini terutama dikhususkan untuk memperkenalkan konsep tata letak, yang merupakan istilah keseluruhan untuk kelas dan teknik yang Xamarin.Forms menggunakan untuk mengatur tampilan visual beberapa tampilan di halaman.

Tata letak melibatkan beberapa kelas yang berasal dari Layout dan Layout<T>. Bab ini berfokus pada StackLayout.

Catatan

Yang FlexLayout diperkenalkan dalam Xamarin.Forms 3.0 dapat digunakan dengan cara yang mirip StackLayout dengan tetapi dengan lebih banyak fleksibilitas.

Juga diperkenalkan dalam bab ini adalah ScrollViewkelas , Frame, dan BoxView .

Tumpukan tampilan

StackLayout berasal dari Layout<View> dan mewarisi properti Children jenis IList<View>. Anda menambahkan beberapa item tampilan ke koleksi ini, dan StackLayout menampilkannya dalam tumpukan horizontal atau vertikal.

Atur Orientation properti StackLayout ke anggota StackOrientation enumerasi, baik Vertical atau Horizontal. Default adalah Vertical.

Atur Spacing properti ke StackLayoutdouble nilai untuk menentukan penspasian antara anak-anak. Nilai defaultnya adalah 6.

Dalam kode, Anda dapat menambahkan item ke koleksi dalam atau perulangan seperti yang for ditunjukkan dalam sampel ColorLoop, atau Anda dapat menginisialisasi Children koleksi dengan daftar tampilan individual seperti yang ditunjukkan dalam ColorList.foreachStackLayoutChildren Anak-anak harus berasal dari View tetapi dapat mencakup objek lain StackLayout .

Menggulir konten

StackLayout Jika berisi terlalu banyak anak untuk ditampilkan di halaman, Anda dapat memasukkannya StackLayout ke dalam ScrollView untuk mengizinkan pengguliran.

Atur Content properti ScrollView ke tampilan yang ingin Anda gulir. Ini sering kali merupakan StackLayout, tetapi dapat berupa tampilan apa pun.

Atur Orientation properti ke ScrollView anggota ScrollOrientation properti, , Vertical, Horizontalatau Both. Default adalah Vertical. Jika konten adalah ScrollViewStackLayout, dua orientasi harus konsisten.

Sampel ReflectedColors menunjukkan penggunaan ScrollView dan StackLayout untuk menampilkan warna yang tersedia. Sampel juga menunjukkan cara menggunakan refleksi .NET untuk mendapatkan semua properti statis publik dan bidang Color struktur tanpa perlu mencantumkannya secara eksplisit.

Opsi Perluas

StackLayout Ketika tumpukan anak-anaknya, setiap anak menempati slot tertentu dalam tinggi StackLayout total yang tergantung pada ukuran anak dan pengaturan properti dannya HorizontalOptionsVerticalOptions. Properti ini adalah nilai jenis LayoutOptionsyang ditetapkan .

Struktur LayoutOptions mendefinisikan dua properti:

Untuk kenyamanan Anda, struktur ini LayoutOptions juga mendefinisikan delapan bidang jenis LayoutOptions baca-saja statis yang mencakup semua kombinasi dari dua properti instans:

Diskusi berikut melibatkan StackLayout dengan orientasi vertikal default. Horizontal StackLayout dianalogikan.

Untuk vertikal StackLayout, HorizontalOptions pengaturan menentukan bagaimana anak diposisikan secara horizontal dalam lebar StackLayout. Pengaturan AlignmentStart, Center, atau End menyebabkan anak tidak dibatasi secara horizontal. Anak menentukan lebarnya sendiri dan diposisikan di sebelah kiri, tengah, atau kanan StackLayout. Opsi Fill ini menyebabkan anak dibatasi secara horizontal dan mengisi lebar StackLayout.

Untuk vertikal StackLayout, setiap anak secara vertikal tidak dibatasi dan mendapatkan slot vertikal tergantung pada tinggi anak, dalam hal VerticalOptions ini pengaturan tidak relevan.

Jika vertikal StackLayout itu sendiri tidak dibatasi—yaitu jika pengaturannya VerticalOptions adalah Start, , Centeratau End, maka tingginya StackLayout adalah tinggi total anak-anaknya.

Namun, jika vertikal StackLayout dibatasi secara vertikal—jika pengaturannya VerticalOptions — Fillmaka tinggi StackLayout akan menjadi tinggi kontainernya, yang mungkin lebih besar dari tinggi total anak-anaknya. Jika demikian, dan jika setidaknya satu anak memiliki VerticalOptions pengaturan dengan Expands bendera true, maka ruang tambahan dalam dialokasikan secara merata di StackLayout antara semua anak tersebut dengan Expands bendera true. Tinggi total anak kemudian akan sama dengan tinggi StackLayout, dan Alignment bagian VerticalOptions pengaturan menentukan bagaimana anak diposisikan secara vertikal di slotnya.

Ini ditunjukkan dalam sampel VerticalOptionsDemo.

Bingkai dan BoxView

Kedua tampilan persegi panjang ini sering digunakan untuk tujuan presentasi.

Tampilan Frame menampilkan bingkai persegi panjang di sekitar tampilan lain, yang dapat menjadi tata letak seperti StackLayout. Frame mewarisi Content properti dari ContentView yang Anda atur ke tampilan yang akan ditampilkan dalam Frame. Frame transparan secara default. Atur tiga properti berikut untuk menyesuaikan tampilan bingkai:

  • Properti OutlineColor untuk membuatnya terlihat. Adalah umum untuk mengatur OutlineColor ke Color.Accent ketika Anda tidak tahu skema warna yang mendasar.
  • Properti HasShadow dapat diatur ke true untuk menampilkan bayangan hitam di perangkat iOS.
  • Atur Padding properti ke Thickness nilai untuk meninggalkan spasi antara bingkai dan konten bingkai. Nilai defaultnya adalah 20 unit di semua sisi.

Frame memiliki nilai default HorizontalOptions dan VerticalOptionsLayoutOptions.Fill, yang berarti akan Frame mengisi kontainernya. Dengan pengaturan lain, ukuran Frame didasarkan pada ukuran kontennya.

Frame ditunjukkan dalam sampel FramedText.

BoxView menampilkan area persegi panjang warna yang ditentukan oleh propertinyaColor.

BoxView Jika dibatasi (properti dan VerticalOptions memiliki HorizontalOptions pengaturan LayoutOptions.Filldefaultnya ), mengisi BoxView ruang yang tersedia untuknya. BoxView Jika tidak dibatasi (dengan HorizontalOptions dan LayoutOptions pengaturan Start, , Centeratau End), itu memiliki dimensi default 40 unit persegi. BoxView Dapat dibatasi dalam satu dimensi dan tidak dibatasi di dimensi lainnya.

Seringkali, Anda akan mengatur WidthRequest properti BoxView dan HeightRequest untuk memberinya ukuran tertentu. Ini diilustrasikan oleh sampel SizedBoxView.

Anda dapat menggunakan beberapa instans untuk menggabungkan BoxView dan beberapa Label instans dalam Frame untuk menampilkan warna tertentu, lalu menempatkan masing-masing tampilan ini dalam StackLayout untuk membuat daftar warna menarik yang ScrollView ditampilkan dalam sampel ColorBlocks:StackLayout

Cuplikan layar tiga kali blok warna

ScrollView di StackLayout?

Menempatkan StackLayout di ScrollView adalah umum, tetapi menempatkan ScrollView di StackLayout juga kadang-kadang nyaman. Secara teori, ini seharusnya tidak dimungkinkan karena anak-anak vertikal secara vertikal StackLayout tidak dibatasi. ScrollView Tetapi harus dibatasi secara vertikal. Ini harus diberi tinggi tertentu sehingga kemudian dapat menentukan ukuran anaknya untuk menggulir.

Caranya adalah dengan memberikan ScrollView anak dari StackLayoutVerticalOptions pengaturan FillAndExpand. Ini ditunjukkan dalam sampel BlackCat .

Sampel BlackCat juga menunjukkan cara menentukan dan mengakses sumber daya program yang disematkan di pustaka bersama. Ini juga dapat dicapai dengan Proyek Aset Bersama (SAP) tetapi prosesnya sedikit lebih sulit, seperti yang ditunjukkan oleh sampel BlackCatSap.