如何解决UICollectionView 单元格锚点不起作用
我正在尝试实现一个集合视图,其中单元格在底部对齐,具有分页效果,其中“选定”单元格比其余单元格大。像这样:
截至目前,我能够使效果起作用,但单元格在中间而不是底部对齐:
我尝试设置单元格的 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
但是提供的解决方案并没有帮助对齐底部的单元格。
谢谢
解决方法
添加另一个变换来平移 y 位置,在放大后将其向上滑动:
let y = //set a negative number here,to slide up by that many points
transform = CGAffineTransform(translationX: 0,y: y)
我也只会在“did select item”方法中应用转换,而不是在布局属性方法中大惊小怪。然后当单元格被“取消选择”时,您只需将转换设置为 .identity 即可将其重置回正常布局。
func collectionView(_ collectionView: UICollectionView,didSelectItemAt indexPath: IndexPath) {
//set transforms
}
func collectionView(_ UICollectionView,didDeselectItemAt: IndexPath) {
//set transform to .identity
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。