【Swift/Xcode超入門】ToDoリストを作ってみよう①〜プロジェクト作成からレイアウト作成まで〜

サトリク

この講座では、簡単にToDoリストアプリのレイアウトを作成していきます。

 

動作環境

item Version
Swift 5.2.4
Xcode 11.5

バージョンの確認方法

この講座の完成イメージ

こんな感じのToDoリストです。

右側のプラスボタンでToDoを追加でき、リストを左にスライドすると削除できます。

 

アプリ開発手順

プロジェクト作成

STEP.1
新規プロジェクト作成

Create a new with a playground  Single View App

STEP.2
プロジェクト設定

①Product Name に、ToDoListと入力

②LanguageはSwiftを選択

③User Interfaceは、Storyboardを選択

④チェックなし

⑤Nextをクリック

STEP.3
プロジェクトの保存

前の講座で作ったiOSAppDevPracticeを選択しましょう。

②Createをクリック

完了
では、早速作っていきましょう。

 

レイアウト

STEP.1
ナビゲーションバー設置

①Main.storyboardを選択

②画面の上のバーを選択

③Editor > Embed In > NavigationControllerを選択

STEP.2
ナビゲーションバーのレイアウト

①NavigationControllerのTitleを選択

② (Show the Attributes inspector)をクリック

③Bar Tintを任意の色(画像の色は#4c84bc)に変更

④Title ColorをWhite Colorに変更

⑤TintをWhite Colorに変更

STEP.3
ナビゲーションタイトルを変更

①画面のナビゲーションバーを選択

② (Show the Attributes inspector)をクリック

③TitleをToDoリストに変更

STEP.4
TableViewを配置

①右上のプラスボタンをクリック

②TableViewをドラッグ&ドロップ

STEP.5
TableViewのレイアウトを変更

①TableViewを画面いっぱいに引き伸ばす

② |-□-| をクリック

③全て0にして上下右左の赤い線をクリック

④Add 4 Constraintsをクリック

STEP.6
TableViewCellを配置

①プラスボタンをクリック

②Table View Cellをドラッグ&ドロップ

STEP.7
TableViewCellにID付け

①TableViewCellをクリック

② (Show the Attributes inspector)をクリック

③identifierにtodoCellと入力

STEP.8
dataSourceとdelegateをドラッグ&ドロップ

①TableViewを右クリック

②dataSourceをViewControllerにドラッグ&ドロップ

同じく、delegateもViewControllerにドラッグ&ドロップ

STEP.9
BarButtonItemを配置

①プラスボタンをクリック

②Bar Butto Itemを配置

STEP.10
追加ボタンのレイアウトを変更

①Itemをクリック

② (Show the Attributes inspector)をクリック

③System ItemをAddに変更

STEP.11
コードとに画面に変更

①画面のバーをクリック

command + option + control + enterで2画面にする

STEP.12
TableViewを紐付け

controlを押しながら、11行目と12行目の間にドラッグ&ドロップ

 

①NameにtableViewと入力

②Connectをクリック

 

STEP.13
追加ボタンを紐付け

controlを押しながら、18行目と19行目の間にドラッグ&ドロップ

 

①NameにaddBtnActionと入力

②Connectをクリック

完了

これで、レウアウトが完成しました。

実行するとプログラムを書いていないのでエラーが出ますが、次の講座で解消されるので大丈夫です。

 

まとめ

わからない部分があれば、TwitterのDMか、コメントで質問して貰えばすぐ返します。(コメントはレス遅いかも)

 

ゼロから学ぶiPhoneアプリ開発入門


もっとみる