スポンサーリンク

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

Swift
スポンサーリンク

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

スポンサーリンク

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 = ["テスト1", "テスト2", "テスト3"]
    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を行うと上三つの行に文字が表示されているので成功です。

最後になりますが文字が表示されない原因は初期であれば圧倒的にdelegate,datasourceをうまく接続できていないことが原因と考えられます。

今回の記事は以上です。他にもSwift関連の記事を多数記載しているので是非参考にしてください。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

Swift
スポンサーリンク
スポンサーリンク

コメント

  1. […] TableViewをXcodeに紐付けする方法 […]

タイトルとURLをコピーしました