コレクションビューの一行に表示されるセルの個数を一定にしたい
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 455
質問失礼します。
コードのみでコレクションビューを作成して、カレンダーの枠を作りたいです。
その為にiPadでもiPhoneでも常にセル一行の個数を7個にしたくて下記の様にコードを記載したのですが、
一行に表示されるセルの個数に差が出てしまいます。
どうすればどのデバイスでも横一行の個数を常に7個に出来るのでしょうか。
どなたかご教授いただけると嬉しいです。
よろしくお願い致します。
import UIKit
class ViewController: UIViewController {
//セルに表示させるテキスト
let data = ["A","B","C","D","E","F","G","H","I","J","K"]
//一列に表示させたいセルの個数
let itemsPerRow: CGFloat = 7
//コレクションビューとセル全体との幅
var sectionInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
//セル同士の間の幅
var space: CGFloat = 10
//コレクションビュー
let collectionView :UICollectionView = {
let layout = UICollectionViewFlowLayout()
//スクロールの方向
layout.scrollDirection = .vertical
//コレクションビューの設定
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.translatesAutoresizingMaskIntoConstraints = false
//カスタムセルを登録する
cv.register(CustomCell.self, forCellWithReuseIdentifier: "cell")
return cv
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
//コレクションビューをオートレイアウトして表示する
view.addSubview(collectionView)
collectionView.backgroundColor = .blue
collectionView.topAnchor.constraint(equalTo: view.topAnchor, constant: 50).isActive = true
collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 50).isActive = true
collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -50).isActive = true
collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -50).isActive = true
collectionView.delegate = self
collectionView.dataSource = self
}
}
extension ViewController: UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
//セルのサイズを設定する
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
//コレクションビューとセル全体との余白と、セル間のスペースの合計値を足してパディングを算出する
let paddingSpace = sectionInsets.left + sectionInsets.right + (space * (itemsPerRow - 1))
//コレクションビューの幅からパディングを引く
let availableWidth = collectionView.frame.size.width - paddingSpace
//残った幅をセルの個数で割る
let widthPerItem = availableWidth / itemsPerRow
return CGSize(width: widthPerItem, height: widthPerItem)
}
//セル(全て)とコレクションビューとのスペースの設定
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return sectionInsets
}
//セルとセルの横同士の間のスペースを設定する
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return space
}
//セルとセルの縦同士の間のスペースを設定する
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return space
}
//セルの数の設定
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return data.count
}
//セルの内容の設定
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CustomCell
cell.backgroundColor = .gray
//カスタムセルの中身に表示させるデータを設定する
cell.textLabel.text = self.data[indexPath.row]
return cell
}
}
class CustomCell: UICollectionViewCell {
//ラベルを設定する
var textLabel :UILabel = {
let label = UILabel()
label.textColor = .blue
label.font = UIFont.boldSystemFont(ofSize: 15)
label.translatesAutoresizingMaskIntoConstraints = false
label.textAlignment = .center
label.text = ""
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
//オートレイアウトしてセルにラベルを表示させる
contentView.addSubview(textLabel)
textLabel.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
textLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
textLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
textLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
//セルとセルの横同士の間のスペースを設定する
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return space / 2
}
たしかこれで動いたと思います…。理由はご自身で確認されてみてください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.32%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2020/05/29 20:21
セル間のスペースが両サイドに適応されるから計算にズレが生じていたんですね…!
留意してスペースの最小サイズを設定したところ、
ちゃんと両デバイスでセルの個数が一致しました。
ご回答ありがとうございました^^