[iPhone] UITableView をストーリボードで作る

TableViewを作るには、UITableView専用のTableViewControllerを使うこともできますが、お馴染みのViewControllerにstoryboardを使って作成してみたいと思います。

 
table_01

Swift 3.0
Xcode 8.0

 

sponsored link

UITableView

 
TableViewの作成の流れは大まかにこうなります

  1. UIImageView と UILabel の配置
  2. Cell の Identifier や tag の設定
  3. コードの記述
  4. コードの紐付け

 

1. UIImageView と UILabel の配置

 
storyboad にて View Controller に
UITableView を置きます
 
swift_tableview_2
 
その上に Table View Cell を追加します
 
swift_tableview_3

View Controller Scene が
「View」>「Table View」>「Table View Cell」>「Content View」
となっていればOKです。
 
そして、その Cell に
UIImageView と UILabel を2つ入れます
 
tableview_b2
 
(見やすくするためですが)
Cell の background を gray に
Label の大きさと色を適宜合わせます
 

2. Cell の Identifier や Tag の設定

 
Table View Cell を選択
Attributes inspector で
Identifier に名前をつける、例として「tableCell」
尚このtableCellはコードで使います
 
tableview_b3
 
Image View を選択し
Attributes inspector で
「View」にある Tag を「1」に設定
 
tableview_b4
 
Label を選択
Attributes inspector で
「View」にある Tag を「2」と「3」に設定
 

tableview_b5

TableCell と Content View もTagが設定できますがこの場合「0」になっていることを確認してください。これらのTagがImageViewやLabelと重なると「SIGABRT」になります。
 

3. コードの記述

 
Assets.xcassets フォルダーに画像を入れます。
 
screen-shot-2016-09-16-at-18-54-55
 
これでコードを記述していきます。
ViewController.swift

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

 

4. コードの紐付け

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

次は セルの選択 です

尚,Objective-C を使うケースは こちら にあります