【Xcodeお勉強】初心者がメモ帳アプリを作る-1

tableviewを使ったtodoアプリをより作りこんでいく。todoアプリではなくメモ帳アプリになりそう。

画面にパーツを配置する

ここの制作手順と同じなので割愛する

SearchBarを配置する

インクリメントサーチなんかやってみたいなと思ってSearchBarをつけることにした。Utility areaからサーチバーを配置。

コードを書く

同じなのでコード全体を記す

TableViewController.swift


import UIKit

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

class TableViewController: UITableViewController {
@IBOutlet var myTableView: UITableView!

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

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

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

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


}

ViewController.swift


import UIKit

class ViewController: UIViewController {
@IBOutlet weak var input: UITextField!

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

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}

}

SearchBarを使って検索する

SearchBarをoutletで繋ぐ

TableViewControllerに繋ぐ

検索結果の配列を用意する

//検索結果の配列
var searchResult = [String]()

デリゲートプロトコルを宣言

class TableViewController: UITableViewController, UISearchBarDelegate{

func viewDidLoad()に記述


override func viewDidLoad() {
super.viewDidLoad()

//結果表示用のビューコントローラーに自分を設定する。
searchMemo.delegate = self

//何も入力されていなくてもReturnキーを押せるようにする。
searchMemo.enablesReturnKeyAutomatically = false

}

これまで記述していたセルの個数やセルの表示内容部分に{もし検索結果だったら…}を追記する

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if( searchMemo.text != "" ) {
return searchResult.count
} else {
return(list.count)
}
}

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

検索ボタンをタップした時のメソッド

//検索ボタン押下時の呼び出しメソッド
func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
searchMemo.endEditing(true)

//検索文字列を含むデータを検索結果配列に格納する。
searchResult = list.filter { data in
return data.contains(searchMemo.text!)
}

//テーブルを再読み込みする。
myTableView.reloadData()
}

全体のコード


import UIKit

//元々の配列
var list = ["Buy milk", "Run 5 miles", "Get Peter", "Plant my new plants"]
//検索結果の配列
var searchResult = [String]()
class TableViewController: UITableViewController, UISearchBarDelegate{
@IBOutlet var myTableView: UITableView!

@IBOutlet weak var searchMemo: UISearchBar!

override func viewDidLoad() {
super.viewDidLoad()

//結果表示用のビューコントローラーに自分を設定する。
searchMemo.delegate = self

//何も入力されていなくてもReturnキーを押せるようにする。
searchMemo.enablesReturnKeyAutomatically = false

}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if( searchMemo.text != "" ) {
return searchResult.count
} else {
return(list.count)
}
}

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

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


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

//検索ボタン押下時の呼び出しメソッド
func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
searchMemo.endEditing(true)

//検索文字列を含むデータを検索結果配列に格納する。
searchResult = list.filter { data in
return data.contains(searchMemo.text!)
}

//テーブルを再読み込みする。
myTableView.reloadData()
}
}

.filterっていうのがなかなか出てこなくてだいぶ時間かかった…

このサイトがかなり役に立った

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