[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で適宜調整。
 

 
 
関連ページ:



一人でアプリ開発の限界を感じたら

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンライン・スクールがいいと思います。


TECH ACADEMY
iPhoneアプリコース


こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン




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


シェアする

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

フォローする