集合视图流布局类似于 Apple Store 应用程序答案

【问题标题】：Collection view Flow layout similar to Apple Store Application集合视图流布局类似于 Apple Store 应用程序
【发布时间】：2014-03-14 21:46:31
【问题描述】：

我正在使用 UICollectionView 来显示图像，就像在 Apple Store iPhone Application 中一样。（附截图）

但我无法设置类似于 Apple 商店应用的流程布局。我在设置它的布局和内容 offset 和 inset 时遇到问题。我尝试了每一件事，甚至将它的流布局子类化。即使那样对我也不起作用。

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect

我也尝试实现iCarousel，但效果不佳。

感谢任何与流布局相关的帮助。另外，如果除了使用集合视图之外还有其他解决方案。

更新：

我已经实现了以下代码来使用NDCollectionViewFlowLayout设置它的流布局：

NDCollectionViewFlowLayout *nda = [[NDCollectionViewFlowLayout alloc] init];
nda.itemSize = CGSizeMake(251, 443);
nda.sectionInset = UIEdgeInsetsMake(0.0, 0.0, 0.0, 0.0);
nda.minimumLineSpacing = 15.0;
nda.minimumInteritemSpacing = 10.0;
nda.scrollDirection = UICollectionViewScrollDirectionHorizontal;

一切都像 Appstore 图像布局。

更新：

我最终使用了iCarousel，并对其进行了一些修改。

【问题讨论】：

你能告诉我们你的尝试吗？您可能与一个简单的错误非常接近……因此，实际查看您尝试过的内容和实际结果会很有用。
@nhgrif：感谢您的快速回复。我已经更新了我的问题。即使我认为，我错过了一些东西，但没有得到它的暗示。

标签： ios iphone objective-c uicollectionview uicollectionviewlayout

【解决方案1】：

Example project here

在类属性中

     var itemSize = CGSize(width: 0, height: 0)
     @IBOutlet weak var collectionViewHeight: NSLayoutConstraint!
     @IBOutlet weak var collectionView: UICollectionView!
     fileprivate let sectionInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)

在 viewDidLoad 或 awakeFormNib 中（如果在 collectionViewCell 或 tableViewCell 中）

    if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        layout.minimumLineSpacing = 0
        layout.minimumInteritemSpacing = 0
    }
    collectionView.contentInset = UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 8)
    collectionView.isPagingEnabled = false
    layoutIfNeeded()

    let width = collectionView.bounds.size.width-24
    let height = width * (3/4)
    itemSize = CGSize(width: width, height: height)
    layoutIfNeeded()

实现 UICollectionViewDelegateFlowLayout

    func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    insetForSectionAt section: Int) -> UIEdgeInsets {

        return sectionInsets
    }

    func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize {
        return itemSize
    }

实现 ScrollViewDelegate

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    let pageWidth = itemSize.width
    targetContentOffset.pointee = scrollView.contentOffset
    var factor: CGFloat = 0.5
    if velocity.x < 0 {
        factor = -factor
        print("right")
    } else {
        print("left")
    }

    let a:CGFloat = scrollView.contentOffset.x/pageWidth
    var index = Int( round(a+factor) )
    if index < 0 {
        index = 0
    }
    if index > collectionViewDataList.count-1 {
        index = collectionViewDataList.count-1
    }
    let indexPath = IndexPath(row: index, section: 0)
    collectionView?.scrollToItem(at: indexPath, at: .left, animated: true)
}

在过去的游乐设施部分查看我的项目的示例屏幕截图我在collectionViewCell中实现了uicollectionview

【讨论】：