UICollectionView 单元格锚点不起作用

Question

我正在尝试实现一个集合视图，其中单元格在底部对齐，并具有分页效果，其中“选定”单元格比其他单元格大。像这样：

到目前为止，我可以让效果起作用，但单元格在中间而不是底部对齐：

我尝试将单元格的 anchorPoint 属性设置为将单元格固定在 apply(_ layoutAttributes: UICollectionViewLayoutAttributes) 中的 (0, 1) 处，但这会导致单元格移动，因此它们似乎被截断。这最终看起来像这样：

如何将这些集合视图单元格固定在左下角，同时考虑分页期间发生的 CGAffine 缩放效果？

这是我的代码：

自定义 UICollectionViewFlowLayout：

import Foundation
import UIKit

/// The layout used in the cover flow.
class CoverFlowLayout: UICollectionViewFlowLayout {
  let activeDistance: CGFloat = 25
  let zoomFactor: CGFloat = (CoverFlowCell.selectedSize / CoverFlowCell.unselectedSize) - 1
  
  override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
    guard let collectionView = collectionView else { return super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity) }
    let itemSpace = itemSize.width + minimumInteritemSpacing
    var currentItemIdx = round(collectionView.contentOffset.x / itemSpace)
    
    let vX = velocity.x
    if vX > 0 {
      currentItemIdx += 1
    } else if vX < 0 {
      currentItemIdx -= 1
    }

    let nearestPageOffset = currentItemIdx * itemSpace
    return CGPoint(x: nearestPageOffset, y: 0)
  }
  
  override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    
    guard let collectionView = collectionView else { return nil }
    let rectAttributes = super.layoutAttributesForElements(in: rect)!.map { $0.copy() as! UICollectionViewLayoutAttributes }
    let visibleRect = CGRect(origin: collectionView.contentOffset, size: collectionView.frame.size)

    // Make the cells be zoomed when they reach the center of the screen
    for attributes in rectAttributes where attributes.frame.intersects(visibleRect) {
      let distance = (visibleRect.minX + 20) - attributes.frame.minX
      let normalizedDistance = distance / activeDistance
      
      if distance.magnitude < activeDistance {
        let zoom = 1 + zoomFactor * (1 - normalizedDistance.magnitude)
        attributes.transform = CGAffineTransform(scaleX: zoom, y: zoom)
      }
    }

    return rectAttributes
  }
  
  override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
    // Invalidate layout so that every cell get a chance to be zoomed when it reaches the center of the screen
    return true
  }

  override func invalidationContext(forBoundsChange newBounds: CGRect) -> UICollectionViewLayoutInvalidationContext {
    let context = super.invalidationContext(forBoundsChange: newBounds) as! UICollectionViewFlowLayoutInvalidationContext
    context.invalidateFlowLayoutDelegateMetrics = newBounds.size != collectionView?.bounds.size
    return context
  }
}

自定义 UICollectionView 单元格

import Foundation
import UIKit

class CoverFlowCell: UICollectionViewCell {
  
  static let unselectedSize: CGFloat = 185; // The size of the cell when it is not selected in the carousel
  static let selectedSize: CGFloat = 200;
  
  private var albumArt: UIImageView = {
    let art = UIImageView()
    art.backgroundColor = UIColor(hexString: "#ECF0F1")
    art.translatesAutoresizingMaskIntoConstraints = false
    art.layer.cornerRadius = 2
    return art
  }()
  
  /// Initializer
  override init(frame: CGRect) {
    super.init(frame: frame)
    setupUI()
    setupUIConstraints()
  }

  required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  override func awakeFromNib() {
    super.awakeFromNib()
  }
  
  private func setupUI() {
    contentView.addSubview(albumArt)
  }
  
  override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
    super.apply(layoutAttributes)

    //we must change the anchor point for propper cells positioning and scaling
    self.layer.anchorPoint.x = 0
    self.layer.anchorPoint.y = 1
  }

  private func setupUIConstraints() {
    NSLayoutConstraint.activate([
      self.albumArt.topAnchor.constraint(equalTo: topAnchor),
      self.albumArt.bottomAnchor.constraint(equalTo: bottomAnchor),
      self.albumArt.leftAnchor.constraint(equalTo: leftAnchor),
      self.albumArt.rightAnchor.constraint(equalTo: rightAnchor)
    ])
  }
}

我试过参考这个帖子： Changing my CALayer's anchorPoint moves the view

但是提供的解决方案并没有帮助对齐底部的单元格。

谢谢

Answer 1

添加另一个变换来平移 y 位置，在放大后向上滑动：

let y = //set a negative number here, to slide up by that many points
transform = CGAffineTransform(translationX: 0, y: y)

我也只会在“选择项目”方法中应用转换，而不是在布局属性方法中大惊小怪。然后当单元格被“取消选择”时，您只需将转换设置为 .identity 即可将其重置为正常布局。

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
  //set transforms
}

func collectionView(_ UICollectionView, didDeselectItemAt: IndexPath) {
  //set transform to .identity
}