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

UICollectionView を使うと格子状、Gridの表示ができます。使い方は UITableView に似ています。Cell内の要素をTagで識別する方法で作ってみます。
 

Objective-C
Xcode 8.2.1

 

UICollectionView

 
storyboard のView Controller上に Collection View を配置します。
 

 
Collection Viewを選択し、位置やサイズ決める「Show the Size inspector」を選択
 
例として下のように、iPhone7でCell を横に2つ入るようにCell Size を187 x 187 に、また Min Spacing For Lines を 0 に設定します。
 

「Collection View Cell」を選択してサイズをmanualで変更することもできます。
 

 
Collection View Cellを選択した状態で
 

 
Collection Reusable Viewの Identifier を、例えば「Cell」と設定します。
 

 
この Cell の中に、UIImageView と Label を置きます。
 

 
UIImageView の View にある Tag を「1」
 

 
Label の Tag を「2」とセットします。
 

 

ViewController にコードを記述

 
以下コードを記述していきます。
UICollectionViewDataSource, UICollectionViewDelegate を設定
 
ViewController.h

 
例として画像を10個用意し「Add Files to “xxx”…」でプロジェクトに追加しました。
 

 
画像名を配列要素にします。NSArray *photos;

 
ViewController.m

 
storyboard に戻ってCollection View を選択
dataSource -> View Controller
delegate -> View Controller
New Referencing Outlet -> collectionView
とそれぞれ紐付けします。
 

 
ビルドして実行するとCollectionViewが表示されました。
 

 
Swiftのケースはこちらです。


ページのトップへ戻る

シェアする

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

フォローする