Como implementar interfaces complexas e dinâmicas 

Desenvolvedor iOS Bruno Bilescky @bgondim 

Interfaces complexas e dinâmicas 

No content

No content

No content

No content

Página de detalhe do imóvel 

Página de detalhe do imóvel Baseada em CollectionView Alguns blocos são visíveis apenas em algumas situações 

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) } } 

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) } } 

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 

if indexPath.row == 3 { let mapOrigin = currentVisibleFrameForCellAtIndexPath(indexPath, collectionView: collectionView) delegate?.showMapInFullScreen(mapOrigin) } func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) 

No content

No content

No content

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) 

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 

Como facilitar a manutenção dessa estrutura e reduzir o tempo de implementação dessa funcionalidade? 

No content

Primeiro vamos separar em unidades cada um destes blocos 

Primeiro vamos separar em unidades cada um destes blocos Cada unidade irá conter todas as informações necessárias para exibir este bloco 

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 

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 } 

Compose by 

Separação de componentes em unidades 

Separação de componentes em unidades Cada unidade é responsável por exibir e configurar uma View. 

Separação de componentes em unidades Como cada View é implementada fica a critério do Desenvolvedor 

Separação de componentes em unidades Diversas formas de calcular a altura|largura da unidade 

Separação de componentes em unidades Suporte para: UICollectionView UITableView 

ComposingUnit 

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) 

ComposingUnit Struct ou Class Value Type ou Reference 

ComposingUnit DimensionUnit Valores absolutos, percentual de altura|largura do container, total do container +|- valor fixo, lógica customizada (altura de textos) 

ComposingContainer 

ComposingContainer var direction: ComposingContainerDirection var state: [ComposingUnit] 

ComposingContainer UICollectionView: ComposingCollectionView UITableView: ComposingTableView 

ComposingContainer Suporte automático para [inserção|remoção|atualização] de ComposingUnits UICollectionView: ComposingCollectionView UITableView: ComposingTableView 

ComposingContainer UICollectionView: ComposingCollectionView UITableView: ComposingTableView Suporte para diversos delegates como willDisplay, didDisplay, didSelect, canSelect, didHighlight através de Protocolos 

Hands on 

Tela utilizando Compose 

Tela utilizando Compose 

https://github.com/vivareal/compose (em breve) 

Dúvidas? [email protected] @bgondim (twitter) @bbilescky (slack) 

Obrigado!