Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Swift India Conf 2019: Building Apps with Compositional Layout

Swift India Conf 2019: Building Apps with Compositional Layout

Speaker: Sowndharya Maheswaran, iOS Developer, Zoho

Twitter: https://twitter.com/_sowndharya/

Bio: An iOS developer working at Zoho. A huge fan of the data handling layer in a product. Loves writing frameworks. A math-aficionado who also spends a considerable amount of time on books on philosophy.

Abstract: Collection Views are the go-to components to build our layouts, however sophisticated they might appear to be. With iOS 13, Apple has provided with a hassle-free, (unpredicted) warning-free solution to arrange our views. In this talk, we’re going to explore all that you need to know about the new ‘Compositional Layout’ to implement interfaces ranging from simple lists to interactive windows.

Swift India

July 28, 2019
Tweet

More Decks by Swift India

Other Decks in Technology

Transcript

  1. class PagedCollectionViewLayout: UICollectionViewFlowLayout { static let CollectionViewWidth: CGFloat = screenWidth

    static let MinimumSpacingBetweenCells: CGFloat = 30 static let DistanceFromEdgeOfScreen: CGFloat = 55 override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint { guard let collectionView = self.collectionView else { return proposedContentOffset } let pageWidth = itemSize.width + PagedCollectionViewLayout.MinimumSpacingBetweenCells let rawPageValue = collectionView.contentOffset.x / pageWidth let currentPage = velocity.x > 0 ? floor(rawPageValue) : ceil(rawPageValue) let nextPage = velocity.x > 0 ? ceil(rawPageValue) : floor(rawPageValue) let pannedLessThanPage = abs(1 + currentPage - rawPageValue) > 0.3 let flicked = abs(velocity.x) > 0.3 var offset = proposedContentOffset if pannedLessThanPage && flicked { offset.x = nextPage * pageWidth } else { offset.x = round(rawPageValue) * pageWidth } return offset } } extension ViewController: UICollectionViewDataSource { func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: TextCell.reuseIdentifier, for: indexPath) as? InnerCollectionCell else { return UICollectionViewCell() } cell.collectionView.delegate = self cell.collectionView.dataSource = self return cell } }
  2. ! Caution The behavior of the UICollectionViewFlowLayout is not defined

    because: The item width must be less than the width of the UICollectionView minus the section insets left and right values, minus the content insets left and right values.
  3. //Abstraction Layers size = LayoutSize(width: .fractionalWidth(1.0), height: .absolute(44.0)) item =

    LayoutItem(layoutSize: size) group = LayoutGroup.horizontal(layoutSize: size, subitems: [item]) section = LayoutSection(group: group) layout = CompositionalLayout(section: section)
  4. Layout Dimension NSCollectionLayoutDimension fractionalWidth(_ fractionalWidth: CGFloat) fractionalHeight(_ fractionalHeight: CGFloat) absolute(_

    absoluteDimension: CGFloat) estimated(_ estimatedDimension: CGFloat) Axis Independent Four variants
  5. Layout Group NSCollectionLayoutGroup: NSCollectionLayoutItem horizontal(layoutSize: LayoutSize, subitems: [LayoutItem]) vertical(layoutSize: LayoutSize,

    subitems: [LayoutItem]) custom(layoutSize: LayoutSize, ………) The workhouse Little mini flow layouts
  6. 1.0 size = LayoutSize(width: .fractionalWidth(1.0), height: .absolute(44.0)) item = LayoutItem(layoutSize:

    size) group = LayoutGroup.horizontal(layoutSize: size, subitems: [item]) 1.0
  7. layout = CompositionalLayout(section: section) //Or layout = CompositionalLayout { (sectionIndex:

    Int, layoutEnvironment: LayoutEnvironment) -> LayoutSection? in group = // Based on section section = LayoutSection(group: group) return section } return layout
  8. layout = CompositionalLayout(section: section) //Or layout = CompositionalLayout { (sectionIndex:

    Int, layoutEnvironment: LayoutEnvironment) -> LayoutSection? in group = // Based on section section = LayoutSection(group: group) return section } return layout
  9. layout = CompositionalLayout(section: section) //Or layout = CompositionalLayout { (sectionIndex:

    Int, layoutEnvironment: LayoutEnvironment) -> LayoutSection? in group = // Based on section section = LayoutSection(group: group) return section } return layout
  10. // Orthogonal Scrolling Sections enum Section Orthogonal Scrolling Behavior case

    none case continuous case continuousGroupLeadingBoundary case paging case groupPaging case groupPagingCentered