Implementação de layout de grade em SwiftUI

O que é layout de grade?



Ao desenvolver uma interface de aplicativo, geralmente lidamos com uma representação bidimensional de elementos visuais. Existem muitos controles projetados para padronizar e simplificar o layout. Em termos de conceitos de desenvolvimento web, o CSS Working Group sugeriu o Grid Layout em 2017 como a melhor maneira de criar modelos de UI 2D.

imagem

No iOS 13 SDK, temos a capacidade de organizar os elementos linearmente VStack, HStack, ZStack, na forma de uma lista: Lista. Mas não há como definir a semântica da disposição dos elementos em um sistema de coordenadas bidimensional. Então decidimos criá-lo nós mesmos.

No iOS 14, a Apple introduziu sua implementação de grade, que discutiremos a seguir na seção Apple LazyVGrid / LazyHGrid.



Exemplos de interfaces com layout de grade



grid . , . Grid, UICollectionView, .

vertical_scroll

horizontal_scroll

, Grid Layout



Timetable



imagem

, , . grid , . Spans grid item .

, .



Flipboard



imagem

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





grid:

imagem

grid , , . , .



, , tracks. . , , .



Grid, . .



, , , . .



, : .



, . , , . grid (dense) .



Grid , , . scroll fill.



.



, , .





ExyteGrid — Grid, SwiftUI. , ExyteGrid:



- Strava



, grid. Grid. , , spans .

imagem



iOS



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

imagem



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 tem um modo de conteúdo: .fill onde a grade organiza os itens para preencher a visualização do contêiner sem ter que calcular manualmente o tamanho de cada item.

    Os conceitos dessas duas implementações são um tanto semelhantes, mas também diferem em muitos aspectos. Do lado do Apple Grid existe uma implementação nativa, com foco em um grande número de elementos, e do lado do ExyteGrid há mais funcionalidade e código-fonte aberto, no desenvolvimento do qual todos podem participar.


Fico feliz em vê-lo como usuário e contribuidor do repositório da biblioteca ExyteGrid .



Claro, há uma lista de recursos que ainda precisam ser feitos na seção do roteiro .




All Articles