【Swift】CollectionViewで複数画像をインスタのように表示させる手順。〜 CellにImageViewを設置〜

今回の記事では、iphoneアプリでよく出てくる様な、写真の一覧（インスタみたいな）画面をどの様に作れば良いのかについての記事になります。初心者にも分かりやすいように記事を記載したので是非参考にしてみてください。

CollectionViewの使用方法
CollectionView上にImageViewを設定
CollectionViewにImageViewを表示させる方法

CollectionViewの使用方法

まずはCollectionViewの使用方法を知る必要があります。下記のようにUICollectionViewをStoryboardいっぱいに貼ります。固定する際に全ての座標を0にすればOK。

初期状態から、CollectionViewCellが一つ配置されております。この配置されているCellに画像を表示させていくので消さないでください。

まずはこちらのCellをクリックして、identify（特定するために使用するもの）を設定します。今回は「testcell」と設定しました。

次にCellではなくCollectionViewの方をクリックして、「control」+「ドラッグ」でStoryboardの上部にある丸印に持っていきます。

こちらでdelegateとdatasourceの設定をできるのでviewcontrollerと紐付けの際に両方指定します。（両方設定するのでドラッグ作業は2回）

これで最低限の準備は完了です。ちなみにこのDelegateなどに関しては別途記事を書いていくのでdelegateが何かなどは別記事で是非確認してみてください。

CollectionView上にImageViewを設定

次にImageViewについてです。こちらは画像を表示させるためのUIパーツになります。

「TableView」みたく一つのCellに一つのImageViewを表示させるのが定石なので、Cell内いっぱいにImageViewを入れてください。固定は全て0でOKです。

次に、ImageViewにtag番号をつけます。
写真の様にviewの部分にtagという表記があるのでそちらの矢印をクリックして一つ上にします。

このtag番号によってCell上のImageViewを指定しているので大事な作業になります。

Assets.xcassetsに画像をセットします。

こちらAssetsでなくプロジェクトに突っ込んでも良いのですがまあ、こちらの方が整理できるので特にこだわりがなければ下記のようにAssetsの画面を開いて画像をドラッグして画像をセットしておきましょう。

その後プロジェクト内でAssets.xcassetsを開くと上記の画面になっているので画像をドラッグしてサイズを1x~3xなどで選びます。

これでXcode側の調整は終了です。

CollectionViewにImageViewを表示させる方法

CollectionViewを操作するためには下記のコードを使用します。

import UIKit

class ViewController: UIViewController,UICollectionViewDataSource,
UICollectionViewDelegate  {
    
    let photos = ["icon", "icon1"]
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    func collectionView(_ collectionView: UICollectionView,
                        cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
        
        // "Cell" はストーリーボードで設定したセルのID
        let testCell:UICollectionViewCell =
            collectionView.dequeueReusableCell(withReuseIdentifier: "testcell",
                                               for: indexPath)
        
        // Tag番号を使ってImageViewのインスタンス生成
        let imageView = testCell.contentView.viewWithTag(1) as! UIImageView
        // 画像配列の番号で指定された要素の名前の画像をUIImageとする
        let cellImage = UIImage(named: photos[indexPath.row])
        // UIImageをUIImageViewのimageとして設定
        imageView.image = cellImage
        
        return testCell
    }
    
    func collectionView(_ collectionView: UICollectionView,
                        numberOfItemsInSection section: Int) -> Int {
        // 要素数を入れる、要素以上の数字を入れると表示でエラーとなる
        return photos.count
    }
}

クラスに下記を追加します。

「UICollectionViewDataSource」、「UICollectionViewDelegate」

するとXcode側で必要な関数を提示してくれるのでFix を押すと自動的にCollectionViewのdelegateに対して対応したプロトコルの関数が追加されます。

順番にコードを解説していきます。

func collectionView(_ collectionView: UICollectionView,
                        cellForItemAt indexPath: IndexPath) -> UICollectionViewCell

こちらがImageデータを取得するための名前のリストを定義し、画像を表示させるImageViewをtag情報から生成・取得しております。その取得情報通りに画像を配置させるコードが一つ目の関数にまとまっております。

func collectionView(_ collectionView: UICollectionView,
                        numberOfItemsInSection section: Int) -> Int

こちらのcollectionView関数はCollectionViewに表示させるCellの数を指定しています。

この数と表示させる画像の数が一致しないとエラーになるのでちゅいしましょう。

ではbuildして結果を見てみましょう。

あれ、画像ちいさい。。

上記で紹介したコード以外にも下記のようにSwiftUIでImageViewをCollectionViewのCell上に挿入する方法もあります。使用しやすい方を使ってみてください。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "testcell",for:indexPath)
        let imageview = UIImageView(frame: CGRect(x: 0, y: 0, width: "70", height: "100"))
        imageview.image = UIImage(named:photo[indexpath.row])
        cell.contentView.addSubview(imageview)
        return cell
    }

この場合はCollectionViewのCellサイズを変更してみましょう。おそらく検証する端末に

よって画像が小さい場合とかもあるので端末サイズに適応したサイズに画像を指定する必要があると思います。このあたりのCellサイズに関して下記記事で詳しく内容を記載しているので気になる方は是非参考にしてみてください。

「【Swift】CollectionViewのCellサイズを指定する方法」

ひとまずはインスタのように（画像の表示は汚いですが笑）画像を表示できたと思いますので今回の記事はここまでにいたします。

他にも多数Swift関連の記事を記載しているので気になる方は是非参考にしてみてください。