【Swift】TableViewにLabelを追加して文字表示させる方法ご紹介。

今回の記事ではSwiftを用いてiPhoneアプリによくある表示方法のTableViewにLabelを追加して文字を表示させる方法をご紹介します。文字が表示できていない原因として最も考えられるdelegate,datasourceの紐付けに関しても説明します。是非参考にしてください。

TableViewにLabelを追加
TableViewをViewControlに接続
TableView上のLabelに文字表示

TableViewにLabelを追加

まずはいつも通りプロジェクトを作成し、UIアイテムを設置していきます。

TableViewをViewControlに接続

ではTableViewを扱う上で必要なクラスがありますのでそれらを追加していきます。

つなげる際に下記のような表示が出ます。

上2つの「dataSource」「delegate」が必要です。二回操作して両方にチェックを入れます。

この操作を行なっていないとbuildはできますが文字情報は入力されていないtableviewのみの表示になってしまうので文字が表示されていない方はここの設定がうまくいっていないと思われます。

この表示になればOKです。

Cellの方のidentiferは任意の名前に設定してください。
今回は「TestCell」にしてます。

最後に追加したtableviewをviewcontrollerに反映させる必要があるのでドラッグしてください。

TableView上のLabelに文字表示

まずはclassの後ろに「UITableViewDelegate, UITableViewDataSource」を追加してください。
超えろついかすると必要な関数を自動で出力してくれるのでFixを押してエラー解消。

class ViewController: UIViewController,UITableViewDelegate, UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        <#code#>
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        <#code#>
    }
    @IBOutlet weak var Testtable: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

現状このようになっていると思われます。
先ほどのエラー解消のために出力した関数はIntを戻り値にしているものは行の数、もう片方が表示をになっています。

配列を使ってデータを表示させるのが最も一般的な表示方法とおもわれるので表示させたいデータを配列にします。

以下がコードになります。

import UIKit

class ViewController: UIViewController,UITableViewDelegate, UITableViewDataSource{
    let test = ["テスト１", "テスト２", "テスト３"]
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return test.count
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "TestCell", for: indexPath)
        //先ほど設定したidentifer
        // セルに表示する値を設定する
        cell.textLabel!.text = test[indexPath.row]
        return cell
    }
    @IBOutlet weak var Testtable: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

これでbuildを行うと上三つの行に文字が表示されているので成功です。