iOS
Swift

SwiftでTableViewを使ってみよう

■まえがき

書いてあること

  • xcodeにて、TableViewを使用したシングルページアプリの作成

モチベーション

TableViewの使い方について、多くの記事が古いバージョン前提になっており、超つまずいた。
特に、swift3.0のアップデートにより、コードの記述ルールが変更になった影響が大きい。

参照:Swift 3.0の変更点まとめ
https://dev.classmethod.jp/smartphone/iphone/implemented_proposals_for_swift3/

■解説

流れ

  1. プロジェクトの立ち上げ
  2. Main.storyboardの設定をする
  3. ViewControllerのコードに追記する
  4. 起動してみる

Step1:プロジェクトを立ち上げる

  • シングルビューを選択

スクリーンショット 2018-03-14 10.58.39.png

  • プロジェクト名などを入力

スクリーンショット 2018-03-14 11.02.20.png

  • 今回は「tableview」にしました

スクリーンショット 2018-03-14 11.02.46.png

さらに詳しくはこちらの記事がわかりやすいです
https://type.jp/et/feature/3008

Step2:メインストーリーボードの設定

画面サイズの設定

  • 作成するアプリの画面サイズを設定しましょう
  • 今回はSEを選択しました(Airを使っているとシミュレーターがはみ出てしまうため)

スクリーンショット 2018-03-14 11.04.40.png

StoryBoardのViewControllerにTableViewを追加

  • UIパーツの中から選んでドラッグ&ドロップ

スクリーンショット 2018-03-14 11.03.38.png

TableViewのレイアウトを設定

  • このままだと綺麗に表示されないので、画面いっぱいに広げましょう
  • 電池マークや時刻などが表示されるエリア(セーフエリア)は空けておきましょう

スクリーンショット 2018-03-14 11.19.57.png

TableViewのOutletsを設定

  • TableViewを選択
  • 右のメニューから「Connection Inspector」を選択
  • OutletsのdataSourceとdelegateからミョン!とドラッグしてください

スクリーンショット 2018-03-14 11.20.38.png

スクリーンショット 2018-03-14 11.20.57.png

TableViewにTableViewCellを追加

  • UIパーツからセルパーツをドラッグ&ドロップ

スクリーンショット 2018-03-14 11.31.30.png

TableViewCellのIdentifierを設定

  • 設置したセルに名前をつける

スクリーンショット 2018-03-14 11.21.48.png

Step3:コードをいじる

追加①「UITableViewDataSource」と「UITableViewDelegate」を追加

  • classの部分に、追記を行う
  • テーブルビューデリゲートとテーブルビューデータソースに関するデータのやりとりもここで扱いますよーという宣言
ViewController.swift
import UIKit

//追加①
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { 

    //最初からあるコード
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    //最初からあるコード
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

追加②リストの中身を定義

  • テーブルに表示させたい中身を宣言してあげる
  • 今回はTODOリストっぽく設定
ViewController.swift
import UIKit

//追加①
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { 

    //追加②
    let TODO = ["牛乳を買う", "掃除をする", "アプリ開発の勉強をする"] 

    //最初からあるコード
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    //最初からあるコード
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

追加③セルの個数を指定するコードを追加

ViewController.swift
import UIKit

//追加①
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{

    //追加②
    let TODO = ["牛乳を買う", "掃除をする", "アプリ開発の勉強をする"]

    //最初からあるコード
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    //最初からあるコード
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    //追加③ セルの個数を指定するデリゲートメソッド(必須)
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return TODO.count
    }
}

追加④セルの中身を表示するコードを追加

ViewController.swift
import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{ //追加①

    let TODO = ["牛乳を買う", "掃除をする", "アプリ開発の勉強をする"] //追加②

    //最初からあるコード
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    //最初からあるコード
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    //追加③ セルの個数を指定するデリゲートメソッド(必須)
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return TODO.count
    }

    //追加④ セルに値を設定するデータソースメソッド(必須)
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // セルを取得する
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        // セルに表示する値を設定する
        cell.textLabel!.text = TODO[indexPath.row]
        return cell
    }
}

Step4:起動してみる

ビルドボタンをポチっ
スクリーンショット 2018-03-14 15.00.48.png

お疲れ様でした!

NextStage!

SwiftでTableViewを使ってみよう
https://qiita.com/TD3P/items/cafa8e20029047993025

Swiftで簡単なTODOアプリを作ってみよう
https://qiita.com/TD3P/items/8f474358d1dd789557f3

Swift カスタムセルを再利用したtableViewの作り方
https://qiita.com/TD3P/items/116a2199b1f872ac6471