集合视图布局改进——WWDC 2019

集合视图布局改进

1、那么改进后的优点有哪些？
答：组合的 、灵活的、快速的

2、基础了解
2.1>通过指定三个核心组件创建列表：item、group和section

// Create a List by Specifying Three Core Components: Item, Group and Section
let size = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(44.0))
let item = NSCollectionLayoutItem(layoutSize: size)
let group = NSCollectionLayoutGroup.horizontal(layoutSize: size, subitems: [item])
let section = NSCollectionLayoutSection(group: group)
let layout = UICollectionViewCompositionalLayout(section: section)

item、group、section、layout之间的关系

2.2>创建NSCollectionLayoutDimension

class NSCollectionLayoutSize {
  init(widthDimension:NSCollectionLayoutDimension,heightDimension:NSCollectionLayoutDimension)
}

class NSCollectionLayoutDimension {
  //宽高和父视图宽高的比例
  class func fractionalWidth(_ fractionalWidth: CGFloat) -> Self
  class func fractionalHeight(_ fractionalHeight: CGFloat) -> Self
  //绝对值
  class func absolute(_ absoluteDimension: CGFloat) -> Self
  //预估值
  class func estimated(_ estimatedDimension: CGFloat) -> Self
}

2.3>创建NSCollectionLayoutItem

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

2.4>创建NSCollectionLayoutGroup

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
}

2.5>创建NSCollectionLayoutSection

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

2.6>创建顶级布局类——UICollectionViewCompositionalLayout

class UICollectionViewCompositionalLayout: UICollectionViewLayout {
  init(section: NSCollectionLayoutSection)
  init(sectionProvider: @escaping SectionProvider)
}

3、布局改进实例解析
查看官方demo

改进后的集合可以实现不同section使用不同布局

4、高级布局
补充项目（supplementary item)和decoration item（装饰项目）
4.1>用NSCollectionLayoutSupplementaryItem实现badge、headers、footers功能
例如：实现每个item右上角有badge功能

//.absolute：设置绝对值；.estimated：设置预估值
let badgeAnchor = NSCollectionLayoutAnchor(edges: [.top, .trailing],
                                           fractionalOffset: CGPoint(x: 0.3, y: -0.3))
let badgeSize = NSCollectionLayoutSize(widthDimension: .absolute(20),
                                       heightDimension: .absolute(20))
let badge = NSCollectionLayoutSupplementaryItem(layoutSize: badgeSize,
                                                elementKind: "badge",
                                                containerAnchor: badgeAnchor)
let item = NSCollectionLayoutItem(layoutSize: itemSize, supplementaryItems: [badge])

4.2>添加页眉（headers）页脚（footers）

let header = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize,
                                                         elementKind: "header",
                                                         alignment: .top)
let footer = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: footerSize,
                                                         elementKind: "footer",
                                                         alignment: .bottom)
header.pinToVisibleBounds = true //固定到可见边界
section.boundarySupplementaryItems = [header, footer]

4.3> Section背景装饰图

// Section Background Decoration Views
let background = NSCollectionLayoutDecorationItem.background(elementKind: "background")
section.decorationItems = [background]
// Register Our Decoration View with the Layout
layout.register(MyCoolDecorationView.self, forDecorationViewOfKind: "background")

添加装饰图效果

5、组合布局（NSCollectionLayoutGroup）
5.1>布局组的使用

// Nested NSCollectionLayoutGroup
let leadingItem = NSCollectionLayoutItem(layoutSize: leadingItemSize)
let trailingItem = NSCollectionLayoutItem(layoutSize: trailingItemSize)
let trailingGroup = NSCollectionLayoutGroup.vertical(layoutSize: trailingGroupSize)
subitem: trailingItem,
count: 2)
let containerGroup = NSCollectionLayoutGroup.horizontal(layoutSize: containerGroupSize,
                                                        subitems: [leadingItem,
                                                                   trailingGroup])

组合布局效果图。一个group包含3个item

5.2>实现嵌套Collection View效果
只需一行代码

// Orthogonal Scrolling Sections
section.orthogonalScrollingBehavior = .continuous

图片.png

section的orthogonalScrollingBehavior属性有多个枚举值

// Orthogonal Scrolling Sections
enum UICollectionLayoutSectionOrthogonalScrollingBehavior: Int {
    case none
    case continuous
    case continuousGroupLeadingBoundary
    case paging
    case groupPaging
    case groupPagingCentered
}