公開中のアプリ

[Xcode11・Swift5]メモアプリを作る#02

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

この記事ではTableViewを設置して、そのTableViewの処理を書くためのクラスを作成していきます。

TableViewを設置

TableView Controllerをstoryboardへ設置

今回のメモアプリのメモが並んでいるリストはTableViewと言います。
まずはTableView Controllerと言うものをstoryboard上にドラッグ&ドロップします!

下記画像を補足します。

①をクリックするとstoryboardが開きます。
②をクリックすると緑枠の中のウィンドウが開きます。(Xcodeのバージョンによって②のボタンの場所が違ったり、アイコンが違ったりしますのでもし画像と違う場合はググって下さいね)
③の検索の箇所にtableと入力したらTableView Controllerが表示されます。
④TableView Controllerをstoryboard上にドラッグ&ドロップします。
場所はだいたいでOKです!

TableViewを設置1

下記画像の赤枠の部分がTableView Controllerです。
このように表示されていれば OK!

TableViewを設置2

アプリ起動時に最初に表示されるようにする。

では次に、アプリが起動したら先ほど設置したTableView Controllerが最初に表示されるように設定します。

青い矢印を下記画像のようにドラッグ&ドロップして青い矢印がTableView Controllerの方に移動していればOKです。

ちなみに青枠で囲んだ部分がセルでここに1行のメモを書きます。
この1行のセルにプログラムを書いて、必要な数(メモを増やした数)だけコピーして追加されるみたいな流れになります。

TableViewを設置3

セルのIdentifier設定

先ほど説明したセルはコードで扱う事になるのでIdentifierの設定をします。
Identifier、、、横文字が出てくると難しく思ってしまいがちですが、セルに名前をつけるだけです!

では下記画像の補足をします。
①をクリックすると緑で囲んだ部分のウィンドウが表示されます。
詳しくは[Step2]画面の見方と名称の記事に書いています〜!
②を選択した状態で③をクリックして④にMemoTableViewCellと入力します。

TableViewを設置4

クラスファイルの作成

先ほど設定したTableViewControllerでの処理を書くクラスを作成しないといけないのでその説明をします。

ファイルを作る

まずクラスのファイルを作ります。

①を選択した状態で「command + n」を押すとファイルを選択するウィンドウが表示されます。
②をクリック
③をクリック

クラスファイルの作成1

①の赤枠の部分をUITableViewControllerに設定したあと、緑枠の部分にクラス名を入力します。
今回はMemoTableViewControllerと入力して下さい。
②をクリックしたら次の画面が出てくるのでそこで、「Create」ボタンを押せば完了です。

クラスファイルの作成2

下記画像のようになればOKです!
ちなみに赤枠の部分が今回作ったファイルで、青枠の部分にコードを書いていきます。

クラスファイルの作成3

TableViewControllerの紐付け

先ほど作成したMemoTableViewController.swiftファイルと一番最初に設置したTableViewControllerを紐付けます。

MemoTableViewController.swiftで書いたコードがTableViewControllerに反映されるようにしています。

①・②の順番にクリック。
③にMemoTableViewControllerと入力します(横の青いボタンから選択する事もできます。)

クラスファイルの作成4

まとめ

今回はメモ画面であるTableViewControllerの設置とそのTableViewControllerを制御する為のクラス(MemoTableViewController.swift)を作成しました。

このMemoTableViewController.swiftにプログラムを書いていき、メモを追加したり削除したりする感じです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

アプリ