This is your first encounter with modern cell registration and configuration. Var configuration = faultContentConfiguration()Ĭell.contentConfiguration = configuration Inside the first PetExplorerViewController extension block, add: You’ll learn about the new way to register cells. Now it’s time to create a collection view cell for the list. You’ll apply this layout to the collectionView.Īs you can see, the entire layout configuration is only two lines of code.Ĭall this method at the end of viewDidLoad() by adding: Next, you create a UICollectionViewCompositionalLayout with list sections, that uses the configuration.This gives you a layout configuration that looks like a table view. This configures the layout of the collectionView. UICollectionViewCompositionalLayout.list(using: configuration) Let configuration = UICollectionLayoutListConfiguration(appearance. Add the following method below the line with // MARK: - Functions: You can configure the appearance, colors, separators, headers and footers of the list with UICollectionLayoutListConfiguration. This enables you to create a list layout in one line of code, without the need for detailed knowledge of the UICollectionViewCompositionalLayout API. Static func list(using configuration: UICollectionLayoutListConfiguration) -> With iOS 13, Apple introduced UICollectionViewCompositionalLayout, a new API for building complex layouts. Every time you add a new feature to Get a Pet, you’ll add a block of code for layout first, then for presentation and finally for data. The sample code for this tutorial follows this pattern. Note: The UICollectionView architecture has a clean separation between layout, presentation and data. Later, when you’ll make the list expandable, you’ll discover the real benefits of using UICollectionView list. For a flat list, the advantages of UICollectionView list over UITableView may not be immediately apparent. This will be your first table view without using UITableView. You’ll create a flat list that shows the pet categories. In most cases, a list is easier to create and configure. If you need a table view in your app you can either use a list with the UICollectionView API or use the traditional UITableView. You can configure a list to display hierarchical data, with the possibility to collapse and expand list items or to look similar to a traditional table view. You can create a list by applying a configurable UICollectionViewCompositionalLayout to a section of a UICollectionView while using only a small amount of code. What is a List?Ī list is a table view lookalike in a UICollectionView. Now that you’ve explored the app’s structure, it’s time to learn about UICollectionView lists next. It’s a simple view controller class that displays the pet’s image, name and birth year. This method presents PetDetailViewController when the user selects an item. adoptedPets.įinally, in the PetExplorerViewController extension, you’ll find pushDetailForPet(_:withAdoptionStatus:). The enum Section represents sections of the UICollectionView for. You’ll use it later when configuring the UICollectionView data source. The DataSource typealias is for convenience. Pet.swift has all the data related to pets. Later, you’ll populate it with list items that represent pets and pet categories. PetExplorerViewController‘s collectionView is empty. Open PetExplorerViewController.swift to explore this file. Open Main.storyboard to check out this setup. When the app starts, it sets a navigation controller as the initial view controller using a PetExplorerViewController as the root view controller. When you complete this tutorial, you’ll be the proud owner of this virtual puppy. The completed app’s Pet Explorer screen shows the available and adopted pets: Then when you’ve found a pet you like, you can tap Adopt to adopt the pet. In the final version, you can browse through pet categories and select a pet to view its details. It’s part of Get a Pet, an app that displays pets available for adoption. Without further ado, it’s time to get started! Getting Startedĭownload the project materials using the Download Materials button at the top or bottom of this tutorial. If you haven’t used these before, check out Collection View and Diffable Data Source and Modern Collection Views with Compositional Layouts. Note: This tutorial assumes you’re familiar with UICollectionViewDiffableDataSource and UICollectionViewCompositionalLayout, introduced by Apple in iOS 13.
0 Comments
Leave a Reply. |