UICollectionViewでかんたん画像一覧アプリ

@bibmeke

1

2013/05/27 修正版

Facebook 名古屋iPhone開発者勉強会https://www.facebook.com/groups/334448853269294/

http://LB8.org/ios_nagoya

からダウンロード出来ます

今回のスライドは

2

始める前に

3

ワークショップで使いたいので、画像ファイルを複数枚(20枚以上)準備願います

iPhotoから

インターネットから

秘蔵お宝画像フォルダから

拡張子は統一してください

iOS 7 楽しみですね！

4

WWDC MMXIII

5

1599ドルのチケットが2分で完売

Keynoteは6月11日 深夜2時～(日本時間)

噂いろいろiOS 7、Mac OS X 10.9？iPhone 5S、廉価版iPhone、カラーバリエーション？iWatch？RetinaなMacBook Air？

iOS 7の噂

6

フラットなデザイン？

カレンダー・メールがリニューアル？

自動車との統合強化？

ストリーミングサービス？

Flickr・Vimeo連携？

iOS 7の噂まとめ。6/10の発表前にまとめてチェックしよう！ / AppBank

を振り返ってみる

7

新しいMap

Passbook

Facebook連携

Collection View

Auto Layout

　などなど…　200を超える　新機能

[要出典]

2012/06/12 発表2012/09/19 リリース

本日のテーマ

8

UICollectionViewを使った

画像一覧アプリ作り

UICollectionViewとは

9

１

Collection Viewとは

グリッド表示 (縦横方向にセルを並べる)を容易に実装可能

カスタムレイアウトを作成することでもっと自由な表示も可能

10

かっこいい応用例

11

実装の流れ

12

UICollectionView

委譲

UICollectionViewDataSourceセルの生成や管理

UICollectionViewDelegate

セル選択などのアクション

UICollectionCellセル１つを表現するクラス

UICollectionViewLayout

レイアウトを管理

この構造、UITableViewと似てる！

つくってみましょう

13

２

Xcodeの起動

14

プロジェクトの種類

15

Single View Application

新しいプロジェクト

16

StoryboardとARCにチェック

プロジェクト名 つくるひと or 組織

適当な文字列を

0から始まる連番ファイル名だと管理が楽かも(0.jpg, 1.jpg, 2.jpg ....)

画像ファイルのインポート

17

余談…

18

連番ファイルを作るにはAutomatorが便利

新しい Objective-Cクラスを作成

親クラスはUICollectionViewCell で

セルを表現するクラスを作成

19

AutoLayoutを無効化

20

チェックを外す

Collection Viewぺたり

21

D&DでCollectionView追加

Cellを整えます

22

Custom Class設定は先ほど作ったクラス

Identifierに適当な名前を

UIImageViewとUILabelを貼り付けます

コードとひも付けします

23

controlを押しながらドラッグ＆ドロップ

Assistant Editorに切替Storyboardとコードが左右に並ぶ先ほど作ったCellクラスのヘッダーを選ぶ

名前を決定

デリゲート指定

24

Collection ViewのdataSourceとdelegateをView Controllerへ

コード書いていきます

25

～ViewController.h

UICollectionViewDelegate, UICollectionViewDataSource

デリゲート2つ追加

コード書いていきます

26

～ViewController.m

CollectionViewCell.hをインポート

コード書いていきます

27

～ViewController.m

// セルの数を指定するメソッド- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ return 50;}

画像の数を指定

// 指定された場所のセルを作るメソッド- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ // セルを生成 or 再利用 LB8CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"myCell" forIndexPath:indexPath]; // 画像ファイル名 NSString *strName = [NSString stringWithFormat:@"%d.jpg", indexPath.row]; // 画像を貼り付け cell.imageView.image = [UIImage imageNamed:strName]; // ラベルに番号を表示 cell.labelView.text = [NSString stringWithFormat:@"%d", indexPath.row + 1]; return cell;}

コード書いていきます

28

～ViewController.m

// iOS 5までstatic NSString *CellIdentifier = @"Cell";UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];if (!cell) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];}

余談…

29

// iOS 6からstatic NSString *CellIdentifier = @"Cell";UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

再利用できなければ勝手にinit

TableViewCellの再利用にも若干の変化が

30

左上のRunボタンで実行します

実はもう動きます

レイアウトをいじる

31

UICollectionViewLayout(抽象クラス)で様々なレイアウトを表現可能

縦横にセルを並べるUICollectionViewFlowLayoutが予め用意されている

デリゲートもうひとつ追加

32

～ViewController.h

UICollectionViewDelegateFlowLayout

パーツをセルの大きさ依存に

33

labelViewUIImageView

UIImageView … 上下左右固定、幅高さ可変

UILabel … 左右下固定、幅可変

// セルのサイズを定義- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{ // 画像ファイル名 NSString *strName = [NSString stringWithFormat:@"%d.jpg", indexPath.row]; // ファイル UIImage *image = [UIImage imageNamed:strName]; // 画像サイズを定義 const CGFloat height = 65.0f; const CGFloat width = height * image.size.width / image.size.height; return CGSizeMake(width, height);}

セルのサイズを画像依存に

34

～ViewController.m

35

左上のRunボタンで実行します

実行してみましょう

自由時間

36

納得がいくまでデザインを変えてみる

かっこいいレイアウトを参考にしてみる（GitHubとかにいろいろ上がってます）

37

iPhoneアプリ開発

楽しみましょう！

お付き合いありがとうございました！