【Xcodeお勉強】TO DOアプリを作ってみる(自作編)

チュートリアルにこだわりすぎず、少しだけ変化を加えることでアプリ勉強が捗らないかなと思った。デザインに少し手を加えたTO DOアプリを作ってみる。なおデザインにはこだわっていない。

目標の画面

右上に追加ボタン。新規のボタンをmodalで立ち上げて保存ボタンを押すとdismiss。新しいセルが追加されるようにしたい。

 NavigationController、TableViewControllerで見た目を作っていく

やったことは
・NavigationControllerを配置
・「Is Initial View Controller」をNavigationControllerにつける
・TableViewCellの設定(Style,Identifier→ここでは「memoListCell」とした,)
・Navigation Itemを使ってNavigationBarにボタンを配置(このやり方があってるかはわからない、、)。作成と保存ボタンを作る
・新規作成画面用のViewControllerにtextFieldを配置
・作成ボタンと新規作成画面をsegueでつないだ

(このキャプチャーにはtextFieldが入ってないが作ってある)

TableViewController用のカスタムクラスを作る

TableView上で「メモの個数」「メモの表示」「メモの削除」「新規作成から移ってきた時のリロード」を実装するためにカスタムクラスを作成した。

TableViewControllerに関連付ける

以下コード

テーブルに入っているアイテムたち

var list = ["Buy milk", "Run 5 miles", "Get Peter", "Plant my new plants"]

上記配列の個数をカウントしてセクション内に列がいくつあるかを返す

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

セルの中のテキストラベルに配列のアイテムを入れる

ここではセルの名前(Identifier)を「memoListCell」としている。↑の方で作った名前。

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "memoListCell", for: indexPath)
cell.textLabel?.text = list[indexPath.row]
return cell
}

セルを編集するためにテーブルをoutletで繋いでおく

この作業忘れそうだ・・・

セルの編集モード(削除)を作る

思うんだが、テーブルを横にスライドさせる、とかはeditingStyleっていうところに存在しているんだろうか

override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
if editingStyle == UITableViewCellEditingStyle.delete {
list.remove(at: indexPath.row)
myTableView.reloadData()
}
}

Viewが表れた時の処理(作成画面から戻ってきた時の処理)

override func viewDidAppear(_ animated: Bool) {
myTableView.reloadData()
}

新規作成画面のViewController.swiftにテキスト編集の動作を書く

UITextFieldをoutletで繋ぐ

テキストフィールドに入れた内容をゴニョゴニョするために繋ぐ

保存ボタンを押した時のActionを繋ぐ

ボタンもアクションさせるために繋ぐ

保存ボタンを押した時に最初に定義したItemにappendさせ、画面を閉じる

@IBAction func saveItem(_ sender: Any) {
if (input.text != "") {
list.append(input.text!)
input.text = ""
self.navigationController?.popViewController(animated: true)
}
}

ここでハマったのが画面を閉じるという処理。dismissはなぜか上手くいかなくてpresentだと戻りはするけどnavigationBarがなくなるという自体に。

また、こちらのブログで参考にしたsegueのunwindという方法も戻りはするが、itemに追加されなかった。saveItemメソッドが動いてないのかな−。というかこれだと単純にボタン押されたら戻る、だけになってしまってるみたい。なんとなくここのブログのやり方が近い気はするんだけどもなぁ。

完成

割りとスムーズにできた気がする。前回のタブバーのチュートリアルがとても参考になった。次は保存ボタンを押した時に何もテキストが入力されていなかったらアラートを出してみよう。

この記事が気に入ったら
いいね ! しよう