Este documento discute o uso de UICollectionView, Auto Layout e Size Classes para criar layouts adaptativos no iOS. É apresentado um exemplo de uma Property Details Page que usa UICollectionView com layout customizado e se adapta a diferentes tamanhos de tela usando Size Classes e Auto Layout.

1. Em busca de um layout bonito e
adaptativo: UICollectionView,
Auto Layout e Size Classes
1
Rodrigo Borges Soares
iOS Developer @ VivaReal

2. Introdução
• iOS Developer @ VivaReal
• Mobile Developer & Co-Founder @ Meatless
• rodrigo.soares@vivareal.com
• @rdgborges
• linkedin.com/in/rdgborges
2

3. Outline
1. Property Details Page do VivaReal
2. UICollectionView e Custom Layouts
3. Size Classes e Auto Layout
4. Multitasking
3

4. Property Details Page
4

5. UICollectionView
• UICollectionView permite criar layouts customizáveis
• Funcionamento semelhante a UITableViews: data sources e delegates
• O UICollectionViewLayout define tamanho, posição e outros atributos
das células
5

6. Custom Layouts
• UICollectionViewFlowLayout é um layout padrão que organiza as
células como um grid
• Para layouts mais complexos: Custom Layouts
• Segundo a Apple, Custom Layouts são necessários se:
1. O layout não se parece com um grid, um layout baseado em linhas
ou tem scroll em mais de 1 direção
2. Você precisa mudar as posições das células constantemente
6

7. Custom Layouts
7

8. Custom Layouts
• A collection view chama alguns métodos
do seu custom layout para saber onde
posicionar as células.
1. prepareLayout
2. collectionViewContentSize
3. layoutAttributesForElementsInRect
8

9. Custom Layouts
• Método prepareLayout
• Determinar a posição das células
• Calcular o mínimo de informações
para saber a área total do conteúdo
(height, width)
• Método invalidateLayout reinicia o
processo de layout chamando o
prepareLayout novamente
9

10. Custom Layouts
• Método collectionViewContentSize
• Retorna o tamanho da área de
conteúdo da collection view
• Calculado com base nas informações
obtidas no prepareLayout
10

11. Custom Layouts
• Método layoutAttributesForElementsInRect:
• Retorna os atributos das células que estão
dentro do retângulo passado como
parâmetro
• UICollectionViewLayoutAttributes
11

12. 12
Demo

13. Size Classes
13
• Não faz parte da collection view
• Aparece apenas no iPad
• Size Classes e Auto Layout FTW!

14. Size Classes
• Com Size Classes, você cria a interface como será vista na maioria dos tamanhos de
tela e atualiza apenas as partes que mudam quando o tamanho da tela muda
14
Any Width, Any Height Regular Width, Regular Height

15. Size Classes
• Uma View pode ser computada ou não de acordo
com as Size Classes
• No nosso caso, a View lateral só é computada pelo
iOS quando estiver no iPad (Regular Width &
Regular Height)
• Quando uma View não é “instalada” em uma Size
Class, ela não é adicionada à hierarquia de Views
do layout
15

16. 16
Demo

17. Multitasking
• Auto Layout + Size Classes = Multitasking!
17

18. Multitasking
• Auto Layout + Size Classes = Multitasking!
18

19. Multitasking
19

20. Multitasking
20

21. 21
Demo

22. Referências
1. Projeto Demo. https://github.com/rdgborges/VivaRealPDPExample
2. UICollectionViews Tutorial. http://www.raywenderlich.com/78550/beginning-ios-
collection-views-swift-part-1
3. UICollectionView Custom Layout Tutorial. http://www.raywenderlich.com/107439/
uicollectionview-custom-layout-tutorial-pinterest
4. Creating Custom Layouts. https://developer.apple.com/library/ios/documentation/
WindowsViews/Conceptual/CollectionViewPGforIOS/CreatingCustomLayouts/
CreatingCustomLayouts.html
5. About Designing for Multiple Size Classes. https://developer.apple.com/library/ios/
recipes/xcode_help-IB_adaptive_sizes/chapters/AboutAdaptiveSizeDesign.html
22

23. 23
Estamos contratando! 👀
Obrigado!
Rodrigo Borges
rodrigo.soares@vivareal.com.br
@rdgborges
linkedin.com/in/rdgborges