UICollectionView 02 - 布局和代理篇

文章按照顺序写的，之前文章写过的很多逻辑都会略过，建议顺序阅读，并下载源码结合阅读。

如果一个页面只能有一种布局，一种网格那这个控件就略显单调，同UITableView ， CollectionView 也支持多类型的布局，不同的section可以使用不同的size ，甚至不同的row也可以不同的size。这里演示下不同section使用不同size 。上一篇中我们直接使用flowLayout 设置的是整个 collectionView 的单元格大小，如果要动态设置则需要实现delegate 。UICollectionViewDelegate 中包含了cell的didSelectItemAt 、 willDisplay 等和 UITableView 类似的代理方法，如果需要动态设定layout的size之类的需要实现 UICollectionViewDelegateFlowLayout 代理。它集成自 UICollectionViewDelegate 并补充了一些布局方面的代理。

在 viewDidLoad 中去掉flowLayout相关的布局代码，加上代理。大概是这样

collectionView.dataSource = self
collectionView.delegate = self

collectionView.register(UINib(nibName: "BasicsHeaderView", bundle: nil), forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: BasicsHeaderView.reuseID)
collectionView.register(UINib(nibName: "BasicsFooterView", bundle: nil), forSupplementaryViewOfKind: UICollectionView.elementKindSectionFooter, withReuseIdentifier: BasicsFooterView.reuseID)

colors.append(DataManager.shared.generalColors(5))
colors.append(DataManager.shared.generalColors(3))
colors.append(DataManager.shared.generalColors(4))

增加代理方法


extension BasicsViewController02: UICollectionViewDelegateFlowLayout {
  // 设置itemsize
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    if indexPath.section == 0 {
      let itemWidth = (view.bounds.width - 4)/3
      return CGSize(width: itemWidth, height: itemWidth)
    }else if indexPath.section == 1 {
      return CGSize(width: view.bounds.width, height: 50)
    }else {
      let itemWidth = (view.bounds.width - 15)/2 
      return CGSize(width: itemWidth, height: itemWidth)
    }
  }
  // 设置sectionInset
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    if section == 0{
      return UIEdgeInsets(top: 0, left: 1, bottom: 0, right: 1)
    }else if section == 1{
      return .zero
    }else{
      return UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
    }
  }
  // 设置 minimumLineSpacing
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    if section == 0{
      return 1
    }else if section == 1{
      return 2
    }else{
      return 5
    }
  }
  // 设置 minimumInteritemSpacing
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    if section == 0{
      return 1
    }else if section == 1{
      return 2
    }else{
      return 5
    }
  }
  // 设置header size
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    let width = view.bounds.width
    if section == 0{
      return CGSize(width: width, height: 30)
    }else if section == 1{
      return CGSize(width: width, height: 50)
    }else{
      return CGSize(width: width, height: 70)
    }
  }
  // 设置footer size
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
    let width = view.bounds.width
    return CGSize(width: width, height: 20)
  }
  
}

看起来代码比较长，但都是一些基础代码。把上篇写的一些布局设置，分section修改了一下。这样就实现了对不同section，使用不同的布局，看下效果。

000

还有一些其他的代理和 UITableView 非常类似，比如说点击事件等，这里不再描述可以看一些有意思的东西。

比如我们想实现一些简单的点击动画，我点击了cell希望得到反馈，我们可以对其做一些放射变换。这几个代理方法可以很轻松的实现。

// 设置footer size
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
let width = view.bounds.width
return CGSize(width: width, height: 20)
}

func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
guard let cell = collectionView.cellForItem(at: indexPath) else {
  return
}
UIView.animate(withDuration: 0.1) {
  cell.transform = CGAffineTransform.identity.scaledBy(x: 0.8, y: 0.8)
}
}
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
guard let cell = collectionView.cellForItem(at: indexPath) else {
  return
}
UIView.animate(withDuration: 0.1) {
  cell.transform = CGAffineTransform.identity
}
}

看下效果：

000

从iOS 9 之后，在UICollectionView 中实现长按拖动排序变得非常的简单，系统提供的便利的API。

首先在viewDidLoad最后添加一个长按手势。

let longGesture = UILongPressGestureRecognizer(target: self, action: #selector(longPressed(_:)))
collectionView.addGestureRecognizer(longGesture)

以及他的实现

@objc
func longPressed(_ gesture: UILongPressGestureRecognizer) {
    let position = gesture.location(in: collectionView)
    switch gesture.state {
    case .began:
        if let indexPath = collectionView.indexPathForItem(at: position) {
            collectionView.beginInteractiveMovementForItem(at: indexPath)
        }
    case .changed:
        collectionView.updateInteractiveMovementTargetPosition(position)
    case .ended:
        collectionView.endInteractiveMovement()
    default:
        collectionView.cancelInteractiveMovement()
    }
}

基本都是在调用系统给我们写好的api，然后再实现两个代理方法

func collectionView(_ collectionView: UICollectionView, canMoveItemAt indexPath: IndexPath) -> Bool {
    return true
}

func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
    // 修改数据源
    let removedColor = self.colors[sourceIndexPath.section][sourceIndexPath.row]
    self.colors[sourceIndexPath.section].remove(at: sourceIndexPath.row)
    self.colors[destinationIndexPath.section].insert(removedColor, at: destinationIndexPath.row)
}

ok了，你已经实现了一个长按拖动排序的功能，这在之前是非常困难的一件事我们需要长按隐藏cell对cell进行截图，然后移动的时候动态监测移动的位置，动态移动很多cell。那个逻辑想都不想想。先来看下效果。这里gif是在模拟器上录制的，感觉卡卡的，但是在真机上一点都不卡，而且每次移动到一个cell上会有一点笑震动的触感。

000

还有长按弹出菜单。是实现shouldShowMenuForItemAt 、 canPerformAction 、 performAction 这几个代理。也非常简单，这个不再赘述。

系统的UICollectionViewFlowLayout 就写这么多吧，后面把中心放到自定义布局上。这才是UICollectionView 强大之处。

UICollectionView 02 - 布局和代理篇

目录

你可能感兴趣的:(UICollectionView 02 - 布局和代理篇)