Takahiro Octopress Blog

-1から始める情弱プログラミング

UICollectionViewCellをカスタム化しよう！

はじめに

今回は基礎中の基礎ではあるものの、結構忘れがちなカスタム化についてメモ書きしておきたいと思います。
その題材として UICollectionViewCell を使ってみます。

カスタムファイルの作成

まずは xib ファイルを作成します。
今回は下記のように UIImageView を持たせるようにカスタム化させます。
(CustomCollectionViewCell.xibとします。)

xibファイル

これと対となるswiftファイルを作成します。
(CustomCollectionViewCell.swiftとします。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// CustomCollectionViewCell.swift
import UIKit

class CustomCollectionViewCell: UICollectionViewCell {

  @IBOutlet weak var imageView: UIImageView!

  override init(frame: CGRect) {
    super.init(frame: frame)
    self.xibViewSet()
  }

  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)!
    self.xibViewSet()
  }

  internal func xibViewSet() {
    if let view = Bundle.main.loadNibNamed("CustomCollectionViewCell", owner: self, options: nil)?.first as? UIView {
      view.frame = self.bounds
      self.addSubview(view)
    }
  }
}

このxibとswiftファイルを繋ぐために xibファイルのFile's OwnerのCustom ClassのClassにクラス名を入力します。

xibとswiftの接続

Storyboardにカスタム部品を配置

続いて、先程作成したカスタム部品をStoryboardに配置します。
今回は UICollectionViewCell をカスタム化しているので、右メニューから UICollectionView をドラッグ&ドロップして持ってきます。

UICollectionViewをドラッグ&ドロップ

持ってきた部品とカスタム化クラスを結びつけます。
右メニュー > Show the Identity inspector > Custom Class > Class にクラス名を入力します。

カスタムクラスへの接続

CustomCollectionViewCellの表示

ここまでくれば後はいつも通りUICollectionViewを使えば良いだけです。

・ Storyboard 上で Collection Reusable View の Identifier に値を設定
・ 下記の通りソースコードを実装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import Foundation
import UIKit

class CreateShopMemoViewController: UIViewController, UICollectionViewDataSource {

  /// UICollectionView
  @IBOutlet weak var collectionView: UICollectionView!

  override func viewDidLoad() {
    super.viewDidLoad()
    self.collectionView.dataSource = self
  }

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

  // MARK: - UICollectionViewDataSource
  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as? CustomCollectionViewCell
    // 画像を設定 (今回はサンプルのためNoImageIconというものがあることを想定しています)
    cell?.imageView.image = UIImage(named: "NoImageIcon")

    return cell!
  }

  func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 1
  }
}

その結果は下記の通りです。

CustomCollectionViewCellの表示

因みに、今回のように、Viewを1枚ペタッと貼るだけであれば、

1
2
3
4
5
6
7
8

// MARK: - UICollectionViewDataSource
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
  let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath)
  // 画像を設定 (今回はサンプルのためNoImageIconというものがあることを想定しています)
  cell.backgroundView = UIImageView(image: UIImage(named: "NoImageIcon"))

  return cell
}

とすれば良いだけです。

まとめ

今回は完全なるメモ書きでしたが、カスタム化の基礎なので、十二分に慣れておかないとですね。
と言ったところで本日はここまで。

参考

Comments