Sobes.tech
Middle+

Rääkige iOS-i Composition Layoutist ja selle kasutamisest keerukate kasutajaliideste loomisel.

sobes.tech AI

Vastus AI-lt

Compositional Layout is a flexible mechanism for creating collection layouts (UICollectionView), introduced in iOS 13. It allows declarative description of section and item structures, simplifying the creation of complex and adaptive UIs.

Main advantages:

  • Building from blocks: The layout is assembled from smaller components (items, groups, sections).
  • Flexibility: Supports various layout types (lists, grids, groups with vertical/horizontal scrolling) within a single collection.
  • Adaptability: Easily adapts to changes in screen size and device orientation.
  • Declarativeness: The layout description is more understandable and expressive compared to traditional UICollectionViewFlowLayout.
  • Performance: Optimized for handling large numbers of elements.

Key components:

  • NSCollectionLayoutItem: Describes an element in the collection. Defines its size relative to its containing group.
  • NSCollectionLayoutGroup: Describes a group of elements. Can be vertical, horizontal, or custom. Defines its size relative to its containing section.
  • NSCollectionLayoutSection: Describes a section in the collection. Contains groups and manages their layout. Defines section behavior (e.g., scrolling).
  • NSCollectionLayoutBoundarySupplementaryItem: Used to add supplementary elements to a section (headers, footers).
  • UICollectionViewCompositionalLayout: The layout class that assembles sections into the final layout.

Example of creating a simple section with horizontal scrolling:

import UIKit

func createLayout() -> UICollectionViewLayout {
    // Item
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                         heightDimension: .fractionalHeight(1.0))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    // Group
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.9),
                                          heightDimension: .absolute(200))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
                                                    subitems: [item])
    group.interItemSpacing = .fixed(10) // Spacing between items in the group

    // Section
    let section = NSCollectionLayoutSection(group: group)
    section.orthogonalScrollingBehavior = .continuous // Horizontal scrolling
    section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10) // Insets
    section.interGroupSpacing = 10 // Spacing between groups

    // Layout
    let layout = UICollectionViewCompositionalLayout(section: section)
    return layout
}

To create more complex interfaces, you can combine different types of groups and sections, add decorative elements, and use supplementary items.

Compositional Layout is closely related to Diffable Data Sources (UICollectionViewDiffableDataSource), which simplifies data management and animations. Combining these two technologies allows creating modern, efficient, and easily maintainable user interfaces.