Swift

Swift:基本的なUICollectionViewControllerの使い方


今回はUICollectionViewControllerの使い方をメモしていきます。

 

UICollectionViewControllerとは

アルバムアプリがUICollectionViewControllerをもっとも意識しやすいと思います。

四角い枠が画面内にいっぱいに敷き詰められていてる状態です。

それがUICollectionViewControllerです。

 

あとはFacebookのタイムラインで出て来る『知り合いかも』の欄です。

横スクロールしますが、あれもUICollectionViewControllerで実装できます。

 

このように、UITableViewControllerのように縦リスト形式ではなく、

横や数列のリスト形式のものを実装できることがUICollectionViewControllerの特徴です。

 

 

 

UICollectionViewControllerの実装の流れ

まずはStoryboardを開き、

デフォルトのUIViewControllerは捨てて、

UICollectionViewControllerを配置しましょう。(is initial View Controllerにも忘れずにチェックを!)

 

 

 

そして、

セルにIdentifierを設定します。

  1. Collection view cell を選択した状態で、
  2. Identifierを『cell』に設定。

 

 

 

 

次にStoryboardに置いたUICollectionViewControllerに対応したファイルを作成します。

[File]

[New]

[File]

 

次に[Cocoa Touch Class]を選択。

 

次に

Class名は『CollectionViewController』

SubClass名は『UICollectionViewController』

に設定。

 

 

するとこのようなファイルが作成されるかと思います。

 

めちゃくちゃ長いですねー、

コメントアウトされている部分のすごく多いです。

一般的によく使用されるであろうメソッドを勝手に書いてくれているんですよね。

Xcodeは本当に優秀です。。。

でも今回使うのはこの半分くらいです。笑

 

さっと編集していきます。

編集ポイントは二つです。

  1. identifierを”Cell”から”cell”に変更。
  2. コメントアウトの削除(あると見づらくて邪魔なので・・・)
 

ここで

Storyboardに戻りましょう。

CollectionViewController.swiftをStoryboard上のUICollectionViewControllerに対応させましょう。

 

 

ここでひとまず完成です!RUNしましょう。

このような画面になれば完璧です!

 

コードの解説

上から見ていきましょう。

register

実はこれ必要ありません!

xibファイルを使用してUICollectionViewCellをカスタマイズする際に必要になります。

numberOfSections

これはセクションの数を決めるメソッドです。

戻り値に数を指定します。

セクションとは、セルをまとめる大枠です。

今回は1に設定しているのでセクションを感じませんが、2、3と増やしてみるとわかりやすいです!

numberOfItemsInSection

これはセルの数を決めているメソッドです。

戻り値に数を指定します。

今回は100に設定しました。

大きな数を設定すると、画面からはみ出ますが、

スクロール機能がデフォルトでついています。

cellForItemAt

おそらくこれが一番の難所です。

ここでは、セルに表示する内容を決めています。

今回はbackgroundColorを指定するだけにしていますが、

画像や、文字なんかもここで設定します。

特にややこしいのが、

ここですね。

なるべくシンプルに考えましょう。

ここでは、Storyboardで指定したidentifier『cell』を

withReuseIdentifierに設定します。

今回は定数reuseIdentifierに『cell』を格納していたのでこのようになりましたが、

別の書き方をするなら

と書くことも可能です。

 

以上です!


ABOUT ME
ささお
3年目iOSエンジニア。 スタートアップで働いておりやす。 プログラミングスクールとエンジニアのキャリアを考えたい。 作ったアプリ - https://apps.apple.com/us/app/loverprofile/id1463563845?l=ja&ls=1