🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

解決済

1回答

2448閲覧

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

Ytan

総合スコア39

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

1クリップ

投稿2020/12/02 15:20

編集2020/12/02 15:20

現状

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

問題点

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

基本的には

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

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

Swift

1import UIKit 2 3class MyCollectionViewFlowLayout: UICollectionViewFlowLayout { 4 override func awakeFromNib() { 5 super.awakeFromNib() 6 7 // ここは CollectionView 内の画像サイズに合わせて変更する 8 self.itemSize = CGSize(width: 104, height: 136) 9 10 self.minimumInteritemSpacing = 10.0 11 self.minimumLineSpacing = 10.0 12 self.scrollDirection = .horizontal 13 14 // 右余白の計算 15 let w: Int 16 if let collectionView = self.collectionView { 17 w = Int(collectionView.frame.width) % Int(self.itemSize.width + self.minimumLineSpacing) 18 } else { 19 w = 10 20 } 21 22 self.sectionInset = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: CGFloat(w) - (self.minimumLineSpacing - 10)) 23 } 24 25 override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint { 26 27 guard let collectionView = self.collectionView else { 28 let latestOffset = super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity) 29 return latestOffset 30 } 31 32 // Page width used for estimating and calculating paging. 33 let pageWidth = self.itemSize.width + self.minimumInteritemSpacing 34 35 // Make an estimation of the current page position. 36 let approximatePage = collectionView.contentOffset.x/pageWidth 37 38 // Determine the current page based on velocity. 39 let currentPage = velocity.x == 0 ? round(approximatePage) : (velocity.x < 0.0 ? floor(approximatePage) : ceil(approximatePage)) 40 41 // Create custom flickVelocity. 42 let flickVelocity = velocity.x * 0.3 43 44 // Check how many pages the user flicked, if <= 1 then flickedPages should return 0. 45 let flickedPages = (abs(round(flickVelocity)) <= 1) ? 0 : round(flickVelocity) 46 47 // Calculate newHorizontalOffset. 48 let newHorizontalOffset = ((currentPage + flickedPages) * pageWidth) - collectionView.contentInset.left 49 50 return CGPoint(x: newHorizontalOffset, y: proposedContentOffset.y) 51 } 52}

イメージ説明

2020年12月4日追加

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

Swift

1override func awakeFromNib() { 2 super.awakeFromNib() 3 4 // ここは CollectionView 内の画像サイズに合わせて変更する 5 self.itemSize = CGSize(width: 104, height: 136) 6 7 self.minimumInteritemSpacing = 10.0 8 self.minimumLineSpacing = 10.0 9 self.scrollDirection = .horizontal 10 11 // 右余白の計算 12 let w: Int 13 if let collectionView = self.collectionView { 14 w = Int(collectionView.frame.width) % Int(self.itemSize.width + self.minimumInteritemSpacing) 15 } else { 16 w = 10 17 } 18 19 self.sectionInset = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: CGFloat(w) - (self.minimumInteritemSpacing + 10)) 20 }

投稿2020/12/02 23:02

編集2020/12/04 08:05
TsukubaDepot

総合スコア5086

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Ytan

2020/12/03 13:59

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

2020/12/03 14:11

こちらで試した動画を回答に追加しましたが、このようなイメージとはちがうのでしょうか。 App Store だと、左右の Inset に合わせて Collection View のセルが止まるようになっていますが、一応それと同じようになると思っています。 ただ、セル幅の計算などはかなり慎重に行わないといけないように思えます。 また、当然 Ytan さんの環境に応じて、カスタムクラス内の数値を計算しなおす必要もあると思います。 UICollectionViewFlowLayout で検索すると、いわゆる「カルーセルの実装例」がいくつも出てきますので、それらを見比べてみて最適解を求めてみるのはいかがでしょうか。
Ytan

2020/12/03 14:37

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

2020/12/03 15:38 編集

この手の形のCollectionViewの場合minimumInteritemSpacingはどのように機能しているのでしょうか? 特に変更しても変わり無いのですが、minimumLineSpacingで行間(Cell間?)が変わるのはわかるのですが、列間とはこの場合何ですか? またUIEdgeInsetsのmarginとminimumLineSpacingのCell間のmarginは両方指定する必要があるのでしょうか?スペース的には同じでは無いのですか? それぞれを引き合っているという事は何か意味があるのですか?
TsukubaDepot

2020/12/04 04:04

ご質質問をみていたディスプレイのコントラストが悪かったので気づかなかったのですが、TableViewCell に配置している CollectionView の左端に余白を入れているようですが、余白をいれると当然ここで見切れてしまいます。 CollectionView の leading, trairing ともに、それを配置している TavleViewCell の leading, trairing と同じにする必要があります。 上のコメントで挙げられている各空白ですが、それぞれ意味が異なってきます。 大雑把にいうと、 minimumInteritemSpacingは左右セル間の隙間 minimumLineSpacingは上下セル間の隙間 UIEdgeInsetsのmarginは CollectionView の内側に置くインセット(隙間) となります。UIEdgeInsetsのmarginを適切に指定すると、上に置いている UILabel とうまくツラあわせせることが可能です。 > それぞれを引き合っているという事は何か意味があるのですか? 全体で表示したいセル幅とその間の空白、および左右のインセットを加えた全体の幅を、端末幅で割り切れない時には、右側に適切なインセットを入れてあげないと最後の方をうまく表示することができません。 なので、剰余をもとめたりしているのですが、これは少し適当なので、実際にはよくデザインした上で組み直す必要があるかと思います。
TsukubaDepot

2020/12/04 08:06

私の回答中で minimumInterspacing と minimumLineSpacing を逆に使っていたのが混乱の元だったかもしれません。すみません。 また、一番右側まで持って行った後の Inset がおかしくなる点も修正しました。 awakeFromNib() の計算式だけ書き換えれば、結構いい具合になるのではないでしょうか。
Ytan

2020/12/04 14:38

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

2020/12/04 14:59

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

2020/12/06 14:52

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問