Apa itu Tata Letak Kisi?

Saat mengembangkan antarmuka aplikasi, kami paling sering berurusan dengan representasi dua dimensi dari elemen visual. Ada banyak kontrol yang dirancang untuk menstandarisasi dan menyederhanakan tata letak. Dalam hal konsep pengembangan web, Kelompok Kerja CSS menyarankan Tata Letak Grid pada 2017 sebagai cara terbaik untuk membuat template 2D UI.



Di iOS 13 SDK, kami memiliki kemampuan untuk mengatur elemen secara linier VStack, HStack, ZStack, dalam bentuk list: List. Tetapi tidak ada cara untuk mendefinisikan semantik susunan elemen dalam sistem koordinat dua dimensi. Jadi kami memutuskan untuk membuatnya sendiri.

Di iOS 14, Apple memperkenalkan implementasi gridnya, yang akan kita diskusikan di bawah ini di bagian Apple LazyVGrid / LazyHGrid.

Contoh antarmuka dengan Tata Letak Grid

grid . , . Grid, UICollectionView, .





, Grid Layout

Timetable

, , . grid , . Spans grid item .

, .

Flipboard

, , . , — . Grid Layout , grid flow .rows .columns.

grid:



grid , , . , .

, , tracks. . , , .

Grid, . .

, , , . .

, : .

, . , , . grid (dense) .

Grid , , . scroll fill.

.

, , .

ExyteGrid — Grid, SwiftUI. , ExyteGrid:

- Strava

, grid. Grid. , , spans .

iOS

iOS? , grid, grid item. ExyteGrid layout, . SwiftUI grid.

Apple LazyVGrid/LazyHGrid

Apple LazyVGrid LazyVGrid iOS 14, ExyteGrid :

• Apple span . / .
• grid: / .
• ExyteGrid (grid packing): sparse, dense, , , .
• Apple Grid fade , ForEach. ExyteGrid , ID grid. ID GridGroup ForEach, SwiftUI (transition) .
• . Flexible Apple Grid , , .fr ExyteGrid .
• .adaptive Apple Grid .fit . Adaptive . , . Fit ExyteGrid , , .
• ExyteGrid gridCellOverlay gridCellBackground, custom view , . .
• Apple Grid , , ExyteGrid .
• ExyteGrid memiliki mode konten: .fill di mana kisi mengatur item untuk mengisi tampilan kontainer tanpa harus menghitung ukuran setiap item secara manual.
  
  Konsep dari kedua implementasi ini agak mirip, tetapi juga berbeda dalam banyak hal. Di sisi Apple Grid terdapat implementasi asli, fokus pada sejumlah besar elemen, dan di sisi ExyteGrid - lebih banyak fungsionalitas dan kode sumber terbuka, dalam pengembangannya siapa pun dapat berpartisipasi.

Senang melihat Anda sebagai pengguna dan kontributor bagi repositori perpustakaan ExyteGrid .

Tentu saja, ada daftar fitur yang harus dilakukan di bagian peta jalan .