【Swift/Xcode超入門】リストを使ったアプリを作ってみよう

いつも通り、Create a new Xcode project>Appでプロジェクトを作成します。

①「Product Name」に、TableViewと入力

②「Interface」は、Storyboardを選択

③「Language」はSwiftを選択

④全てチェックなし

⑤「Next」をクリック

①Practiceに保存しましょう。

②「Create」をクリック

これでプロジェクト作成が完了しました。

①Main.storyboardを選択

②画面の上のバーをクリック

③  (Embed In)を選択

④「Navigation Controller」をクリック

これでとりあえず、ナビゲーションバーができました。

①Titleを選択

② （Show the Attributes inspector）をクリック

③「Bar Tint」を任意の色(画像は#516C9D)に変更

④「Title Color」をWhite Colorに変更

①画面のナビゲーションバータイトルをクリック

② （Show the Attributes inspector）をクリック

③「Title」にリストと入力

①プラスボタンをクリック

②TableViewを画面にドラッグ&ドロップ

TableViewを画面いっぱい広げましょう。

①プラスボタン

②TableViewCellをTableViewの上にドラッグ&ドロップ

①左のメニューからTableViewCellを選択

② （Show the Attributes inspector）をクリック

③「identifier」にCellと入力

①Table View右クリック

②dataSourceをView Controllerにドラッグ&ドロップ

同じように、delegateをドラッグ&ドロップで紐付けましょう。

これで、Storyboardの紐付けが完了です。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

class ViewController: UIViewController {

を

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

に変更しましょう。

ここでは、先ほど、Storyboardで紐付けた、DelegateとDataSourceを使えるようにしています。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    var fruits = ["りんご", "みかん", "ブドウ", "レモン", "スイカ"]

    override func viewDidLoad() {
        super.viewDidLoad()
    }

}

フルーツのデータが入っている配列を用意します。

ここに入っている単語がテーブルに表示されるようになります。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    var fruits = ["りんご", "みかん", "ブドウ", "レモン", "スイカ"]

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return fruits.count
    }

}

上記のように追加してください。

ここでは、テーブルに表示するセルの数を指定しています。

今回は、fruits.count「フルーツの数」で指定していますので、「5」です。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    var fruits = ["りんご", "みかん", "ブドウ", "レモン", "スイカ"]

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return fruits.count
    }
    //追加
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        cell.textLabel!.text = fruits[indexPath.row]
        return cell
    }
}

ここでは、テーブルのセルの内容を決めているんだなぁ程度の理解で大丈夫です。

cell.textLabel!.text = fruits[indexPath.row]で、テーブルのセルに、フルーツの値を入れています。

これでコーディングは終わりです。