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
1
Collection Viewとは
グリッド表示 (縦横方向にセルを並べる)を容易に実装可能
カスタムレイアウトを作成することでもっと自由な表示も可能
10
かっこいい応用例
11
実装の流れ
12
UICollectionView
委譲
UICollectionViewDataSourceセルの生成や管理
UICollectionViewDelegate
セル選択などのアクション
UICollectionCellセル1つを表現するクラス
UICollectionViewLayout
レイアウトを管理
この構造、UITableViewと似てる!
つくってみましょう
13
2
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アプリ開発
楽しみましょう!
お付き合いありがとうございました!