CollectionViewの横スワイプのレイアウトについて

Question

現状

現在TableViewのCell内にCollectionViewを設け、横スワイプできるようにしました。

問題点

cellの横をすこし開けてNavigationのBigTitleの文字の位置とCellを合わせて
Leftに余白をConstraintsで設定しているのですがスワイプしたら

画像のように(わかりにくいですが...)余白分空いたところまでしかスワイプできないと思うのですが
AppleStoreのようにNavigationControllerのBigTitleと横幅が同じなのにも関わらず
横に抜けていくようにスワイプできるようにするのはどうすれば良いですか？
![]
下のリンクを参考に
【Xcode】UITableViewの区切り線のすきまについて
separatorInsetを試してみたのですが反映されませんでしたので制約で無理やりBigTitleと揃えている状態です。

Answer 1

セル幅が画面幅であればページングを有効にすれば良いのですが、セル幅が小さい場合にはCollectionViewFlowLayout を独自に実装することになると思います。

基本的には

• targetContentOffsetForProposedContentOffset:withScrollingVelocity without subclassing UICollectionViewFlowLayout

の通りなのですが、これだと右余白が適切にならないので、こんな感じに実装することになるかと思います。

カスタムクラスとして UICollectionViewFlowLayout をベースクラスとした MyCollectionViewFlowLayout を作り、Interface Builder で作っている ContentsTableViewCell.xib の　Collection View Flow Layout をこのカスタムクラスに置き換えると、思ったような動作になるかと思います。

import UIKit

class MyCollectionViewFlowLayout: UICollectionViewFlowLayout {
    override func awakeFromNib() {
        super.awakeFromNib()
    
        // ここは　CollectionView 内の画像サイズに合わせて変更する
        self.itemSize = CGSize(width: 104, height: 136)
        
        self.minimumInteritemSpacing = 10.0
        self.minimumLineSpacing = 10.0
        self.scrollDirection = .horizontal
        
        // 右余白の計算
        let w: Int
        if let collectionView = self.collectionView {
            w = Int(collectionView.frame.width) % Int(self.itemSize.width + self.minimumLineSpacing)
        } else {
            w = 10
        }
        
        self.sectionInset = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: CGFloat(w) - (self.minimumLineSpacing - 10))
    }
    
    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {

        guard let collectionView = self.collectionView else {
            let latestOffset = super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)
            return latestOffset
        }

        // Page width used for estimating and calculating paging.
        let pageWidth = self.itemSize.width + self.minimumInteritemSpacing

        // Make an estimation of the current page position.
        let approximatePage = collectionView.contentOffset.x/pageWidth

        // Determine the current page based on velocity.
        let currentPage = velocity.x == 0 ? round(approximatePage) : (velocity.x < 0.0 ? floor(approximatePage) : ceil(approximatePage))

        // Create custom flickVelocity.
        let flickVelocity = velocity.x * 0.3

        // Check how many pages the user flicked, if <= 1 then flickedPages should return 0.
        let flickedPages = (abs(round(flickVelocity)) <= 1) ? 0 : round(flickVelocity)

        // Calculate newHorizontalOffset.
        let newHorizontalOffset = ((currentPage + flickedPages) * pageWidth) - collectionView.contentInset.left

        return CGPoint(x: newHorizontalOffset, y: proposedContentOffset.y)
    }
}

---

2020年12月4日追加

少し計算し直してみました。
これだと綺麗に表示されるようです。

override func awakeFromNib() {
        super.awakeFromNib()
    
        // ここは　CollectionView 内の画像サイズに合わせて変更する
        self.itemSize = CGSize(width: 104, height: 136)
        
        self.minimumInteritemSpacing = 10.0
        self.minimumLineSpacing = 10.0
        self.scrollDirection = .horizontal
        
        // 右余白の計算
        let w: Int
        if let collectionView = self.collectionView {
            w = Int(collectionView.frame.width) % Int(self.itemSize.width + self.minimumInteritemSpacing)
        } else {
            w = 10
        }
        
        self.sectionInset = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: CGFloat(w) - (self.minimumInteritemSpacing + 10))
    }

Comments

[Ytan]

試してみましたがまだTableViewCellのCollectionViewのLeft部分の余白(最初に制約で設定した)までのスクロールができて,画面端までは届きません。
ビルドするとCollectionViewのCellの初め(row0のcellの左端)はNavigationのBigTitleの左と揃っており、
スクロールすると画面隅までスクロールする事ができそのまま見切れるような形にしたいのですが
僕の実現したい認識と同じでしょうか？(写真が分かりづらかった可能性もあるのでお尋ねします...)

[TsukubaDepot]

こちらで試した動画を回答に追加しましたが、このようなイメージとはちがうのでしょうか。
App Store だと、左右の Inset に合わせて Collection View のセルが止まるようになっていますが、一応それと同じようになると思っています。

ただ、セル幅の計算などはかなり慎重に行わないといけないように思えます。
また、当然 Ytan さんの環境に応じて、カスタムクラス内の数値を計算しなおす必要もあると思います。

UICollectionViewFlowLayout　で検索すると、いわゆる「カルーセルの実装例」がいくつも出てきますので、それらを見比べてみて最適解を求めてみるのはいかがでしょうか。

[Ytan]

添付ありがとうございます！動画のイメージで間違いありません。
そうですね、Cellごと一つ一つで切り替わってますね。
分かりました。調整してみます！

[Ytan]

この手の形のCollectionViewの場合minimumInteritemSpacingはどのように機能しているのでしょうか？
特に変更しても変わり無いのですが、minimumLineSpacingで行間(Cell間？)が変わるのはわかるのですが、列間とはこの場合何ですか？

またUIEdgeInsetsのmarginとminimumLineSpacingのCell間のmarginは両方指定する必要があるのでしょうか？スペース的には同じでは無いのですか？
それぞれを引き合っているという事は何か意味があるのですか？

[TsukubaDepot]

ご質質問をみていたディスプレイのコントラストが悪かったので気づかなかったのですが、TableViewCell に配置している CollectionView の左端に余白を入れているようですが、余白をいれると当然ここで見切れてしまいます。
CollectionView の leading, trairing ともに、それを配置している TavleViewCell の leading, trairing と同じにする必要があります。

上のコメントで挙げられている各空白ですが、それぞれ意味が異なってきます。
大雑把にいうと、
minimumInteritemSpacingは左右セル間の隙間
minimumLineSpacingは上下セル間の隙間
UIEdgeInsetsのmarginは CollectionView の内側に置くインセット（隙間）

となります。UIEdgeInsetsのmarginを適切に指定すると、上に置いている UILabel とうまくツラあわせせることが可能です。

> それぞれを引き合っているという事は何か意味があるのですか？

全体で表示したいセル幅とその間の空白、および左右のインセットを加えた全体の幅を、端末幅で割り切れない時には、右側に適切なインセットを入れてあげないと最後の方をうまく表示することができません。
なので、剰余をもとめたりしているのですが、これは少し適当なので、実際にはよくデザインした上で組み直す必要があるかと思います。

[TsukubaDepot]

私の回答中で minimumInterspacing と minimumLineSpacing を逆に使っていたのが混乱の元だったかもしれません。すみません。
また、一番右側まで持って行った後の Inset がおかしくなる点も修正しました。

awakeFromNib() の計算式だけ書き換えれば、結構いい具合になるのではないでしょうか。

[Ytan]

質問後調整をしまして、元々CollectionViewの画像サイズもおかしかったこともあり
TableViewCellの制約なりをいじったところ納得のいくサイズ感とスワイプした時の挙動、
それぞれの空白になりました。
CollectionViewはそれほど手を出していなかったため丁寧な説明や変更大変助かりました。
ありがとうございました。

[TsukubaDepot]

私はあまり偉いことは言えない立場ですが、UITableView は UICollectionView を継承しているため、CollectionView の各プロパティや挙動を把握しておくと、UITableView でもやや凝ったことをやりやすくなるかもしれません。

[Ytan]

いえいえ、助言ありがとうございます。
いつもとても参考になります！