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

サトリク

この講座では、リストを使ったアプリを作ってみます!

 

動作環境

item Version
Swift 5.2.4
Xcode 11.5

バージョンの確認方法

この講座の完成イメージ

80%のアプリで、リストが使われています。

そんなリストを今回は、簡単に作っていきたいと思います。

アプリ開発手順

プロジェクトを作成

STEP.1
プロジェクト作成

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

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

①Product Name に、TableViewと入力

②LanguageはSwiftを選択

③User Interfaceは、Storyboardを選択

④チェックなし

⑤Nextをクリック

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

前の講座で作ったiOSAppDevPracticeを選択しましょう。

②Createをクリック

完了
 

 

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

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

①Main.storyboardを選択

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

③Editor > Embed In > NavigationControllerを選択

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

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

①Titleを選択

② (Show the Attributes inspector)をクリック

③Bar Tintを任意の色(画像は#4c84bc)に変更

④Title ColorをWhite Colorに変更

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

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

② (Show the Attributes inspector)をクリック

③Titleにリストと入力

STEP.4
TableViewを配置

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

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

STEP.5
TableViewを広げる

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

STEP.6
Table View Cellを配置

①プラスボタン

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

STEP.7
TableViewCellにIDをつける

①左のメニューからTableViewCell

 (Show the Attributes inspector)をクリック

③identifierにCellと入力

STEP.8
dataSourceを紐付け

①Table View右クリック

②dataSourceをView 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()
    }

}

var fruits = ["りんご", "みかん", "ブドウ", "レモン", "スイカ"]を追加してください。

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

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

完了

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

 

実行

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

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

 

まとめ

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

わからない部分があれば、TwitterのDMか、コメントで質問して貰えばすぐ返します。(コメントはレス遅いかも)

 

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


もっとみる