Compose - Interfaces complexas e dinâmicas

Palestra do 26º CocoaheadsSP. Nesta palestra apresentamos sobre como estamos resolvendo o problema de interfaces complexas e dinâmicas no VivaReal. Também anunciamos que vamos deixar nossa solução open source

Transcript

1. Como implementar interfaces complexas e dinâmicas
2. Desenvolvedor iOS Bruno Bilescky @bgondim
3. Interfaces complexas e dinâmicas
8. Página de detalhe do imóvel
9. Página de detalhe do imóvel Baseada em CollectionView Alguns blocos são visíveis apenas em algumas situações
10. func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell switch indexPath.row { case 0: return pictureCell(collectionView, atIndexPath: indexPath) case 1: return contactStatusCell(collectionView, atIndexPath: indexPath) case 2: return infosCell(collectionView, atIndexPath: indexPath) case 3: return mapsCell(collectionView, atIndexPath: indexPath) case 4: if self.userPlaces.count > 0 { return userPlacesCell(collectionView, atIndexPath: indexPath) } else { return emptyUserPlacesCell(collectionView, atIndexPath: indexPath) } }
11. func collectionView(collectionView:UICollectionView, heightForItemAtIndexPath indexPath:NSIndexPath, withWidth:CGFloat) -> CGFloat switch atIndex.row { case 0: return CGSizeMake(collectionViewWidth, 232) case 1: if property.contactInfo != nil { return CGSizeMake(collectionViewWidth, 48) } else { return CGSizeZero } case 2: return CGSizeMake(collectionViewWidth, 227) case 3: return CGSizeMake(collectionViewWidth, 230) case 4: if userPlaces.count > 0 { return CGSizeMake(collectionViewWidth, 130+CGFloat(userPlaces.count*72)) } else { return CGSizeMake(collectionViewWidth, 178.0) } }
12. let collectionViewLayout: CollectionViewLayout = collectionView.collectionViewLayout as! CollectionViewLayout let bigInterface = isBigInterface(collectionView) if ! bigInterface || collectionViewLayout.numberOfColumns == 1 { return property.isNewDevelopment ? 9 : 10 } else { return property.isNewDevelopment ? 7 : 8 } func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
13. if indexPath.row == 3 { let mapOrigin = currentVisibleFrameForCellAtIndexPath(indexPath, collectionView: collectionView) delegate?.showMapInFullScreen(mapOrigin) } func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)
17. func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)
18. func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) X
19. Como facilitar a manutenção dessa estrutura e reduzir o tempo de implementação dessa funcionalidade?
21. Primeiro vamos separar em unidades cada um destes blocos
22. Primeiro vamos separar em unidades cada um destes blocos Cada unidade irá conter todas as informações necessárias para exibir este bloco
23. Primeiro vamos separar em unidades cada um destes blocos Cada unidade irá conter todas as informações necessárias para exibir este bloco A Collection então deverá exibir uma lista de unidades
24. let contactInfo: String? = "teste" let myPlaces: [String] = ["Place1","Place2","Place3"] var units: [ComposingUnit] = [] units.add { let header = HeaderUnit() let descUnit = DescriptionUnit() return [header, descUnit] } units.add(ifLet: contactInfo) { info in let unit = ContactInfoUnit(info: info) return unit } units.add(if: myPlaces.count > 0) { let unit = MyPlacesUnit(places: myPlaces) return unit }
25. Compose by
26. Separação de componentes em unidades
27. Separação de componentes em unidades Cada unidade é responsável por exibir e configurar uma View.
28. Separação de componentes em unidades Como cada View é implementada fica a critério do Desenvolvedor
29. Separação de componentes em unidades Diversas formas de calcular a altura|largura da unidade
30. Separação de componentes em unidades Suporte para: UICollectionView UITableView
31. ComposingUnit
32. ComposingUnit var identifier: String var heightUnit: DimensionUnit var widthUnit: DimensionUnit func configure(view: UIView) func reuseIdentifier()-> String func register(in collectionView: UICollectionView) func register(in tableView: UITableView)
33. ComposingUnit Struct ou Class Value Type ou Reference
34. ComposingUnit DimensionUnit Valores absolutos, percentual de altura|largura do container, total do container +|- valor fixo, lógica customizada (altura de textos)
35. ComposingContainer
36. ComposingContainer var direction: ComposingContainerDirection var state: [ComposingUnit]
37. ComposingContainer UICollectionView: ComposingCollectionView UITableView: ComposingTableView
38. ComposingContainer Suporte automático para [inserção|remoção|atualização] de ComposingUnits UICollectionView: ComposingCollectionView UITableView: ComposingTableView
39. ComposingContainer UICollectionView: ComposingCollectionView UITableView: ComposingTableView Suporte para diversos delegates como willDisplay, didDisplay, didSelect, canSelect, didHighlight através de Protocolos
40. Hands on
41. Tela utilizando Compose
42. Tela utilizando Compose
43. https://github.com/vivareal/compose (em breve)
44. Dúvidas? bruno.bilescky@vivareal.com @bgondim (twitter) @bbilescky (slack)
45. Obrigado!