Upload
rodrigo-borges
View
416
Download
0
Embed Size (px)
Citation preview
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 • [email protected] • @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 [email protected] @rdgborges linkedin.com/in/rdgborges