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

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

Swift 4.2
Xcode 10.0

 

UITableView

 
リスト形式でどこまでも要素を追加して表示できるというスマホの特徴あるUITableViewです。AndroidではListViewという似たようなものがあります。また、Table View Controllerから直に作る方法もありますが、ここではViewControllerにTableViewを設定する方法です。
 

 

UIImageView と UILabel の配置

 
storyboad にて View Controller に
Table View を置きます
 

 
その上に Table View Cell を追加します
 

左の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」のエラーになってしまいます。

 

コードの記述

 
表示する画像を8枚ほど用意します。(とりあえずここでは解像度を@2xにしてそろえました)
Assets.xcassets フォルダーに画像を入れます。
 
put images into Assets.xcassets
 
これでコードを記述していきます。
Cellの高さは heightForRowAt を使ってコードで設定しましたが、ArticleCellを使って設定するやり方もあるようです。

ViewController.swift

 

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

コードの紐付け

 
それぞれ下の画像のように紐付けします。
TableView -> table
detaSource -> View Controller
delegate -> View Controller
 
connections between the storyboard and each elements
これでビルド実行するととりあえず Tabel View が表示されます。
画像サイズ、テキストフォントなどstoryboardで適宜調整。
 

 
 
関連ページ:

誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:




ページのトップへ戻る

シェアする

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

フォローする