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

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

Swift 4.0
Xcode 9.1

 

UITableView

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

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

UIImageView と UILabel の配置

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

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

 

Cell の Identifier や Tag の設定

 
Table View Cell を選択して、Attributes inspector にある Identifier に名前をつけます、例として「tableCell」とします。
 
Table View Cell Identifier
 
Image View を選択して、Attributes inspector の「View」にある Tag を「1」に設定
 
Tag number set on UIImageView
 
Label を選択して、Attributes inspector の「View」にある Tag を「2」と「3」に設定します。
 

Tag number set on UILabel

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

 

コードの記述

 
Assets.xcassets フォルダーに画像を入れます。
 
put images into Assets.xcassets
 
これでコードを記述していきます。
Cellの高さは heightForRowAt を使ってコードで設定しましたが、ArticleCellを使って設定するやり方もあるようです。

ViewController.swift

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

コードの紐付け

 
それぞれ下の画像のように紐付けします。
TableView -> table
detaSource -> View Controller
delegate -> View Controller
 
connections between the storyboard and each elements
これでビルド実行すると Tabel View が表示されます。
 

 
関連ページ:


ページのトップへ戻る

シェアする

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

フォローする