UICollectionView 自定义水平分页布局 [英] UICollectionView custom horizontal paging layout

问题描述

[![collectionview 示例][1]][1]

[![collectionview example][1]][1]

我正在尝试使用集合视图来模拟这种行为.我已经开始使用这种方法，它使我更接近.尽管当我在水平分页 CollectionView 上越来越向右滑动时，内容会越来越向左移动.单元格之间的间距也是关闭的.我相信它需要自定义布局，但我不确定.

I am trying to emulate this behavior using a collection view. I have started by working with this method and it has gotten me closer. Although as I swipe further and further right on my horizontal paging CollectionView, the content shifts further and further left. Also the spacing between the cells is off. I believe it requires a custom layout, but am not sure.

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

    return CGSize(width: collectionView.frame.width - 20, height: collectionView.frame.height - 20)

}

推荐答案

这取决于 3 个因素1) 部分插图2) 单元格间距3) 单元格大小

it depends on 3 factors 1) Section Insets 2) Cell Spacing 3) Cell Size

每个人的任何变化都必须改变其他人为您的情况

Any change in each you have to change others for your case

1) 设置左 &对着 20

1) Set left & right with 20

2) 设置单元格间距为 10

2) set cell spacing to 10

func collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 10
}
func collectionView(collectionView: UICollectionView, layout
    collectionViewLayout: UICollectionViewLayout,
    minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 10
}

3) 设置单元格大小

func collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return CGSize(width: collectionView.frame.width / 1.15 ,height: collectionView.frame.height)
}

4) 这将使单元格在屏幕中居中

4) this will center cell in screen

func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {

    let pageWidth:CGFloat = scrollView.frame.width / 1.15 + cellSpacing ;

    let currentOffset:CGFloat = scrollView.contentOffset.x;
    let targetOffset:CGFloat = targetContentOffset.memory.x
    var newTargetOffset:CGFloat = 0;

    if targetOffset > currentOffset
    {
        newTargetOffset = ceil(currentOffset / pageWidth) * pageWidth;
    }
    else
    {
        newTargetOffset = floor(currentOffset / pageWidth) * pageWidth;
    }

    if newTargetOffset < 0
    {
        newTargetOffset = 0
    }
    else if newTargetOffset > scrollView.contentSize.width
    {
    newTargetOffset = scrollView.contentSize.width;
    }

    targetContentOffset.memory.x = currentOffset

    scrollView.setContentOffset(CGPointMake(newTargetOffset, 0), animated: true)

}

这篇关于UICollectionView 自定义水平分页布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！