[iOSアプリ開発入門] SwiftUIを使って初めての画面作成
はじめに
趣味として個人開発を始めようと思い、せっかくなら自分で使うものを作りたくてiOSアプリ開発にチャレンジすることにしました。
当面の目標は自分のアプリを作ってリリースすることです。
全くゼロからのスタートなので、わからないことや調べたことなどを学習のために書き残していくスタイルでまとめていこうと思っています。
同じようにゼロからiOSアプリを作っていこうとしている方の何かの役に立てば幸いです。
前提
Appleの公式iOSアプリチュートリアルを進めていきます。
MacBook Air (M1, 2020)を使って開発しています。細かい開発環境などは割愛しますが、最新のXCodeを使ってコーディングしています。
XCodeでチュートリアル用のプロジェクトは作成済みの状態です。
文章中に出てくる「画面」と「ビュー」と「UI」は大体同じような概念として言い回しを変えるのに使っています。
チュートリアルで作ろうとしているものは「スクラム管理ツール」です。
スクラムとは:
ここではスクラムで使用するミーティング用のタイマーの画面を作り始めるところからのスタートとなります。
初めてのアプリ画面作成の手順
"ビュー"はアプリのUI（ユーザーインターフェース）の構成要素のことです。
複雑なビューを作ろうとするときも、単純ないくつかのビューを作って組み合わせて表現することになります。
-
- 出てくるビューの種類
-
- [準備] ContentView.swiftのファイル名をリネーム
-
- VStackを使ってUIを縦方向に並べる
-
- HStackを使ってUIを横方向に並べる
-
- ビューのスタイルを整える
-
- [割愛] アクセシビリティのサポートを得られるようにする
1. 出てくるビューの種類
このチャプターで出てくるSwiftUIのビューの種類をまとめておきます。
Text
テキストを表示をするためのビューです。簡単な文字列を表示するために使用しています。
Label
標準的なラベルを表現するためのビューです。タイトル付きのアイコンで構成されます。
VStack
サブビューを縦方向に並べるためのビューです。サブビューとは、親子関係のように階層化されたビューのようなイメージです。
HStack
サブビューを横方向に並べるためのビューです。VStackと同じような使い方をします。
2. [準備] ContentView.swiftのファイル名をリネーム
プロジェクトを作った段階でデフォルトで作成されてるViewファイルがあります。
これを今回作っていく「ミーティング用のタイマー」画面に合わせて名前を変更します。
ファイル内の「ContentView」にカーソルを合わせて Command + Click を押します。
すると、メニューが出てくるので、「Rename」を選択します。
すると、「ContentView」の部分が編集できるようになるので「MeetingView」に変更します。
同じファイル内の「ContentView_Preview」だけは変更されないので「MeetingView_Preview」に変更します。
3. VStackを使ってUIを縦方向に並べる
ここから実際にUIを作っていきます。
手始めに、プログレスバーとテキストを縦方向に並べたいとします。
まずは、プログレスバーを「ProgressView」ビューを使って記述します。
つぎに、テキストを「Text」ビューを使って記述します。
しかし、単純に2行書いただけではプログレスバーしか表示されません。
そこで、VStackで囲ってあげることで、2つが上下に並んで表示されます。
4. HStackを使ってUIを横方向に並べ
続いて、テキストを2つ横方向に並べたいとします。
先ほど記述した「Text」の下にもう1つ「Text」ビューを使って記述します。
しかし、VStackの中にあるので縦方向に並んで表示されてしまいます。
そこで、HStackで囲ってあげることで、2つが左右に並んで表示されるようになります。
このように、ビューの配置を整えていくときは「VStack」と「HStack」を使って要素を組み上げていくのが基本になります。
5. ビューのスタイルを整える
次に、ビューのスタイルを整えます。ここでは、以下のものを使ってスタイルを修正していきます。
- 「Spacer」ビュー
- 「VStack」ビューの「alignment」パラメータ
- 「Text」ビューの「font」モディファイア
順番に見ていきます。
「Spacer」ビュー
まずは、「Spacer」ビューを挿入することで、ビューとビューの間隔を広げることができます。
例えば、下の画像のように「HStack」で囲った2つのビューの要素が近すぎることがあったとします。
この時に「Spacer」ビューを2つのビューの間に記述することで、間隔を広げることができます。
「VStack」ビューの「alignment」パラメータ
「VStack」ビューに「alignment」パラメータを渡してサブビューの配置を決めることができます。
例えば、今砂時計のアイコンを含むラベルは、両方とも中央揃えになっています。
これを左の「VStack」に「alignment: .leading」、右の「VStack」に「alignment: .trailing」を渡してあげることで、配置を変更することができます。
「Text」ビューの「font」モディファイア
「Text」ビューに「font」モディファイアを追加してあげることでフォントを調整することができます。
例えば、以下の画像だと砂時計付きのラベルとその上のテキストが同じサイズになってしまっています。
そこで、「font」モディファイアを使って「font(.caption)」を追加してあげることで、テキストの大きさが小さくなります。
引数に指定できるフォントの種類は複数あります。
6. [割愛] アクセシビリティのサポートを得られるようにする
SwiftUIではデフォルトでアクセシビリティに関するサポートが提供されているそうです。
例えば、コードを追記することでVoiceOverなどのサポートを受けることができる。
今回はアクセシビリティについての詳しいことは割愛したいと思います。
まとめ
今回初めてZennを使って学習したことを記事にしてみました。書いている中でアウトプットの質としてまだまだだなと感じたので、今後もっとわかりやすく書けるようになっていきたいと思います。
なお、チュートリアルを実施しての差分をGitHubのPull Requestとして残してあります。
ブランチも切りながら引き続き進めていく予定ですので、良かったら見てみてください。
Twitterやブログもやっております。プロフィールに載せておきますので、良かったらそちらものぞいてみてください。
Discussion