【Swift4】ToDoリストアプリを作りながらUITableViewを学ぼう！〜Part2 【説明動画付き】

Part1の続きです。Part2ではTableViewCellに文字と、クリックしたらチェックマークが表示される機能を作っていきたいと思います。

Contents

1 参考動画
2 ソースコードの変更
- 2.1 ToDoViewController.swiftのソースコード
3 新しいクラスの作成
- 3.1 swiftファイルを新規作成
4 解説
5 実行結果
6 この続きはPart3で！

参考動画

ソースコードの変更

ToDoViewController.swiftのソースコード

下記ソースコードをToDoViewController.swiftにコピペします。元々あったコードは消しちゃって大丈夫です。

import UIKit

class ToDoViewController: UITableViewController {
        
    // この配列に作ったアイテムを追加していく
    var itemArray: [Item] = []
    
    override func viewDidLoad() {
        
        super.viewDidLoad()
        
        // あらかじめ3つアイテムを作っておく
        let item1: Item = Item(title: "FLYーWESTに電話する")
        let item2: Item = Item(title: "フリーランスエンジニアになる")
        let item3: Item = Item(title: "稼いで幸せになる")
        
        // 先ほど作ったitemArray配列に追加
        itemArray.append(item1)
        itemArray.append(item2)
        itemArray.append(item3)
        
        // NaviBarのタイトルを大きく表示させ、スクロールした場合は小さくする
        navigationController?.navigationBar.prefersLargeTitles = true
        
    }
    
    
    
    // セルの数を指定ーitemArrayの配列の数だけCellを表示します
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        return itemArray.count
        
    }
    
    
    
    // Cellの内容を決める
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        //part1で指定した「TodoCell」を引っ張ってくる
        let cell = tableView.dequeueReusableCell(withIdentifier: "ToDoCell", for: indexPath)
        //Cell番号のitemArrayを変数Itemに代入
        let item = itemArray[indexPath.row]
        //ToDoCellにCell番号のItemArrayの中身を表示させるようにしている
        cell.textLabel?.text = item.title
        //チェックマークを表示する処理ーitemのdoneがtrueだったら表示falseだったら非表示
        cell.accessoryType = item.done ? .checkmark : .none
        return cell
        
    }
    
    // クリックしたらチェックマークが表示される機能
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // 選択されたセルにの中身を代入
        
        let item = itemArray[indexPath.row]
        
        // falseだったらtrue、trueだったらfalseを代入
        item.done = !item.done
        
        // リロードしてUIに反映
        self.tableView.reloadData()
        
    }

import UIKit

class ToDoViewController: UITableViewController {

// この配列に作ったアイテムを追加していく

var itemArray: [Item] = []

override func viewDidLoad() {

super.viewDidLoad()

// あらかじめ3つアイテムを作っておく

let item1: Item = Item(title: "FLYーWESTに電話する")

let item2: Item = Item(title: "フリーランスエンジニアになる")

let item3: Item = Item(title: "稼いで幸せになる")

// 先ほど作ったitemArray配列に追加

itemArray.append(item1)

itemArray.append(item2)

itemArray.append(item3)

// NaviBarのタイトルを大きく表示させ、スクロールした場合は小さくする

navigationController?.navigationBar.prefersLargeTitles = true

}

// セルの数を指定ーitemArrayの配列の数だけCellを表示します

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

return itemArray.count

}

// Cellの内容を決める

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

//part1で指定した「TodoCell」を引っ張ってくる

let cell = tableView.dequeueReusableCell(withIdentifier: "ToDoCell", for: indexPath)

//Cell番号のitemArrayを変数Itemに代入

let item = itemArray[indexPath.row]

//ToDoCellにCell番号のItemArrayの中身を表示させるようにしている

cell.textLabel?.text = item.title

//チェックマークを表示する処理ーitemのdoneがtrueだったら表示falseだったら非表示

cell.accessoryType = item.done ? .checkmark : .none

return cell

}

// クリックしたらチェックマークが表示される機能

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

// 選択されたセルにの中身を代入

let item = itemArray[indexPath.row]

// falseだったらtrue、trueだったらfalseを代入

item.done = !item.done

// リロードしてUIに反映

self.tableView.reloadData()

}

新しいクラスの作成

swiftファイルを新規作成

todoというファイルの上で右クリックします

NEW Fileを押し、swiftFileを選択後NEXTボタンを押します

Itemと入力しcreateボタンをクリック

Item.swiftのソースコードを下記のように変更します

class Item{
    var title : String
    var done : Bool = false
    
    init(title:String) {
        self.title = title
    }
}

class Item{

var title : String

var done : Bool = false

init(title:String) {

self.title = title

}

解説

文字を大きくする

↓のコードを書くと、NaviBarのタイトルを大きく表示させ、スクロールした場合は小さくなります

navigationController?.navigationBar.prefersLargeTitles = true

1	navigationController?.navigationBar.prefersLargeTitles = true

Cellの行数を決める

セルの数を指定ーitemArrayの配列の数だけCellを表示します

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

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

return itemArray.count

}

Cellの内容を決める

ここではPart1で指定した「TodoCell」を引っ張ってきます

 let cell = tableView.dequeueReusableCell(withIdentifier: "ToDoCell", for: indexPath)

1	let cell = tableView.dequeueReusableCell(withIdentifier: "ToDoCell", for: indexPath)

Cell番号のitemArrayを変数Itemに代入します

let item = itemArray[indexPath.row]

1	let item = itemArray[indexPath.row]

そして、ToDoCellにCell番号のItemArrayの中身を表示させるようにしています

 cell.textLabel?.text = item.title

1	cell.textLabel?.text = item.title

クリックしたらチェックマークが表示されるようになります

cell.accessoryType = item.done ? .checkmark : .none

1	cell.accessoryType = item.done ? .checkmark : .none

accessoryTypeの種類

1.UITableViewCellAccessoryType.None
2.UITableViewCellAccessoryType.Checkmark
3.UITableViewCellAccessoryType.DetailButton
4.UITableViewCellAccessoryType.DisclosureIndicator
5.UITableViewCellAccessoryType.DetailDisclosureButton

実行結果

この続きはPart3で！

FLY-WESTプログラミングスクールでは格安で未経験からフリーランスエンジニアへ導きます！