「UITableViewController」の「StaticCell」を使って、設定画面のようなViewを作っていきます。
普通のTableViewを使って画面にセルを表示させるにはコードを書く必要がありますが、「StaticCell」を使うことでストーリーボードだけで表示させることができます。
最初に「StaticCell」の使い方を説明して、最後に例として上の動画のような入力フォームなどを作っていきます。
StaticCellの使い方
「StaticCell」は「UITableViewController」でしか使えないので、「ViewController」は削除します。
「TableViewController」を追加します。
「Is Initial View Controller」に忘れずチェックします。
「TableViewController」を「NaVigation Controller」に入れます。
TableViewを選択して、「Content」を「StaticCells」、「Sections」を「2」、「Style」を「Grouped」にします。
下の方にある「Background」を「Default」にします。
StaticCellの使い方はここまでです。
StaticCellはこれだけでTableViewのコードを書くことなく、セルを表示することができます。
入力フォーム
ここからは、入力フォームを作成して保存ボタンを押すと入力したものをコンソールに出力できるようにしていきます。
先日、時間割アプリを開発してリリースしたので、そこで作ったものと同じような画面を作成していきます。
まず、一つ目のセクションのヘッダーを入力します。
二つ目のセクションはセルを一つにします。「Rows」の数字を変えるとセルの数を変えられます。
「Horizontal Stack View」を一つ目のセクションの一つ目のセルの中に入れて、「Constraints」を上下左右0にします。
次に、それぞれのConstraintの「First Item」か「Second Item」にある「Superview.」の「Relative to margin」を選択して、「Constraint」の数値を0にします。上下左右のConstraintを同様にします。
追加した「StackView」の中に「Label」と「TextField」を入れます。
「Label」の「Width」を100にして、「Text」を「科目」にします。
「TextField」の「Placeholder」を「科目を入力」にし、「Border Style」を線のないやつにします。
次に、TableViewCellごとコピーして２回ペーストします。
下の２つのセルを削除し、上から2番目と３番目のセルの「Label」と「Placeholder」を編集します。
ここでは２番目を「教室」「教室を入力」、３番目を「教員」「教員を入力」としました。
次に、二つ目のセクションのセルの「Accessory」を「Disclosure Indicator」にします。
新しい「ViewController」を追加して、セルから「controlキー」を押しながら新しい「ViewController」までドラッグします。「Selection Segue」で「Show」を選択します。
「ViewController」の右上に「BarButtonItem」を追加し、「Title」を「保存」にします。
「ViewController.swift」を削除します。
新しく「UITableViewController」を作成します。「Class」を「TableViewController」、「Subclass of」を「UITableViewController」にします。
「Main.storyboard」で、「TableViewController」を選択し、「Class」を「TableViewController」にします。
「Assistant」を開いて余計なコードを削除し、下のようにします。
import UIKit
class TableViewController: UITableViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
}3つそれぞれの「TextField」をControlを押しながらドラッグして名前をつけます。
次に、「BarButtonItem」をControlを押しながらドラッグして名前をつけ、「Type」を「UIBarButtonItem」にします。
上の3つのセルは選択できないようにするため、「Selection」を「None」にします。
コード
「保存」ボタンを押したら、「TextField」の文字がそれぞれ出力されるようにします。
import UIKit
class TableViewController: UITableViewController {
@IBOutlet weak var subjectTextField: UITextField!
@IBOutlet weak var roomTextField: UITextField!
@IBOutlet weak var teacherTextField: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
}
@IBAction func saveItem(_ sender: UIBarButtonItem) {
if let subject = subjectTextField.text,
let room = roomTextField.text,
let teacher = teacherTextField.text {
print(subject)
print(room)
print(teacher)
}
}
}
