UITableView

UITableViewはテーブル情報を表示するクラスです。リスト一覧を表示させる標準的な機能をStoryBoardを利用しないでコーディングだけで実装してみます。

uitableviewサンプル画像

UITableViewのクラス階層

NSObject
↑
UIResponder
↑
UIView
↑
UIScrollView
↑
UITableView

参考： UIKit Framework Reference UITableView Class Reference
参考：How to make a simple tableview with iOS 8 and Swift
参考：Add UITableView programmatically in Swift

やってみた

TableViewはすこしややこしいですので、以下コードを全てViewController.swftにコピペして試すとわかりやすいかと思います。まず完全なコードを貼り付けてから説明して参ります。太字の箇所が大切な行です。


import UIKit

class ViewController: UIViewController,UITableViewDelegate, UITableViewDataSource {
    
    //テーブルビューインスタンス作成
    var tableView: UITableView  =   UITableView()
    
    //テーブルに表示するセル配列
    var items: [String] = ["Swift-Salaryman", "Manga-Salaryman", "Design-Salaryman"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        //テーブルビュー初期化、関連付け
        tableView.frame         =   CGRectMake(0, 50, 320, 200);
        tableView.delegate      =   self
        tableView.dataSource    =   self
        tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
        self.view.addSubview(tableView)
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.items.count
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        var cell:UITableViewCell = tableView.dequeueReusableCellWithIdentifier("cell") as UITableViewCell
        cell.textLabel?.text = self.items[indexPath.row]
        return cell
    }
    
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        println("セルを選択しました！ #\(indexPath.row)!")
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
};

それぞれの説明

インスタンス作成

最初の太字の箇所です。var tableView: UITableView = UITableView()
ViewControllerの上にTableViewを追加する為にインスタンスを宣言します

表示するアイテムを作成する

var items: [String] = ["Swift-Salaryman", "Manga-Salaryman", "Design-Salaryman"]
これはなんでもOKです。リストに表示したい文字列をリストアップしてください。

初期化処理

上の例ではviewDidLoad時に実施しています。
tableView.frame = CGRectMake(0, 50, 320, 200);
サイズをセット。画面全体に表示するも一部に表示するもカスタマイズ可能です。

DelegateをUIViewControllerに関連付け

tableView.delegate = self
ちょっとわかりずらいdelegate。これはViewControllerに追加したインターフェースのプロトコルUITableViewDelegateと連携しています。
この行を追加する＝UITableViewDelegateを追加する必要があるので注意してください。

DataSourceをUIViewControllerに関連付け

tableView.dataSource = self
こちらもdelegateと同様にUITableViewDataSourceと連携しているので注意です。delegateとdatasourceはUITableViewを利用するには 「必要なので追加」と丸暗記した方が混乱しないかもしれません。

CellをTableViewに登録

tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
ここでセルをUITableViewに登録します。セルをカスタマイズしたい（画像をつけたり二行にしたり等）はこちらをカスタマイズします。

UITableViewCellの記事はこちらからどうぞ！

サンプル画像

関数を追加

上記の設定の準備が整えば次はイベントを受け取る関数を追加していきます。この関数がない場合はエラーが発生します。理由はUITableViewDataSourceのProtocolインターフェースが必須だよ〜と宣言しているからです。興味のある方はクラスの中を覗いてみてください。以下一部参照。optionalがついていないものは必須。


protocol UITableViewDataSource : NSObjectProtocol {
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
    optional func numberOfSectionsInTableView(tableView: UITableView) -> Int // Default is 1 if not implemented
    ...
}

上記よりnumberOfRowsInSection、cellForRowAtIndexPath
は必須ですので追加しましょう。あとはTableViewをクリックした時にイベントを取得する為にdidSelectRowAtIndexPathを追加して完了。こちらもUITableViewDelegateの中身をみてみると勉強になりますよ！

Protocolが良くわからない場合は、過去記事（Protocol）を是非ご一読くださいませ。

↓こんな記事もありますよ！

2021-04-22 14:54:53	かっこいいカルーセル厳選3点！WebGLを使った渋い画像スライダー。昨日カッコいいスライダーを探す旅にでていました。よく使われるswiper など、シンプルで使いやすくデザインも良いのですが、何かもの足りない、、、。そこで調べていくと、webglを使...
2021-04-20 14:46:43	Twillioとは何？？skywayとは何が違うのか。webrtcを使う際に判断する情報。先日webrtc開発で「twillio」といった名前を聞きました。以前自分でskywayを使ってwebrtcを試していた際に調べた時には、無かったような気もするんだけと、KDDIが絡んでいる...
2021-04-19 13:58:21	先日久々にアップデートした妊娠週刊パパのAndroid版も。アカウント移管したいんだけど、注文ID見当たらないよ。先日の妊娠、出産、育児関連のアプリ「妊娠週刊パパ」をAndroid studioで再リリースしようと思ってるんだけど、コンパイル失敗してエミュレータで動かせない。多分sdkとかapiのバージ...