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

Part2の続きです。part3ではUIButtonを押したらアラートが表示され、テキストフィールドでユーザーに書かれた文字をToDoリストに表示していくコードを書いていきます。また、スワイプしたらTableVieWのCellを消去する機能も追加していきます。UIAlertController,UIAlertAction,等が学べます

Contents

1 参考動画
2 新規アイテム追加機能
- 2.1 ToDoViewController.swiftに紐づける
3 tableViewのCellを消去する機能
4 解説
5 実行結果
6 全体のソースコード
- 6.1 ToDoViewController.Swift
- 6.2 Item.swift

参考動画

新規アイテム追加機能

ToDoViewController.swiftに紐づける

storybord→プラスボタンをToDoViewControllerにコントロール＆ドラッグ→actionを選択＆ANYを選択

    @IBAction func addButtonPressed(_ sender: Any) {

1	@IBAction func addButtonPressed(_ sender: Any) {

が追加されるはずです。下記コードのように変更していきます

    @IBAction func addButtonPressed(_ sender: Any) {
        var textField = UITextField()
        let alert = UIAlertController(title: "アイテムを追加", message: "", preferredStyle: .alert)
        let action = UIAlertAction(title: "リストに追加", style: .default) { (action) in
            let newItem: Item = Item(title: textField.text!)
            self.itemArray.append(newItem)
            self.tableView.reloadData()
        }
        
        alert.addTextField { (alertTextField) in
            alertTextField.placeholder = "NEWアイテム"
            textField = alertTextField
        }
        
        alert.addAction(action)
        present(alert, animated: true, completion: nil)
        
    }

@IBAction func addButtonPressed(_ sender: Any) {

var textField = UITextField()

let alert = UIAlertController(title: "アイテムを追加", message: "", preferredStyle: .alert)

let action = UIAlertAction(title: "リストに追加", style: .default) { (action) in

let newItem: Item = Item(title: textField.text!)

self.itemArray.append(newItem)

self.tableView.reloadData()

}

alert.addTextField { (alertTextField) in

alertTextField.placeholder = "NEWアイテム"

textField = alertTextField

}

alert.addAction(action)

present(alert, animated: true, completion: nil)

}

tableViewのCellを消去する機能

下記コードを追加するとスワイプするとリストが消去されます。

override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        
        itemArray.remove(at: indexPath.row)
        let indexPaths = [indexPath]
        tableView.deleteRows(at: indexPaths, with: .automatic)
    }

override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {

itemArray.remove(at: indexPath.row)

let indexPaths = [indexPath]

tableView.deleteRows(at: indexPaths, with: .automatic)

}

解説

UIAlertController

UIAlertControllerはアラートを出すパーツです。

UIAlertAction

styleはどのようなstyleで出すか指定してます。(style: .default)のdefaultをdestructive赤文字で否定的な選択肢やcancelに変えることもできます。

UIAlertAction(title: "リストに追加", style: .default)

1	UIAlertAction(title: "リストに追加", style: .default)

placeholder

テキストフィールド内に元々入っている薄い文字を指定してます。”NEWアイテム”を変更することにより好きな文字がいれれます。

alert.addTextField { (alertTextField) in
            alertTextField.placeholder = "NEWアイテム"
            textField = alertTextField
        }

alert.addTextField { (alertTextField) in

alertTextField.placeholder = "NEWアイテム"

textField = alertTextField

}

present

Apple公式developperに詳細が載っています。簡単に説明すると現在のViewの上に追加するという意味です。

present(alert, animated: true, completion: nil)

1	present(alert, animated: true, completion: nil)

実行結果

全体のソースコード

ToDoViewController.Swift

import UIKit

class ToDoViewController: UITableViewController {
    
    // アイテムの型
    class Item {
        var title : String
        var done: Bool = false
        
        init(title: String) {
            self.title = title
        }
    }
    
    // この配列に作ったアイテムを追加していく
    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()
        
    }
    
    

    @IBAction func addButtonPressed(_ sender: Any) {
        var textField = UITextField()
        let alert = UIAlertController(title: "アイテムを追加", message: "", preferredStyle: .alert)
        let action = UIAlertAction(title: "リストに追加", style: .default) { (action) in
            let newItem: Item = Item(title: textField.text!)
            self.itemArray.append(newItem)
            self.tableView.reloadData()
        }
        
        alert.addTextField { (alertTextField) in
            alertTextField.placeholder = "NEWアイテム"
            textField = alertTextField
        }
        
        alert.addAction(action)
        present(alert, animated: true, completion: nil)
        
    }

    
    override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        
        itemArray.remove(at: indexPath.row)
        let indexPaths = [indexPath]
        tableView.deleteRows(at: indexPaths, with: .automatic)
    }
    
}

100

101

102

103

104

105

106

import UIKit

class ToDoViewController: UITableViewController {

// アイテムの型

class Item {

var title : String

var done: Bool = false

init(title: String) {

self.title = title

}

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

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()

}

@IBAction func addButtonPressed(_ sender: Any) {

var textField = UITextField()

let alert = UIAlertController(title: "アイテムを追加", message: "", preferredStyle: .alert)

let action = UIAlertAction(title: "リストに追加", style: .default) { (action) in

let newItem: Item = Item(title: textField.text!)

self.itemArray.append(newItem)

self.tableView.reloadData()

}

alert.addTextField { (alertTextField) in

alertTextField.placeholder = "NEWアイテム"

textField = alertTextField

}

alert.addAction(action)

present(alert, animated: true, completion: nil)

}

override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {

itemArray.remove(at: indexPath.row)

let indexPaths = [indexPath]

tableView.deleteRows(at: indexPaths, with: .automatic)

}

Item.swift

import Foundation

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

import Foundation

class Item{

var title : String

var done : Bool = false

init(title:String) {

self.title = title

}

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