[iPhone] Table View をストーリボードで作る (Objective-C)

TableView を storyboard を使って作成してみたいと思います。
-> storyboard を使わないケース

sponsored link

storyboard を使って作った Table View

 
Xcode 5.0.2 で作成すると
最終的にはこんな感じです…
 
tableview_b1
 

Table View 作成の流れ

 

  1. プロジェクトの作成
  2. UIImageView と UILabel の配置
  3. Cell の Identifier や tag の設定
  4. コードの記述
  5. IB とコードを接続

 

プロジェクトの作成

 
簡単なプロジェクト Single View Application を作成
こちらに作り方があります-> Single View Application
 

UIImageView と UILabel の配置

 
storyboad にて View Controller に
UITableView を置きます
 
tableview_b9
 
その上に Table View Cell を追加します
 
tableview_b8
View Controller Scene が
「View」>「Table View」>「Table View Cell」>「Content View」
となるようにします。
 
そして、その Cell に
UIImageView と UILabel を2つ入れます
 
tableview_b2
 
Cell の background を gray に
Label の大きさと色を適宜合わせます
 

Xcode5 のバグ?

 
おそらくバグだと思われますが(現時点でのバーション Xcode5.0.2)
本来ならば、Table View を置き
Attributes Inspector でPrototype Cells を「0」から「1」にすると
Table View Cell が現れてます、その中に ImageView や
Label を入れれば、 Xcode4.6まではできていたのです。
ところが、階層で見ると
Cell の中に入らず Table View の上に乗っています。
 
tableview_b7
 
Xcode4.6 では Content View が隠れていましたが
Xcode5 から Cell の下に現れるようになったようです。
ラベルなどの要素はその Content View の下に追加しないといけないようなので
上のようなワークアラウンドを行います。
 

Cell の Identifier や Tag の設定

 
Table View Cell を選択
Attributes inspector で
Identifier に名前をつける、例として「tableCell」
 
tableview_b3
 
Image View を選択し
Attributes inspector で
「View」にある Tag を「1」に設定
 
tableview_b4
 
Label を選択
Attributes inspector で
「View」にある Tag を「2」と「3」に設定
 
tableview_b5
 

コードの記述

 
UITableViewDelegate, UITableViewDataSource を設定
ViewController.h

 
ViewController.m

  1. 画像を8枚プロジェクトに追加し、その名前を配列 NSArray *imgArray とします
  2. 同じくラベルの情報をそれぞれ配列に入れます
  3. セクションは1個、要素は8個に設定
  4. セルの要素を設定では、UIImageView は viewWithTag:1 でインスタンスを生成
  5. 同じくラベルも設定した Tag に合わせて生成します

 

IB とコードを接続

 
UITableView を table と結び
detaSource と deleate を view と接続します
 
tableview_b6
これでビルド実行すると Tabel View が表示されます。
 

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

シェアする

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

フォローする