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

サトリク

アプリの80%がリストを使っています。そのため、リストの作り方は絶対に覚えておかなければなりません。

この講座では、簡単なリストをさくっと作る方法をご紹介します!

 

動作環境

item Version
Swift 5.3
Xcode 12.0.1

バージョンの確認方法

 

この講座の完成イメージ

たくさんのフルーツを表示するリストを作ってみたいと思います。

 

アプリ開発手順

プロジェクトを作成

STEP.1
プロジェクト作成

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

STEP.2
プロジェクトの設定

①「Product Name」に、TableViewと入力

②「Interface」は、Storyboardを選択

③「Language」はSwiftを選択

④全てチェックなし

⑤「Next」をクリック

STEP.3
プロジェクトの保存

Practiceに保存しましょう。

②「Create」をクリック

完了

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

storyboard(画面レイアウト)の編集

STEP.1
ナビゲーションバーを作成

Main.storyboardを選択

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

  (Embed In)を選択

④「Navigation Controller」をクリック

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

STEP.2
ナビゲーションバーの色を変更

①Titleを選択

(Show the Attributes inspector)をクリック

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

④「Title Color」をWhite Colorに変更

STEP.3
ナビゲーションバーのタイトルを変更

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

(Show the Attributes inspector)をクリック

③「Title」にリストと入力

STEP.4
TableViewを配置

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

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

STEP.5
TableViewを広げる

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

STEP.6
Table View Cellを配置

①プラスボタン

TableViewCellTableViewの上にドラッグ&ドロップ

STEP.7
TableViewCellにIDをつける

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

(Show the Attributes inspector)をクリック

③「identifier」にCellと入力

STEP.8
dataSourceを紐付け

Table View右クリック

dataSourceView Controllerにドラッグ&ドロップ

STEP.8
delegateを紐付け

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

完了

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

コーディング

次に、テーブルのセルの中身を書いていきたいと思います。

STEP.1
ViewController.swiftをクリック

まずは、ViewController.swiftを開きましょう。

STEP.2
継承
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を使えるようにしています。

注意

この時点では、エラーが起きていますが、気にしないでください。

STEP.3
テーブルに入れる単語を宣言
import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

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

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

}

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

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

STEP.4
テーブルのセル数を指定
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」です。

STEP.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]で、テーブルのセルに、フルーツの値を入れています。

完了

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

実行

実行して確認しましょう。

このようになっていれば成功です。

 

まとめ

うまくできましたでしょうか?

今回の講座のリストは超簡単に作れるリストです。もっと色々とリストを装飾するならカスタムセルというものを使います。カスタムセルの使い方については、またこの講座でやりますので、お待ちください。

 

サトリク

独学でアプリ開発は厳しくないですか?

このブログ(satorikublog)の筆者サトリクが、初心者の方に教えるサービスをはじめました。

気軽にご相談ください!

詳細はこちら

 

 

ゼロから学ぶiPhoneアプリ開発入門


もっとみる