Skip to content

Latest commit

 

History

History
279 lines (168 loc) · 6.72 KB

README.md

File metadata and controls

279 lines (168 loc) · 6.72 KB
Raw

Compositional Layouts

Learning Objectives

By the end of this lesson, students should be able to:

  • Identify the different elements of a Compositional Layout
  • Implement Compositional Layouts using different sections

Why?

example1

example2

example3

example4

complex

When we need to create more complex layouts, we find ourselves in a situation where we need to play with combinations of table views and collection views.

This is doable but definitely increases the level of complexity. 🤯

In June 2019, Apple gave us an update for collection views: an API called Compositional Layout. 🧩

With this new API is easier than ever to create any layout you might need.

Exploring the project

  1. Download this starter project
  2. Run it, you should see something like this:

grid1

  1. Go to BasicGridSection.swift and find the itemSize constant.
  2. Change .fractionWidth(0.2) to .fractionalWidth(0.5)
  3. Run it again. What do you get now?

grid2

  1. Go back to where you changed the itemSize and now update .fractionWidth(0.5) to .fractionalWidth(1.0)
  2. Now find the groupSize constant and change .fractionalHeight(0.1) to .fractionalHeight(0.25)
  3. Run it again. What do you get now?

grid3

  1. Find the group and section constants.
  2. Update the axis to be vertical.
  3. After the section declaration add
section.orthogonalScrollingBehavior = .continuous
  1. Run it again. What do you get now?

A Challenge

From this point, see if you can get 4 rows of items scrolling horizontally.

challenge

Compositional Layout

Needs 3 elements:

  • NSCollectionLayoutItem - a single element inside a group
  • NSCollectionLayoutGroup- a single group within a section
  • NSCollectionLayoutSection - all groups combined

Example

A grid that scrolls horizontally

ex1

Item

ex2

Group

A group with 3 items. Axis: vertical.

ex3

Section

ex4

NSCollectionLayoutSize

Used to determine the size of an Item or a Group.

  • Fractional width: a fraction of its parent’s full width.
  • Fractional height: a fraction of its parent’s full height.
  • Absolute: a specific value for the size.
  • Estimate: a specific a value but the value can grow or shrink.
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))
The item is 100% the width and height of its parent. 
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))

let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(200), heightDimension: .absolute(300))
The item is 100% the width and height of the group. And the group has a width of 200 and a height of 300.

Creating Sections

A view controller can have an array of sections. These sections are then passed to the collection view layout.

This protocol can help all sections follow the same structure.

protocol Section {
    var numberOfItems: Int { get }
    func layoutSection() -> NSCollectionLayoutSection
    func configureCell(collectionView: UICollectionView, indexPath: IndexPath) -> UICollectionViewCell
}
numberOfItems - controls the total number of cells we are displaying.
layoutSection() - where we create and pass back everything needed for compositional layout configureCell() - called to create the cell for the section

Creating the title section

Work on TitleSection.swift

  • Create the number of items.
  • Create the constant to hold the title
  • Add an initializer

Step 1: Create an item size. Make it full width and height.

Step 2: Create an item and give it the item size we already have.

Step 3: Create the size of the group. Set it to the full width and make the height 70.

Step 4: Pass the group size and item to the group.

Step 5: Pass the group to the section.

Step 6 Create the cell and pass it to the collectionView

We need to add the new section to the array in our View Controller.

lazy var sections: [Section] = [
    TitleSection(title: "Grid Example"),
    BasicGridSection(),
    TitleSection(title: "Featured Categories"),
    TitleSection(title: "Last Month's Favorites")
]

Examine UICollectionViewDataSource to see how we are populating the collectionView.

Run the app after.

Number of sections is given by the count of our sections array. The number of items per section is the property we created in each section. The sections array along with indexPath.section is used to access the correct configureCell() method for that section.

setp1

In Class Activity

Complete the sections for FavoriteSection and FeaturedSection.

final

Lab + After Class

Create a View Controller for the subscription box app to display several sections.

  • Featured categories
  • Last month's favorite items

This view controller will become our home screen :)

You can see how it should look like in the online design.

Additional Resources

Today's activity was based on a chapter in Swift For Good Vol.1 by Craig Clayton (@thedevme)
WWDC - Advances in CollectionView Layout
Tutorial - Compositional Layouts & Diffable data sources
Ray Wenderlich tutorial App Store Layout - Article