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

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

Swift 5.1
Xcode 11.3.1

 

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
 
UIImageView を選択して、Attributes inspector の「View」にある Tag を「1」に設定
 
Tag number set on UIImageView
 
Label を選択して、Attributes inspector の「View」にある Tag を「2」と「3」に設定します。(場所的にLinesと間違えやすいので注意です)
 

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

 
 
関連ページ:

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

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


TECH ACADEMY
自宅にいながら1時間でプログラミング基礎を習得

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


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



とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約20,000名の受講生と300社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。


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


シェアする

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

フォローする