0

CollectionViewを利用して水平スクロールを実現しております。
セルの数に応じて、セルの配置を変化させる実装方法を教えてください。
期待する動作は下記のとおりです。

■期待する動作
セルが1個の際はそのセルを中央に配置し、セルが2個の際は各セルの中間を中央に配置する実装を検討しております。
セルが3個以上の際は、セルの1個目を左端に配置し、スクロールできる状態にしたいと考えております。

■現状
現状の実装ですと、セルが1個、2個の際は左に寄ってしまい中央に配置させることができておりません。
参考までに現状のソースコード、Main.storyboardのキャプチャ、実行結果を添付いたします。

■ソースコード

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource {

    //データの個数を返すメソッド
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
    {
        //下記の値cellsが可変のため、値が変化した際のセルの配置方法を変化させたい。
        return cells
    }

    //データを返すメソッド
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
    {
        //コレクションビューから識別子「TestCell」のセルを取得する。
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TestCell", for: indexPath) as! TestCollectionViewCell
        //セルの背景色をランダムに設定する。
        cell.backgroundColor = UIColor(red: CGFloat(drand48()),
                                   green: CGFloat(drand48()),
                                   blue: CGFloat(drand48()),
                                   alpha: 1.0)
        //セルのラベルに番号を設定する。
        cell.testLabel.text = String(indexPath.row + 1)
        return cell
    }


    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

■Main.storyboardのキャプチャ
画像の説明をここに入力

■実行結果(セルが1個のとき)
画像の説明をここに入力

■実行結果(セルが2個のとき)
画像の説明をここに入力

1 件の回答 1

1

UICollectionViewと標準のUICollectionViewFlowLayoutの組み合わせは、かなり多機能なので、適当なプロパティの値を設定すれば、ご説明のようなありがちなレイアウトは実現できるだろうと思ったのですが、リファレンスをちょっと探しただけではそれっぽいものは見つかりませんでした。

uicollectionview center cells horizontally 辺りで検索すると、本家Stack Overflowにいくつかのスレッドが見つかりました。

How to center horizontally UICollectionView Cells?
How to center align the cells of a UICollectionView in Swift3.0?

基本的にはみなUICollectionViewDelegateFlowLayoutに定義されたメソッドを実装して、左右の余白を自前で計算することで実現しなさいと言うことのようです。

以下のコードはその中の回答の一つを焼き直したものです(変数名やコメントの修正だけで本質的には同じ内容)。

なお、このコードが動作するためにはUICollectionViewdelegateViewControllerのインスタンスに設定している必要があります。dataSourceの方はstoryboardで設定を行われたものと思いますので、未接続でしたら、同じ手順でdelegateの方もViewControllerに接続しておいてください。

//標準のFlowLayoutを使用するものとして、UICollectionViewDelegateFlowLayoutに適合させる
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    //... 以下のメソッドの追加だけで、他の部分はそのままで良いはず

    //UICollectionViewDelegateFlowLayoutに定義されたメソッド
    //セクションごとに上下左右の余白を示すUIEdgeInsetsを返す
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {

        guard
            let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout,
            case let numItems = collectionView.numberOfItems(inSection: section), numItems > 0
        else {
            return .zero
        }

        //1セクション分の表示幅の計算(セルを可変サイズにする場合などは要修正)
        let minSpacing = flowLayout.minimumInteritemSpacing
        let itemWidth = flowLayout.itemSize.width
        let minSectionWidth = itemWidth * CGFloat(numItems) + minSpacing * CGFloat(numItems-1)

        //CollectionViewのコンテンツ領域の幅の計算
        let contentWidth = collectionView.frame.size.width - collectionView.contentInset.left - collectionView.contentInset.right

        //デフォルトのInsetsの取得
        var insets = flowLayout.sectionInset
        //セクションの表示幅がコンテンツ領域より小さい時には余白を計算
        if minSectionWidth < contentWidth {
            let paddingWidth = (contentWidth - minSectionWidth)/2
            insets.left = paddingWidth
            insets.right = paddingWidth
        }
        return insets
    }
}

注意点としては、

  • 設定項目の全てを全く同じに合わせたわけではないので、あちこち微修正が必要かもしれない
    (サイズなど、ご質問では表示されていない項目も多数ありますし…。)

  • 「セルが3個以上の際は、セルの1個目を左端に配置し、スクロールできる状態に」と明記されているが、このコードではセルが3個以上でも画面に収まる場合にはセンタリングして表示する

と言う作りになっています。

こちらの環境で適当に設定したプロジェクトでは期待通りに動いているのですが、上記したように、そちらのプロジェクトに合わせるためには若干修正が必要かもしれません。お試しください。

4
  • @OOPer様、ご丁寧なご回答誠にありがとうございます。 教えていただいたコードを適用いたしましたが、セルが1個の場合でも2個の場合でも左に寄ったままで期待どおりの動作はいたしませんでした。 切り分けとして、「guard」の直前の行に「print("test")」と入れてメソッドが動作しているか確認したところ、コンソールに「test」が表示されておりませんでしたので、メソッド自体が動作していないものと思われます。(UICollectionViewDelegateFlowLayoutプロトコルが設定されていることは確認いたしました。) 教えていただいたメソッドが動作しない考えうる原因を教えていただけますでしょうか。 (個人的にはOOper様と私のMain.storyboardの作成方法に違いがあるのではないかと考えております。) 重ねての質問となり誠に申し訳ございません。
    – takuma
    Commented 2017年7月22日 10:49
  • @takuma さん, 質問の内容からどこまでを前提にして良いのかを判断し損ねて説明に漏れがあったようです。storyboard上でUICollectionViewdataSourceViewControllerに接続する設定は行われたかと思いますが、UICollectionViewdelegateViewControllerに接続しておいてください。
    – OOPer
    Commented 2017年7月22日 10:55
  • @OOPer様、早速のご回答ありがとうございます。 私のお伝えした前提条件が不足しており、誠に申し訳ございませんでした、OOPer様のおっしゃるとおり、UICo‌​llectionViewのdelegat‌​eもViewControllerに接続したところ、期待どおりの動作をいたしました。 ご対応ありがとうございました。
    – takuma
    Commented 2017年7月22日 11:01
  • @takuma さん、いえいえご指摘ありがとうございました。Q&Aサイトのスレッドというものは、将来にわたって様々な人に参照されていくものなので、回答を改良するために必要な事柄に気がついた場合には遠慮なくおしらせください。
    – OOPer
    Commented 2017年7月22日 11:04

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。