Clever Geek Handbook

Menguasai Grid di SwiftUI





Kembang api, habr. Sebelum kita melanjutkan ke artikel, saya ingin berbagi dengan Anda rekaman dua pelajaran yang sangat berguna yang dilakukan oleh guru kami pada malam dimulainya kursus dasar dan lanjutan tentang pengembangan iOS kepada Anda secara gratis:



  1. Awal yang cepat untuk pengembangan iOS
  2. Membuat aplikasi Multiplatform Kotlin multi-threaded


Sekarang mari kita lanjutkan ke artikel.





Minggu ini saya ingin berbicara dengan Anda tentang Grids, salah satu fitur baru yang paling dinantikan di SwiftUI. Semua orang sangat menantikan alternatif UICollectionViewdi SwiftUI, dan akhirnya tahun ini muncul. SwiftUI memberikan kita LazyVGrid dan pandangan LazyHGrid yang dapat kita gunakan untuk membuat layout dengan grid item.



Dasar



LazyVGrid dan LazyHGrid adalah dua jenis Tampilan baru yang disediakan SwiftUI untuk membuat Tata Letak super kustom berdasarkan kisi item. Satu-satunya perbedaan di antara keduanya adalah sumbu isian. LazyVGrid mengisi ruang yang tersedia secara vertikal. LazyHGrid menempatkan anaknya secara horizontal. Sumbu adalah satu-satunya perbedaan antara dua tampilan ini. Oleh karena itu, semua yang Anda pelajari tentang LazyVGrid berlaku untuk LazyHGrid dan sebaliknya. Mari kita lihat contoh pertama. 



struct ContentView: View {
    private var columns: [GridItem] = [
        GridItem(.fixed(100), spacing: 16),
        GridItem(.fixed(100), spacing: 16),
        GridItem(.fixed(100), spacing: 16)
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(
                columns: columns,
                alignment: .center,
                spacing: 16,
                pinnedViews: [.sectionHeaders, .sectionFooters]
            ) {
                Section(header: Text("Section 1").font(.title)) {
                    ForEach(0...10, id: \.self) { index in
                        Color.random
                    }
                }

                Section(header: Text("Section 2").font(.title)) {
                    ForEach(11...20, id: \.self) { index in
                        Color.random
                    }
                }
            }
        }
    }
}






Dalam contoh di atas, kami membuat kisi tiga kolom di mana setiap kolom berukuran tetap 100pt. Saya akan menggunakan contoh ini untuk menjelaskan semua opsi konfigurasi yang tersedia untuk kita.



  1. Parameter columnsadalah larik yang menentukan kolom dalam tata letak kisi. Untuk mendeskripsikan kolom, SwiftUI memberi kita tipe GridItem . Kami akan membicarakannya nanti.
  2. Parameter alignmentmemungkinkan kita untuk menyelaraskan konten grid menggunakan enumerasi HorizontalAlignmentuntuk LazyVGrid dan VerticalAlignmentuntuk LazyHGrid . Bekerja sama seperti stack alignment.
  3. Parameter spacingmenentukan jarak antara setiap baris di dalam LazyVGrid atau jarak antara setiap kolom di dalam LazyHGrid .
  4. Parameter ini pinnedViewsmemungkinkan Anda menentukan opsi untuk menyematkan header dan footer bagian. Ini kosong secara default, yang berarti header dan footer berperilaku seperti konten dan menghilang saat pengguliran. Anda dapat mengaktifkan penyematan header dan footer, dalam hal ini keduanya akan tumpang tindih dengan konten dan menjadi terlihat secara permanen.


GridItem



Setiap kolom dalam kisi harus ditentukan dengan struktur GridItem. Jenisnya GridItemmemungkinkan kita untuk menentukan ukuran, kesejajaran dan jarak untuk setiap kolom. Mari kita lihat contoh kecilnya. 



private var columns: [GridItem] = [
    GridItem(.fixed(50), spacing: 16, alignment: .leading),
    GridItem(.fixed(75)),
    GridItem(.fixed(100))
]






Seperti yang Anda lihat, setiap kolom dapat memiliki opsi ukuran, jarak, dan perataan yang berbeda. Yang paling menarik di sini adalah ukurannya. Ada tiga cara untuk menentukan ukuran kolom di dalam kisi. Itu bisa diperbaiki, fleksibel, atau adaptif. Kolom



Tetap adalah yang paling jelas. Kisi menempatkan kolom sesuai dengan ukuran yang Anda tentukan. Dalam contoh sebelumnya, kami membuat tata letak tiga kolom di mana kolom diperbaiki masing-masing pada 50pt, 75pt, dan 100pt.



pilihan fleksibelmemungkinkan Anda untuk menentukan kolom yang mengembang atau menyusut tergantung pada ruang yang tersedia. Kami juga dapat memberikan ukuran kolom fleksibel minimum dan maksimum. Secara default menggunakan nilai minimum 10pt dan tidak dibatasi maksimum. 



private var columns: [GridItem] = [
    GridItem(.flexible(minimum: 250)),
    GridItem(.flexible())
]






Di sini kami membuat tata letak yang membagi ruang yang tersedia antara dua kolom fleksibel. Kolom pertama berukuran 250pt dari ukuran minimumnya, sedangkan kolom kedua memiliki semua sisa ruang yang tersedia.



Opsi paling menarik adalah adaptif . Opsi responsif memungkinkan kita menempatkan banyak elemen dalam ruang satu kolom fleksibel. Mari kita coba mencari tahu dengan sebuah contoh. 



private var columns: [GridItem] = [
    GridItem(.adaptive(minimum: 50, maximum: 100)),
    GridItem(.adaptive(minimum: 150))
]






Seperti yang Anda lihat, kami memiliki dua kolom responsif. Kolom pertama berisi beberapa elemen dengan ukuran minimal 50pt dan maksimal 100pt. Kolom responsif berguna ketika jumlah item dalam kolom perlu didasarkan pada ruang yang tersedia.



Kekuatan sebenarnya dari kisi adalah saat Anda mulai mencampur jenis kolom. Anda dapat membuat tata letak dua kolom, dengan yang pertama diperbaiki dan yang kedua responsif. Mari kita lihat bagaimana tampilannya. 



private var columns: [GridItem] = [
    GridItem(.fixed(100)),
    GridItem(.adaptive(minimum: 50))
]






Kesimpulan



Grid memungkinkan Anda membuat tata letak yang sangat kompleks dan menarik dengan mencampurkan berbagai jenis GridItem. Perlu dicatat bahwa semua perubahan pada jerat dapat dianimasikan. Saya harap Anda menikmati artikel ini. Jangan ragu untuk mengikuti saya di Twitter dan ajukan pertanyaan Anda terkait dengan topik ini. Terima kasih atas perhatiannya sampai jumpa!





Anda dapat mengetahui lebih lanjut tentang kursus kami menggunakan tautan di bawah ini:







More articles:


All Articles