web-dev-qa-db-ja.com

ページ間にスペースがあるUICollectionView水平ページング

ネイティブのUIPageViewController水平ページングをUICollectionViewに置き換える方法を探しています。

これまでのところ、私は次のことをしました：

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
layout.itemSize = collectionView.frame.size
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 10

collectionView.setCollectionViewLayout(layout, animated: false)
collectionView.isPagingEnabled = true
collectionView.alwaysBounceVertical = false

これはうまく機能し、水平方向のページング効果が得られます。

ここで、ページ間に水平スペースを追加します（uがUIPageViewControllerOptionInterPageSpacingKeyのUIPageViewControllerで行うように）

これまでのところ、ページング効果を損なうことなくスペースを追加する方法はうまくいきませんでした。 UIPageViewControllerの場合と同じ動作を探しています：セルは画面幅全体を埋め、セル間のスペースはページを切り替えたときにのみ表示されます。

iosuicollectionviewuikituipageviewcontrolleruicollectionviewlayout
13
Eyal

解決策1：

  1. collectionView.isPagingEnabled = false
  2. ページ間の距離にminimumLineSpacingを追加します
  3. targetContentOffsetForProposedContentOffset:withScrollingVelocity:は、contentOffsetを最も近いページに移動します。 itemSizeとminimumLineSpacingに基づいた簡単な数学でページを計算できますが、それを正しくするには少し手間がかかります。

解決策2：

  1. collectionView.isPagingEnabled = true
  2. ページ間の距離にminimumLineSpacingを追加します
  3. ページングサイズは、collectionViewの境界に基づいています。そのため、collectionViewをscreenSizeより大きくします。たとえば、minimumLineSpacingが10の場合、collectionViewのフレームを{0、-5、width + 10、height}に設定します
  4. 最初と最後のアイテムが正しく表示されるようにするには、minimumLineSpacingと等しいcontentInsetを設定します。
20
Jon Rose
  • デフォルトでは、UICollectionViewFlowLayoutのminimumLineSpacingは10.0であり、collectionViewの項目が水平方向にいっぱいになり（itemSize.width = collectionView.bounds.width）、collectionViewがページング有効になっている場合、ゼロより大きい「minimumLineSpacing」は意図しないパフォーマンスを引き起こします：すべてのページページ番号ごとに累積されるギャップがあります。
  • この問題を修正するために、 'minimumLineSpacing'によってcollectionViewの幅を拡張できるようです。ただし、実際にはこのソリューションは無効になります。2ページ以上ある場合、collectionViewは最後のページに「lineSpacing」を与えないため、「contentSize」ではこのページのコンテンツを完全に表示するには不十分です。つまり、「minimumLineSpacing」が10.0 、最後のページの終わりは、collectionViewのcontentSizeを10.0超えます。
  • 最後に、次の簡単なソリューションを使用して、すべてのアイテムの間にマージンを挿入します（UIScrollViewのパフォーマンスなど）。すべてのcollectionViewItemの幅を固定値「pageSpacing」（10.0など）で拡張し、collectionViewの幅も同じ値で拡張します。また、CollevtionViewCellのサブビューをレイアウトするとき、実際のコンテンツを表示するためではない追加のスペースがあることを忘れないでください。

Swift 3.1、で書かれたコードは、あなたにとって簡単に理解できると確信しています：

let pageSpacing: CGFloat = 10

class ViewController: UITableViewController {
     override func viewDidLoad() {
        super.viewDidLoad()

        let layout = UICollectionViewFlowLayout()
        layout.itemSize                = CGSize(width: view.frame.width + pageSpacing, height: view.frame.height)
        layout.scrollDirection         = .horizontal
        layout.minimumInteritemSpacing = 0
        layout.minimumLineSpacing      = 0

        let frame = CGRect(x: 0, y: 0, width: view.frame.width + pageSpacing, height: view.frame.height)
        let collectionView = UICollectionView(frame: frame, collectionViewLayout: layout)
        view.addSubview(collectionView)
    }
}

class MyCell: UICollectionViewCell {
    var fullScreenImageView = UIImageView()
    override func layoutSubviews() {
        super.layoutSubviews()
        fullScreenImageView.frame = CGRect(x: 0, y: 0, width: frame.width - pageSpacing, height: frame.height)
    }
}

それがあなたを助けることを願っています。

2
Rick