公開中のアプリ

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

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

この記事ではいよいよメモアプリを作っていきたいと思います。
作業内容としては
①データの準備
②セグエの設定
③クラスの作成です

今回はシュミレーターを使う事がないので完成の形を先に確認はなしでいきます。
では早速メモアプリを作って行きましょう!

データの準備とコードの修正

まずはデータの準備をしていきますが、今まで使っていたファイルをそのまま編集して使って下さいね。

その前にセルの設定を先にしておきましょう!
下記画像のようにStyleをBasicにしましょう。

セルの設定

ではデータですが、今回は単純な1行のメモにするので、配列をもとに戻します。

下記コードのようにしておきましょう。
(編集ファイルMemoTableViewController.swift)

class MemoTableViewController: UITableViewController {
    
     var memos = ["まゆげじお", "F-chan", "D-matsuo"] //これ変更

次にセルの表示部分のコードを変更します。
ちなみにここまでは特に新しい事はしていません。

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "MemoTableViewCell", for: indexPath)
    // Configure the cell...
    cell.textLabel?.text = self.memos[indexPath.row] //これ変更
    //cell.detailTextLabel?.text = self.memos[indexPath.row]  //これ削除
    return cell
}

セグエの設定

ではもうコードの修正はしないので、アシスタントエディタは閉じてしまいましょう。

NavigationControllerを埋め込む

次にNavigationControllerを埋め込みます。

NavigationController表示

こんな感じになってればOKです!

NavigationController表示

では次にタイトルを入力しましょう!

①をダブルクリックすればタイトルが入力できるので適当に「Memo」とかにしておきます。
次にbar button itemを追加したいので、②をクリックして、③で「button」と検索して④をドラッグ&ドロップして下さい。

タイトルとボタンの配置

下記画像のように追加したアイテムをAddに設定しましょう。

部品追加

追加用の画面を作成

次に先ほど追加したアイテムを押した時に表示される画面を作成します。
今回はモーダルウィンドウを選択して下さいね!

モーダルウィンドウの追加

次にセグエに名前をつけます。
Identifierを「addMemo」としておきましょう。

セグエに名前をつける

クラスの作成

先ほど作成したモーダルウィンドウでもコードを書いていきたいのでクラスと紐づけておきましょう。

その前に最初からあるViewController.swiftファイルを削除しておきます。
左側のViewController.swiftを選択して「delete」ボタンを押して「Move to Trash」で削除しましょう。

ファイル削除

では紐付けるクラスのファイルを作成します。
①を選択しつつ「command + n」で Cocoa Touch Classを選択してあげます。
次の画面で青枠の部分を「UIViewController」にして、赤枠の部分をMemoViewControllerと言う名前にしましょう!
あとはCreateでOKです!

クラスファイルの作成

次に紐付け作業です。
①、②の順にクリックして、③の右側の青い部分からMemoViewControllerを選択しましょう!

クラスの紐付け

まとめ

今回の記事で
①表示するデータを用意(配列とコードの修正)
②NavigationControllerを追加しタイトルと追加ボタンを設定
③追加ボタンを押した時に表示されるモーダルウインドウの作成
④モーダルウィンドウとクラスを紐づける。

ざっとこんな感じの作業をしました〜!
焦らず少しずつやっていきましょう!

コメントを残す

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

アプリ