UICollectionViewの一番簡単なサンプル【Objective-C】iOSアプリ開発

objective-c
objective-c

今回は、UICollectionViewの使い方をご紹介します。

UICollectionViewを使えば、TableViewのようにセルをタイル状に並べたり、カスタマイズすることで、画像一覧表示などを少ないコードで実現できます。

 

 

1.StoryBoardでUICollectionViewのUIを作成

 

 

まずは、UICollectionViewのUIを作ります。

StoryBoardを開いて、ViewControllerにCollectionViewを追加します。

1

 

 

次に、ViewControllerにCollectionViewを紐付けます。

Control+マウスで、StoryBoardのViewControllerから、ViewControllerのヘッダファイル(以下の例だと、ViewController.h)にドラッグ&ドロップします。

ドラッグ&ドロップすると、以下のようなポップアップがでるので、名前を入力して「Connect」を選択してください。

 

 

2 3

ViewControllerのヘッダファイルに、UICollectionViewが表示されるようになれば、紐付け成功です。

 

あともう1点、UICollectionViewのCellを選択した状態で、Identifierの項目に適当な名前を入力します。(これは後で使用します。)

4

以上で、StoryBoard側の設定が完了です。

 

2. ViewControllerのソースをいじる

 

次に、ViewControllerのソースをいじっていきます。

ViewController.h
 

 

ViewController.m
 

超ざっくり説明すると、

 

ViewController.h

UICollectionViewのデータソースとデリゲートを受け取ることを宣言し、

 

ViewController.mの

でdelegateとdatasourceをセットする。これで、デリゲートメソッドが呼ばれるようになります。

 

↑はセクションの数を指定する。今回はサンプルなので、1を指定。

 

↑はセクションに応じたセルの数を返す。100を指定。

 

↑はセルの生成部分。生成時に背景を青色にする処理を加えた。

 

実行結果

 

実行結果はこんな感じになります。

Simulator Screen Shot 2016.02.27 16.32.17

100個のセルがタイル状に並ぶものが表示されれば完成です。

色々カスタマイズすると、画像を表示したりヘッダを追加したりできるので、是非試してみてください!

 

 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

主に芸能ニュース・エンタメ・WordPress・iOS・Android・ゲームについて書いてます。 楽しいこと、面白いことが大好き。本業はシステムエンジニア。芸能ニュース、アフィリエイト、スマホゲーム、アプリ開発についての記事を書いていきます。