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

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

Xcode 13.4.1

 

UITableView

 
UITableViewはリスト形式でいくつも要素を追加できるものです。

AndroidではListViewという似たようなものがあります。また、Table View Controllerから直に作る方法もありますが、ここではViewControllerにTableViewを設定する方法です。
 

 

UIImageView と UILabel の配置

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

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

 
そして、UIImageView と UILabel を2つ入れます。
 

左のView Controller Sceneのヒエラルキー が
「View」>「Table View」>「Table View Cell」>「Content View」>
「Image View」「Label」「Label」
となっていればOKです。
 
(見やすくするためですが)
Cell の background を gray にしたり、Label の大きさ位置を適宜合わせます

 

Cell の Identifier や Tag の設定

 
Table View Cell を選択して、Attributes inspector にある Identifier に名前をつけます、例として「tableCell」とします。
 

 
「UIImageView」を選択して、Attributes inspector の「View」にある Tag を「1」に設定
 

 
Label を選択して、Attributes inspector の「View」にある Tag を「2」と「3」に設定します。(場所的にLinesと間違えやすいので注意です)
 

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

 

コードの記述

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

ViewController


 

  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:


シェアする

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

フォローする