【Xcodeお勉強】TO DOアプリを作ってみる - どこかのシャチョーの奮闘記

音楽再生アプリに挫折してるのでTO DOアプリに逃げた。人生つらいことばかりだ。笑。

参考にする動画

The Swift GuyというアカウントがSwift入門者向けのチュートリアルのビデオを幾つか配信している。初心者にはこうした動きのわかるビデオがありがたい。もっとこういう学習サービスが普及すればいいのになぁ。

Contents

1 Tabバーを用意し、TableViewを設置する
2 ProtoTypeCellsを1にする
3 cellに名前をつける
4 tableviewをoutletでつなげる
5 codeを書く
6 とりあえずデータの削除までできた
7 ToDoリストに追加するためのテキスト入力欄とボタンを作成する
8 Outletの設定を行う
9 SecondViewControllerにコードを書く
10 完成

Tabバーを用意し、TableViewを設置する

projectの新規作成の時にtabバー付きのを選べるので、それでスタートしてtableviewを配置する。また、autolayoutで各隣接部分を0にする

ProtoTypeCellsを1にする

cellに名前をつける

tableviewをoutletでつなげる

delegateもこうやってつなげるのか。

codeを書く

まずはセルにデータの表示とスワイプしてdeleteボタンを表示させる

class FirstViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

 var list = ["Buy milk", "Run 5 miles", "Get Peter", "Plant my new plants"]
 
 public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -&amp;gt; Int
 {
 return(list.count)
 }
 
 
 public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -&amp;gt; UITableViewCell
 {
 let cell = UITableViewCell(style: UITableViewCellStyle.default, reuseIdentifier: "cell")
 cell.textLabel?.text = list[indexPath.row]
 
 return(cell)
 }
 
 func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
 if editingStyle == UITableViewCellEditingStyle.delete
 {
 self.list.remove(at: indexPath.row)
 myTableView.reloadData()
 }

 }

 
 @IBOutlet weak var myTableView: UITableView!
 
 override func viewDidLoad() {
 super.viewDidLoad()
 // Do any additional setup after loading the view, typically from a nib.
 }

 override func didReceiveMemoryWarning() {
 super.didReceiveMemoryWarning()
 // Dispose of any resources that can be recreated.
 }


}

Commandを押しながらUITableViewDataSourceをクリックするとメソッドをコピーできて便利。

とりあえずデータの削除までできた

ヘッダーがないけど。

ToDoリストに追加するためのテキスト入力欄とボタンを作成する

Utility areaからtext fieldとbuttonを追加する

Outletの設定を行う

2つのパーツをコードに繋げる

SecondViewControllerにコードを書く


@IBOutlet weak var input: UITextField!
@IBAction func addItem(_ sender: UIButton) {
if (input.text != "") {
list.append(input.text!)
input.text = ""
}
}

UITextFieldの中が空っぽでなければlistにappendするという処理を書いた。また、appendしたあとはUITextField内を空にしている。

FirstViewController.swiftに戻り、var listをグローバルな位置(?)に出してあげる。またViewDidAppearという部分を追加する。これは画面が表示された直後にリロードしているという解釈であってるはず。


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

class FirstViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

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


public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
{
let cell = UITableViewCell(style: UITableViewCellStyle.default, reuseIdentifier: "cell")
cell.textLabel?.text = list[indexPath.row]

return(cell)
}

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

}

@IBOutlet weak var myTableView: UITableView!

override func viewDidAppear(_ animated: Bool) {
myTableView.reloadData()
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

完成

これだけならこんな早くできてしまうのか。。