[Xcode11・Swift5]メモアプリを作る＃07

※この記事は初心者の方や初めてアプリを作る人を対象にしています。
動作環境　Xcode Version 11.4　Swift version 5.2

この記事では前回作成した、追加ボタンを押した時のモーダルウィンドウに部品を配置していきます。

Navigation Controllerの埋め込み

まずは前回作成したMemoViewControllerにもNavigation Controllerを埋め込んでタイトルは「New Memo」としておきましょう！

やり方はこちらを参考にして見て下さいね。

部品の配置

次はMemoViewControllerにボタンの配置をします。

次に配置したボタンの左側を「Cancel」に右側を「Save」に設定しましょう。

次はテキストを入力する為のTextFieldを設置します。
とりあえず場所は適当でOKです！

TextFieldにオートレイアウトで制約をつけていきます。
まずは中央揃えにしたいので Horizontallyの制約を付けます。

次に余白を設置します。
基本的には下記画像のようにすれば大丈夫ですが、青い矢印の部分は今回制約を付けないので触らないで下さい。

青い矢印の部分だけ「赤い繋ぎの線」が薄くなっていると思います。
ここが薄くなっていると言う事は制約を付けていないと言う事です。
もしここが太くなっていると制約がついてしまうのでその線をクリックして制約を外しましょう。

下記画像のようになっていればOKです！

変数の設定

次は変数の設定です！
先ほど設置したTextFieldをMemoViewController.swiftに紐付けます。

ここまでの機能の流れとしては、＋ボタンを押したらモーダルウィンドウが出て、そこのテキストボックスにメモの内容を書いて、セーブしてメモを追加するかキャンセルして戻るかを選ぶ流れになっています。

ではSaveボタンを押した時にメモを登録する処理を書いていきましょう！
流れはTextFieldに入力した値をTableViewに渡してリストに追加する感じです。
イメージできますか？

まず、TableViewに渡すデータを保持する変数を宣言します。
TextFieldには何も入力されない可能性もあるので、Optional型にしておきます。

class MemoViewController: UIViewController {
    
    var memo: String? //ここ追加
    @IBOutlet weak var memoTextField: UITextField! //これがさっき紐付けたTextFieldです。

まとめ

今回は部品の配置と変数の設定だけにしておきました！
次回は変数をTableView渡す為の処理を書いていきたいと思います。