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

 
 
関連ページ:

スマホの下取り

まだ1年も使っていないスマホを新機種に変えたくて下取りしようとお店に持ち込んだことがありますが
結局なんだかんだと思ったほどの金額になりませんでした(涙

このネットオフは専業のため高額買取が可能で、お店に行く時間が無い人にとっては送料無料の宅配便が自宅まで引取りに来てくれるのは助かります。

定額買取キャンペーン中であればキズがあっても付属品が無くても減額無しなのでお得です。」


 

 

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





ページのトップへ戻る

モバイルバッテリー
ワイヤレス充電 Qi

iPhone 10000mAh Qi iPhone 急速充電
おしゃれ ガラス画面

シェアする

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

フォローする