Swift：将Caroussel效果移到屏幕左侧而不是中心

编程问答 2022-06-12

问题描述

我已经在 tvOS应用中达到了这种效果：

enter image description here

enter image description here

enter image description here

这基本上是轮播效果：当用户滚动浏览收集项目时，突出显示的项目显示在中央（具有额外的缩放效果）。

这是通过以下代码实现的：

class ZoomAndSnapFlowLayout: UICollectionViewFlowLayout {

let activedistance: CGFloat = 200
let zoomFactor: CGFloat = 0.3

override init() {
    super.init()
    scrollDirection = .horizontal
    minimumLinespacing = 40
    minimumInteritemSpacing = 20
    itemSize = CGSize(width: 150,height: 150)
}

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

override func prepare() {
    guard let collectionView = collectionView else { fatalError() }
    let verticalInsets = (collectionView.frame.height - collectionView.adjustedContentInset.top - collectionView.adjustedContentInset.bottom - itemSize.height) / 2
    let horizontalInsets = (collectionView.frame.width - collectionView.adjustedContentInset.right - collectionView.adjustedContentInset.left - itemSize.width) / 2
    sectionInset = UIEdgeInsets(top: verticalInsets,left:horizontalInsets,bottom: verticalInsets,right: horizontalInsets)
    super.prepare()
}

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)

          for attributes in rectAttributes where attributes.frame.intersects(visibleRect) {
             let distance = visibleRect.midX - attributes.center.x
             let normalizeddistance = distance / activedistance

             if distance.magnitude < activedistance {
                 let zoom = 1 + zoomFactor * (1 - normalizeddistance.magnitude)
                 attributes.transform3D = CATransform3DMakeScale(zoom,zoom,1)
                 attributes.zIndex = Int(zoom.rounded())
             }
         }
 

    print("rectAttributes: ",rectAttributes)
    return rectAttributes
}

override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint,withScrollingVeLocity veLocity: CGPoint) -> CGPoint {
    guard let collectionView = collectionView else { return .zero }
    let targetRect = CGRect(x: proposedContentOffset.x,y: 0,width: collectionView.frame.width,height: collectionView.frame.height)
    guard let rectAttributes = super.layoutAttributesForElements(in: targetRect) else { return .zero }

    var offsetAdjustment = CGFloat.greatestFiniteMagnitude
    let horizontalCenter = proposedContentOffset.x + collectionView.frame.width / 2

    for layoutAttributes in rectAttributes {
        let itemHorizontalCenter = layoutAttributes.center.x
        if (itemHorizontalCenter - horizontalCenter).magnitude < offsetAdjustment.magnitude {
            offsetAdjustment = itemHorizontalCenter - horizontalCenter
        }
    }

    return CGPoint(x: proposedContentOffset.x + offsetAdjustment,y: proposedContentOffset.y)
}

override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
    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
}

}

问题：
我希望轮播与屏幕左侧对齐。我不希望它居中。
即：突出显示的缩放元素始终是第一个元素，并向左对齐。

enter image description here


当用户滚动浏览集合时，新的突出显示的项目将取代它：

enter image description here

。

我尝试过的事情：
在prepare函数中，我将水平插值设置为零：

override func prepare() {
    guard let collectionView = collectionView else { fatalError() }
    let verticalInsets = (collectionView.frame.height - collectionView.adjustedContentInset.top - collectionView.adjustedContentInset.bottom - itemSize.height) / 2
    //let horizontalInsets = (collectionView.frame.width - collectionView.adjustedContentInset.right - collectionView.adjustedContentInset.left - itemSize.width) / 2
    //sectionInset = UIEdgeInsets(top: verticalInsets,bottom:     verticalInsets,right: horizontalInsets)
    // new section inset,trying to align the collection view to the left
    sectionInset = UIEdgeInsets(top: verticalInsets,left:0,right: 0)
    super.prepare()
}

结果：

enter image description here

如您所见，屏幕中心的元素保持缩放状态（这不是问题，因为稍后会删除缩放效果，因为我不需要它了。）。
问题是，轮播效果不再起作用。就像是普通的collectionView一样，用户可以通过它滚动。
任何有关如何使旋转木马左对齐的建议都欢迎。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

iosiosswiftswiftswiftswifttvostvosuicollectionviewuicollectionviewuicollectionviewuicollectionviewflowlayoutuicollectionviewflowlayout