【Swift4】ToDoリストアプリを作りながらUITableViewを学ぼう！〜Part2 【説明動画付き】
Part1の続きです。Part2ではTableViewCellに文字と、クリックしたらチェックマークが表示される機能を作っていきたいと思います。
目次
参考動画
ソースコードの変更
ToDoViewController.swiftのソースコード
下記ソースコードをToDoViewController.swiftにコピペします。元々あったコードは消しちゃって大丈夫です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 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のソースコードを下記のように変更します
1 2 3 4 5 6 7 8 | class Item{ var title : String var done : Bool = false init(title:String) { self.title = title } } |
解説
文字を大きくする
↓のコードを書くと、NaviBarのタイトルを大きく表示させ、スクロールした場合は小さくなります
1 | navigationController?.navigationBar.prefersLargeTitles = true |
Cellの行数を決める
セルの数を指定ーitemArrayの配列の数だけCellを表示します
1 2 3 4 5 | override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return itemArray.count } |
Cellの内容を決める
ここではPart1で指定した「TodoCell」を引っ張ってきます
1 | let cell = tableView.dequeueReusableCell(withIdentifier: "ToDoCell", for: indexPath) |
Cell番号のitemArrayを変数Itemに代入します
1 | let item = itemArray[indexPath.row] |
そして、ToDoCellにCell番号のItemArrayの中身を表示させるようにしています
1 | cell.textLabel?.text = item.title |
クリックしたらチェックマークが表示されるようになります
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プログラミングスクールでは格安で未経験からフリーランスエンジニアへ導きます！
