【Swift UIKit】UICollectionViewの使い方!グリッドレイアウトの実装方法!

この記事からわかること

  • SwiftUIKitグリッドレイアウト実装する方法
  • UICollectionView使い方
  • UICollectionViewDelegate/UICollectionViewDataSourceプロトコルとは?

index

[open]

\ アプリをリリースしました /

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

SwiftのUIKitでUICollectionViewを使用してグリッドレイアウトを実装する方法をまとめていきます。

公式リファレンス:UICollectionView

SwiftUIで実装できるグリッドレイアウトの例

UICollectionView

@MainActor  class UICollectionView : UIScrollView

UICollectionViewUIScrollViewを継承しているUI部品の1つデータを整列して並べることができる機能を提供するクラスです。

SwiftUIではLazyVGridなどを使用して同じようなグリッドレイアウトを実装します。実装方法は大きく異なるので詳しくは以下の記事を参考にしてください。

おすすめ記事:【Swift UI】グリッドレイアウトの実装方法!LazyVGridとGridItemの使い方

実装の手順

今回はStoryboardを使用した実装方法です。

おすすめ記事:【Swift】delegate(デリゲート)とは?使い方とメリット

実装するにはUITableViewなどと同様にdataSourceとdelegateを設定する必要があります。そのためにViewControllerクラスにはUICollectionViewDelegateUICollectionViewDataSourceプロトコルの準拠が必要になります。

おすすめ記事:【Swift UIKit】UITableViewの使い方!リストビューの実装方法

必要となるデリゲートメソッド

2つのプロトコルに準拠させたことでUICollectionViewを構築するために必要なデリゲートメソッドを呼び出せるので、任意の値や処理を渡してグリッドレイアウトの設定をします。最低限必要になるのは以下の2つのメソッドです。

import UIKit

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource {
    // 項目数:UICollectionViewDataSource
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 
    }
    // セル生成:UICollectionViewDataSource
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    }
}

公式リファレンス:UICollectionViewDelegate
公式リファレンス:UICollectionViewDataSource

グリッドレイアウトの実装方法

実際にStoryboardからグリッドレイアウトを実装する方法を見ていきます。

  1. StoryboardからUIを配置
  2. セルの識別子を入力
  3. UI部品を設置しTagを指定
  4. ViewControllerクラスに各プロトコルを準拠
  5. Storyboard(またはviewDidLoad内)からdelegateなどを紐付け
  6. 必要なデリゲートメソッドを定義

StoryboardからUIを配置

まずはStoryboardからUI(Collection View)を配置して画面いっぱいに広げておきます。

【Swift UIKit】UICollectionViewの使い方!グリッドレイアウトの実装方法!

セルの識別子を入力

続いて識別子(identifier)を設定します。今回は「CollectionCell」としておきました。

【Swift UIKit】UICollectionViewの使い方!グリッドレイアウトの実装方法!

UI部品を設置しTagを指定

UI部品(UILabel)を設置しコードからアクセスできるようにTagを指定しておきます。背景色をつけておくと分かりやすいので設定しておきます。

【Swift UIKit】UICollectionViewの使い方!グリッドレイアウトの実装方法!

ViewControllerクラスに各プロトコルを準拠〜必要なデリゲートメソッドを定義

プロトコルの準拠とStoryboard(またはviewDidLoad内)からdelegateなどを紐付け、必要となるデリゲートメソッドを記述し、今回は表示する値を配列として定義しておきます。

import UIKit

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource {
    
    let numbers: [Int] = Array(0..<60)

    // @IBOutlet  weak var collectionView:UICollectionView!
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return numbers.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell:UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionCell", for: indexPath)
        let label = cell.contentView.viewWithTag(1) as! UILabel
        
        label.text = String(numbers[indexPath.row])
        return cell
    }
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // コードで紐付けする場合
        // collectionView.delegate = self
        // collectionView.dataSource = self
    }
}
【Swift UIKit】UICollectionViewの使い方!グリッドレイアウトの実装方法!

タップされた際に処理を実装する

グリッドレイアウトのデータをタップされた時に任意の処理を実装するにはcollectionView(_:didSelectItemAt:)を使用します。

func collectionView(_ collectionView: UICollectionView,   didSelectItemAt indexPath: IndexPath) {
    print(numbers[indexPath.row])
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

フレームワーク:Laravel/Vue.js

作成の流れQiita「Laravel×Vue.jsを使って初めてWebアプリを自作しました!」

感想:初めて作成したWebアプリです!メールアドレスでの会員登録や質問投稿、回答やコメント、いいねやフォローなどSNSに近い機能を実装してみました。レビューや修正すべきポイントなどを教えていただけると嬉しいです!

New Article

index