用意するファイルは以下の通り
- storyBord
- ViewController
後はUITableViewとtableCellがあれば一通りの機能は揃います。
まず初めにcreateNewXcodeProjectでAppを選択。
使用言語はswift。UI描画はswiftUIを使わずにstoryBordを使います。
上記の条件で作成するとswiftの初期アプリのソースが表示されます。
1. UIをstoryBordに配置
ViewControllerはまだ触らずstoryBordに以下のように配置します。
https://cpoint-lab.co.jp/wp-content/uploads/2021/06/72a4f7f4-0146-e205-e887-3fe80e62bb74.png
※Command+shift+lでUI追加フォームが出てくるのでその中から
textField,buton,UITableViewをそれぞれ以下のように設置。役割は以下。
textField: todoリストに表示したいテキストを入力
button: todoリストに追加
TableView: todoリスト(tableCell)を表示する領域
tableCell: todoテキストを表示するための入れ物。TableViewの傘下に追加
全て追加した後、tableCellをクリック。すると画面右側にメニューが表示されます。
右から３番目のshow the attributes inspectorを
クリックして、その中にあるidentifierにtableCellと名前をつけます。
これがないと後に追加する関数にテキストが反映されません。
UIを全て追加・identifierを追加したところでstoryBordの作業はここで一旦終了。
2. storyBordの要素をViewControllerに紐付け
storyBordのUI設置が終わったので実際にそれらを使えるようにします。
これらを機能させるにはViewContollerとstoryBordと連携させなければいけません。
連携するにはまずcontrolを押しながらViewControllerにドラッグ。すると以下のような
構文がViewControllerに追加されます。
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
@IBOutlet weak var input: UITextField!
@IBOutlet weak var tableCell: UITableView!
}
これらの変数はstoryBordで追加したUIの模型みたいな物であり、この中に後々やりたいことを
吹き込みます。
3. セルの生成
必要なものは揃ったので、いよいよセルに反映する処理を書いていきます。
tableViewを扱う際にはセルの数をtableViewに教える関数とセルを生成して
テキストを表示させる関数が必須になります。
var textFieldString = ""
let myItems: NSMutableArray = ["ハンバーグ", "とんかつ", "餃子"]
override func viewDidLoad() {
super.viewDidLoad()
// Do any
}
// TableViewに表示するセルの数を返却。
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return myItems.count
}
// 各セルを生成して返却。
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableCell.dequeueReusableCell
(
withIdentifier: "tableCell",
for: indexPath
)
cell.textLabel?.text = "\(myItems[indexPath.row])"
return cell
}
// ボタン押下時のアクション
@IBAction func pushButton(_ sender: UIButton)
{
// TextFieldから文字を取得
textFieldString = input.text!
print(textFieldString);
myItems.add(input.text!)
// TableViewを再読み込み.
tableCell.reloadData()
input.text = ""
}
一気に増えましたね。myItemsのところは何でもいいです。配列だけ書いて
let myItems: NSMutableArray = []でも構いません。
二番目のcellForRowAtで、1でidentifierに設定した名前をwithIdentifier
に追加します。
一番下のpushButton関数ですが、これも先ほどのUITextFieldやUITableViewと
同様にアウトレットで紐付けをします。
storyBordの中のボタンを選択後コントロール+ドラッグでViewControllerまで
引っ張ってきます。中の処理では、入力された文字(input.text)を受け取ってmyItemに追加しています。
その後tableCell.reloadData()でテーブルを更新しています。
これで一通りの処理は完了です。
4. 全体コード
ViewControllerの全体コードがこちら。
import UIKit
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
@IBOutlet weak var input: UITextField!
@IBOutlet weak var tableCell: UITableView!
var textFieldString = ""
let myItems: NSMutableArray = ["ハンバーグ", "とんかつ", "餃子"]
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
// TableViewに表示するセルの数を返却。
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return myItems.count
}
// 各セルを生成して返却します。
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableCell.dequeueReusableCell(withIdentifier: "tableCell",
for: indexPath)
cell.textLabel?.text = "\(myItems[indexPath.row])"
return cell
}
// ボタン押下時のアクション
@IBAction func pushButton(_ sender: UIButton) {
// TextFieldから文字を取得
textFieldString = input.text!
print(textFieldString);
myItems.add(input.text!)
// TableViewを再読み込み.
tableCell.reloadData()
input.text = ""
}
}
5.終わりに
動いたでしょうか。もし動かないのであればUIのアウトレットが正しく接続されているか・
タイプミスがないかを要チェックしてみてください。
この次は、cellに削除ボタンを実装して入力したテキストを削除する機能を作っていきます。
