专栏首页学海无涯iOS开发之UICollectionViewCompositionalLayout

iOS开发之UICollectionViewCompositionalLayout

日常开发中最常用的控件莫过于 UITableView 和 UICollectionView,随着应用越来越复杂,以前的 UICollectionViewFlowLayout 布局已经满足不了需求,而自定义布局又过于复杂,所以在 iOS 13 中 Apple 为 UICollectionView 推出了组合布局 UICollectionViewCompositionalLayout,这对于 UICollectionView 是一个全新的升级,它将赋予 UICollectionView 更多的可能性。

特点

  • Composable:可组合,使用简单的组合成复杂的。
  • Flexible:灵活,可以用组合布局来写任何的布局。
  • Fast:运行速度快。

概念

UICollectionViewCompositionalLayout 是在已有的 Item 和 Section 的基础上,增加了一个 Group 的概念。多个 Item 组成一个 Group ,多个 Group 组成一个 Section,层级关系变为:Item -> Group -> Section -> Layout

  • 粗粒度

整体.png

  • 细粒度

细节.jpg

布局核心

NSCollectionLayoutSize

决定了一个元素的大小。表达一个元素的 Size 有三种方法:

  • fractional:表示一个元素相对于他的父视图的比例。(Item 的父视图是 Group,Group 的父视图是 Section) 。
// 占据Group宽和高各25%
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.25), heightDimension: .fractionalHeight(0.25))
  • absolute:表示将元素的宽或者高写成固定一个值。
let widthDimension = NSCollectionLayoutDimension.absolute(200)
let heightDimension = NSCollectionLayoutDimension.absolute(200)
  • estimated:表示预估高度。一般用于自适应大小,会根据自动布局决定元素的大小。
let widthDimension = NSCollectionLayoutDimension.estimated(200)
let heightDimension = NSCollectionLayoutDimension.estimated(200)

NSCollectionLayoutItem

描述一个 Item 的布局,通过 NSCollectionLayoutSize 决定一个 Item 的大小,定义如下:

class NSCollectionLayoutItem {
    convenience init(layoutSize: NSCollectionLayoutSize)
    var contentInsets: NSDirectionalEdgeInsets
}

NSCollectionLayoutGroup

  • Group 是新引入的组成布局的基本单元,它有三种形式
    • 水平(horizontal)
    • 垂直(vertical)
    • 自定义(custom)
  • Group 的大小页需要通过 NSCollectionLayoutSize 决定。如果是自定义布局,需要传入一个 NSCollectionLayoutGroupCustomItemProvider 来决定这个 Group 中 Item 的布局方式。
  • 通过 Group 可以在同一个 Section 中实现不同的布局方式。定义如下:
class NSCollectionLayoutGroup: NSCollectionLayoutItem { 
    class func horizontal(layoutSize: NSCollectionLayoutSize, subitems: [NSCollectionLayoutItem]) -> Self 
    class func vertical(layoutSize: NSCollectionLayoutSize, subitems: [NSCollectionLayoutItem]) -> Self 
    class func custom(layoutSize: NSCollectionLayoutSize, itemProvider: NSCollectionLayoutGroupCustomItemProvider) -> Self
}

NSCollectionLayoutSection

和之前 UICollectionView 的 Section 的定义类似,定义如下:

class NSCollectionLayoutSection {
    convenience init(layoutGroup: NSCollectionLayoutGroup) 
    var contentInsets: NSDirectionalEdgeInsets
}

基本使用

使用步骤

  1. 创建 Item 的 NSCollectionLayoutSize,然后创建 NSCollectionLayoutItem。
  2. 创建 Group 的 NSCollectionLayoutSize,然后根据 Item 创建 NSCollectionLayoutGroup。
  3. 根据 Group 创建 NSCollectionLayoutSection。
  4. 根据 Section 创建 UICollectionViewCompositionalLayout。

案例一

func generateLayout() -> UICollectionViewCompositionalLayout {
    //1 构造Item的NSCollectionLayoutSize
    let itemSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(0.25),
        heightDimension: .fractionalHeight(1.0))
    
    // 2 构造NSCollectionLayoutItem
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    
    // 3 构造Group的NSCollectionLayoutSize
    let groupSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1.0),
        heightDimension: .fractionalWidth(0.1))
    
    // 4 构造NSCollectionLayoutGroup
    let group = NSCollectionLayoutGroup.horizontal(
        layoutSize: groupSize,
        subitems: [item])
    
    // 5 构造NSCollectionLayoutSection
    let section = NSCollectionLayoutSection(group: group)
    
    // 6 构造UICollectionViewCompositionalLayout
    let layout = UICollectionViewCompositionalLayout(section: section)
    
    return layout
}

案例二

func generateLayout() -> UICollectionViewCompositionalLayout {
    // 顶部Item
    let topItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalWidth(9/16))
    let topItem = NSCollectionLayoutItem(layoutSize: topItemSize)
    topItem.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
    
    // 底部Item
    let bottomItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5), heightDimension: .fractionalHeight(1.0))
    let bottomItem = NSCollectionLayoutItem(layoutSize: bottomItemSize)
    bottomItem.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
    
    // 底部Group
    let bottomGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalWidth(0.5))
    let bottomGroup = NSCollectionLayoutGroup.horizontal(layoutSize: bottomGroupSize, subitem: bottomItem, count: 2)
    
    // 组合两个Group
    let fullGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalWidth(9/16 + 0.5))
    let nestedGroup = NSCollectionLayoutGroup.vertical(layoutSize: fullGroupSize, subitems: [topItem, bottomGroup])
    
    // Section
    let section = NSCollectionLayoutSection(group: nestedGroup)
    
    // Layout
    let layout = UICollectionViewCompositionalLayout(section: section)
    
    return layout
}

间距

间距主要分 3 种:Item 与 Item 之间,Group 与 Group 之间,Section 与 Section 之间,主要有两种设置方式:

contentInsets

Item、Group 和 Section 都有一个属性 contentInsets 用于设置边距。

Item的contentInsets

  • 设置语法
item.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
  • 当给 Item 设置contentInsets后的示意图:

Item 设置contentInsets.png

灰色区域是 Item,红色框是 Item 的边界,红色的上下左右边距就是设置的 contentInsets。

Group的contentInsets

  • 设置语法
group.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
  • 当给 Group 设置contentInsets后的示意图:

Group 设置contentInsets.png

灰色区域是 Item,红色框是 Item 的边界,蓝色框是 Group 的边界,蓝色的上下左右边距就是设置的 contentInsets。

Section的contentInsets

  • 设置语法
section.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)
  • 当给 Section 设置contentInsets后的示意图:

Section 设置contentInsets.png

灰色区域是 Item,红色框是 Item 的边界,蓝色框是 Group 的边界,绿色框是 Section 的边界,绿色的上下左右边距就是设置的 contentInsets。

为了使整体的上下左右边距一样,通常需要同时设置 Item 和 Group 的contentInsets

Spacing

可以直接给 Group 和 Section 设置相应的 Spacing 以达到设置 Item 和 Group 之间间距的目的,但这种需要精确计算间距的值,因为间距会挤占 Item 和 Group 的空间。

// Item Spacing
group.interItemSpacing = .fixed(8) // 也可以使用.flexible(<spacing>)来决定 Item 之间的最佳间距
group.edgeSpacing = NSCollectionLayoutEdgeSpacing(leading: .fixed(8), top: .fixed(8), trailing: .fixed(8), bottom: .fixed(8))

// Group Spacing
section.interGroupSpacing = 8

NSCollectionLayoutBoundarySupplementaryItem

附加视图,一般用于设置头部和尾部。

let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(44))

let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize, elementKind: "header", alignment: .top)

let footerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(44))

let footer = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: footerSize, elementKind: "footer", alignment: .bottom)

// pinToVisibleBounds决定是否悬停
header.pinToVisibleBounds = true

section.boundarySupplementaryItems = [header, footer]

使用之前需要注册,下面会讲解。

NSCollectionLayoutAnchor

在 Item 中,可能需要给他加上小红点或者未读消息数,在 UICollectionViewCompositionalLayout 中,可以通过 NSCollectionLayoutSupplementaryItem 和 NSCollectionLayoutAnchor 这两个类来去定义一个这样的视图。

  • 实现一个UICollectionReusableView
class BadgeView: UICollectionReusableView {
    static let reuseIdentifier = "badge"
    let imageView = UIImageView(image: UIImage(systemName: "heart.fill"))
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        configure()
    }
}
  • 注册SupplementaryView
collectionView.register(
            BadgeView.self,
            forSupplementaryViewOfKind: "badge",
            withReuseIdentifier: BadgeView.reuseIdentifier)
  • 设置SupplementaryView
dataSource.supplementaryViewProvider = {
            (collectionView: UICollectionView, kind: String, indexPath: IndexPath)
            -> UICollectionReusableView? in
        
            if let badgeView = collectionView.dequeueReusableSupplementaryView(
                ofKind: kind,
                withReuseIdentifier: BadgeView.reuseIdentifier,
                for: indexPath) as? BadgeView {
                return badgeView
            } else {
                fatalError("Cannot create Supplementary")
            }
        }
  • 设置Badge
let badgeAnchor = NSCollectionLayoutAnchor(edges: [.top, .trailing],
fractionalOffset: CGPoint(x: 0.5, y: -0.5))

let badgeSize = NSCollectionLayoutSize(widthDimension: .absolute(16),
heightDimension: .absolute(16))

let badge = NSCollectionLayoutSupplementaryItem(layoutSize: badgeSize, elementKind: "badge", containerAnchor: badgeAnchor)

let item = NSCollectionLayoutItem(layoutSize: itemSize, supplementaryItems: [badge])
  • 效果

效果.jpg

滚动Section

通过设置 Section 的 orthogonalScrollingBehavior 参数,可以实现 Section 的不同的滚动方式。

  • 滚动类型
public enum UICollectionLayoutSectionOrthogonalScrollingBehavior : Int {
    // 默认行为,根据configuration.scrollDirection设置的主轴布局
    case none = 0    
    case continuous = 1 
    case continuousGroupLeadingBoundary = 2
    case paging = 3
    case groupPaging = 4
    case groupPagingCentered = 5
}
  • 设置滚动
section.orthogonalScrollingBehavior = .continuous

总结

UICollectionViewCompositionalLayout 彻底颠覆了 UICollectionView 的布局体验,大大拓展了 UICollectionView 的可塑性,甚至从某种程度上来说,UI 开发中的复杂布局已经非它莫属。

源代码

UICollectionViewCompositionalLayout案例

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Swift学习之5.1和5.2新特性

    Swift 5.1 内置于 Xcode 11,新增了很多新特性,比较重要的有以下几个。

    YungFan
  • Swift 5.1 新特性

    Swift 5.1 内置于 Xcode 11,新增了很多新特性,比较重要的有以下几个。

    YungFan
  • iOS开发之DiffableDataSource

    在 iOS 13 中 Apple 为 UITableView 和 UICollectionView 引入了 DiffableDataSource,让开发者可以更...

    YungFan
  • Excel单元格内如何换行,这几招快拿小本本记下来

    Excel单元格如何换行?我们在日常的数据统计中经常会遇到的问题。我们会遇到单元格太小导致输入的内容无法显示的情况。是不是苦恼?其实我们可以通过自动换行的方式将...

    高效办公
  • 残酷的移动互联网:只有一个入口远远不够

    随着3G/4G和智能手机的普及,移动互联网已经来到我们身边,也给我们带来了无比的便利。然而,身处移动互联网的企业们都普遍比较焦虑,这是因为移动互联网颠覆了很多...

    腾讯研究院
  • 失败案例:ESP8266监测微信公众号文章更新

    首先要说的是,一个人的思维是容易成习惯的,很容易选择性的忽视一些东西。例如,ESP8266是一个能上网的物联网芯片,而我是一个硬件出身的工程师,所以我在想问题...

    MCU起航
  • go 错误处理总结

    在使用http 接口的时候碰到返回错误 但是不知道错误在哪一行的时候可以使用这种方式。

    solate
  • three.js 利用uv和ThreeBSP制作一个快递柜

    最近有three网友,问我要不要学习blender,其实我感觉学习一下也无妨,不过花大量时间精通,尚可不必,术业有专攻给别人留一条路吧,哈哈。那我我们就是用Th...

    郭先生的博客
  • 解决ptlib库ptlib_config.h不存在的问题

    Qt君
  • SpringBoot学习笔记(十五:OAuth2 )

    开放授权(Open Authorization,OAuth)是一种资源提供商用于授权第三方应用代表资源所有者获取有限访问权限的授权机制。由于在整个授权过程中,第...

    三分恶

扫码关注云+社区

领取腾讯云代金券