[iPhone] UICollectionView で Grid 表示(Objective-C)

UICollectionView を使うと、Grid like な表示ができます。
 
幾つか作り方がありますが、使い方は UITableView に似ています。
 
今回は storyboard を使い Cell内の要素をTagで識別する方法で作ってみます。

sponsored link

UICollectionView

 
storyboard にて Collection View を View Controller に配置します
背景が黒で見にくいので、Light Gray に設定しておきます
 
collectionview_2
 
「View」->「Collection View」にある
「Show the Size inspector」アイコンを選択

例として、Cell を横に3つ入るように
Cell Size を 106 x 106 に
Min Spacing For Lines を 1 に
設定します。
 
スクリーンショット 2014-02-23 22.40.49
「View」->「Collection View」->「Collection View Cell」を選択し
Collection View Cell がない場合はユーティリティー・エリアのライブラリーから
持ってきてもできます
 
collectionview_3
 
Cell の Identifier を例えば「Cell」と設定します。
 
スクリーンショット 2014-02-23 20.00.11
 
この Cell の中に、ユーティリティー・エリアのライブラリーから
UIImageView と Label を持ってきて置きます。
 
collectionview_4
 
UIImageView の View Tag を「1」

 
collectionview_5
 
Label の Tag を「2」とセットします
また、Label の文字色は白に設定
 
collectionview_6
 

ViewController にコードを記述

 
photo1.jpg から photo18.jpg の画像を18個用意して
「Add Files to “xxx”…」でプロジェクトに追加します。

UICollectionViewDataSource, UICollectionViewDelegate を設定
 
ViewController.h

 
ViewController.m

 

– (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

section 数の設定、今回は1つにセット

– (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

item 数、今回は18個

cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”Cell” forIndexPath:indexPath];

dequeueReusableCellWithReuseIdentifier の働きは
再利用できるセルがあればそれを使う
再利用できるセルがなければ生成する
 

UIImageView *imageView = (UIImageView *)[cell viewWithTag:1];

storyboard 上の画像につけたタグに合わせて UIImageView のインスタンスを生成します。
 
storyboard に戻って
Collection View を選択して
dataSource -> View Controller
delegate -> View Controller
New Referencing Outlet -> collectionView
とそれぞれ結ぶ
 
collectionview_7
 
ビルドして実行すると
 
collectionview_1
 

ページのトップへ戻る
 
sponsored link

シェアする

  • このエントリーをはてなブックマークに追加

フォローする