TableViewを使う

todoアプリなどで使用されるtableViewの作成方法を解説

完成形はこれ

TableViewを配置

まずはTableviewを配置して、画面いっぱいに広げましょう

次に、下の画像のように、dateSourcedelegateをViewControllerに紐付けます
こーいうものなので、特に何も考えずにやりましょう

tableviewをviewController.swiftファイルに紐づける

TableViewCellファイルを新規作成

次にtableviewCell用のファイルを新規作成

TableViewCellファイルの編集

このcellファイルで、テーブルビューに表示させたいものを作成していく感じ
まずは.xibファイルにLabelを配置する

testTableViewCellファイルの編集はこれでおしまい

ViewController.swiftの編集

これまで、tableViewを紐付けただけで、何も編集してないので
ViewController.swiftファイルの中身は画像の状態です
これに下記のコードを書いていきます

import UIKit

//UITableViewDelegate,UITableViewDataSourceを追加で記入
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
    
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //アプリ起動時にtableViewを読み込む
        tableView.register(UINib(nibName: "testTableViewCell", bundle: nil), forCellReuseIdentifier: "CustomCell")
    }
    
    //セルを30個生成する
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 30
    }
    //セルはTableViewCellから情報取ってくる
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! testTableViewCell
        
        cell.label.text = "テーブルビューです"
        
        return cell
    }
    
}

これでビルトしてみましょう
テ・・・ ってなってますね 笑

testTableViewcellのレイアウトを調整しましょう

もう一度ビルドしてみたら完成形になると思います

おしまい

コメント

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