em busca de um layout bonito e adaptativo: uicollectionview, auto layout e size classes

Em busca de um layout bonito e adaptativo: UICollectionView, Auto Layout e Size Classes

1

Rodrigo Borges SoaresiOS Developer @ VivaReal

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

2

Outline

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

3

Property Details Page

4

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

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

Custom Layouts

7

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

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

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

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

Demo

Size Classes

13

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

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

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

Demo

Multitasking

• Auto Layout + Size Classes = Multitasking!

17

Multitasking

• Auto Layout + Size Classes = Multitasking!

18

Multitasking

19

Multitasking

20

21

Demo

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

Estamos contratando! 👀

Obrigado!

Rodrigo Borges rodrigo.soares@vivareal.com.br @rdgborges linkedin.com/in/rdgborges