Help us understand the problem. What is going on with this article?

SwiftでTableViewを使ってみよう

More than 1 year has passed since last update.

■まえがき

書いてあること

  • 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!

🎉TODOアプリを作ってみようシリーズ

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

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

📱Swiftでカスタムセルを再利用したTODOアプリを作ってみよう
https://qiita.com/TD3P/items/116a2199b1f872ac6471

📱SwiftでCoreDataを使ったTODOアプリを作ってみよう
https://qiita.com/TD3P/items/adbbeee827995cffd509

📱SwiftでRealmを使ったTODOアプリを作ってみよう
https://qiita.com/TD3P/items/616e0dbd364179ca284b

pe-ta
全然わからない。俺は雰囲気でコードを書いている。 座右の銘:もっと真剣にふざけたい。
codmon
保育園・幼稚園向け業務支援システム「コドモン」の開発・運営を手がける会社です。
https://www.wantedly.com/companies/codmon
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away