はじめに
前回は、アプリ「毎日いいことカウンター」を作りました。アプリが実際に形になるとワクワクしませんか？今回も楽しんでアプリを作っていきましょう。
アプリ作成の第2弾は「やるのかやらないのかコイントス」を作ります。生活の中で究極の2択を迫られる場面は多いと思いますが、そんな時に代わりに決断してくれるアプリがあったらいいなと思ったことはありませんか？今回は「やる」か「やらない」をコイントスで決めるアプリを作って素早い決断ができるようになりましょう。
友だちが揉めている時に「揉めたらコインで」とスッとアプリを出せたら、きっとカッコいいと思います。
開発環境
この連載では、次の環境を使用しています。
- macOS Sequoia 15.1
- Xcode 16.1
プロジェクトを立ち上げる
前回は、0からプロジェクトを作成しましたが、今回からは作ったプロジェクトの中に新規ファイルを作成して進めていきます。まだ作成していない方は前回のプロジェクトの準備を参考にして新規プロジェクトを作成してください。
それでは、Xcodeからプロジェクトを開いて、アプリを作っていきましょう。
アプリ 「やるのかやらないのかコイントス」を作る
ファイルを新規作成
やるのかやらないのかコイントス用にコードを記述するためのファイルを新規作成します。
-
Xcode上部メニューバーから
File＞New＞File from Template…を選択します。
-
テンプレートを選択する画面が表示されます。①プラットフォームは、
iOSを選択し、User Interface下の②SwiftUI Viewを選択、③Nextを押します。
-
保存先を選択する画面では、④のファイル名に
YesNoCoinTossViewを入力し、⑤の項目が同様の値になっていることを確認し、⑥Createを押します。
-
作成が完了すると、Xcodeのナビゲーターエリアに作成した
YesNoCoinTossView.swiftファイルが表示されます。
このファイルのコードを更新しながらアプリを作っていきます。
Viewを任意の間隔で縦に並べる
今回のアプリでも各要素を縦に並べていきます。前回学んだVStackを使用して変数body内のコードを次のように書き換えます。
import SwiftUI
struct YesNoCoinTossView: View {
var body: some View {
VStack(spacing: 60) {
Text("迷ったら時はコインで決めよう")
Text("やる")
Text("コインを投げる")
}
}
}
前回使用したVStackと違う点は、spacing: 60の値が割り当てられている点です。このspacingに値を設定すると、VStack内に配置している各要素のスペースを設定することができます。また、値を設定しない場合はデフォルトの値が使用されます。
今回は60を設定しているため、各要素のスペースが60になっています。
Viewを異なる間隔で縦に並べる
前述では各要素のスペースを60に設定しましたが、アプリを作る中で「特定のViewの間隔だけは変えたい」といったシーンはあると思います。
そんな時は、VStackの中でVStackを使用することができるため、それぞれに指定したいスペースを設定することができます。
変数body内のコードを次のように書き換えます。
struct YesNoCoinTossView: View {
var body: some View {
VStack(spacing: 60) {
Text("迷ったら時はコインで決めよう")
VStack(spacing: 32) {
Text("やる")
Text("コインを投げる")
}
}
}
}
このコードでは、変数body内に二つのVStackがあり、外側と内側のVStackにそれぞれ違うスペースを設定することで、特定のViewの間隔だけは変えています。
文字を改行する
一番上部のTextの文字列を次のように変更してください。
Text("迷ったら時は\nコインで決めよう")
改行する箇所に追加した\nは改行をするための制御文字です。\nの次の文字から改行することができます。アプリ側ではもちろん\nが文字列として表示されることはないので安心してください。
Textを中央揃えにする
一番上部のTextの改行ができましたが、アプリのタイトルらしく中央揃えをしたいと思います。
複数行のTextの配置方法はmultilineTextAlignmentモディファイアで指定することができます。一番上部のTextにこのモディファイアをつけてみましょう。
Text("迷ったら時は\nコインで決めよう")
.multilineTextAlignment(.center)
今回はTextの配置の値として.centerを設定しており、複数行のTextが中央揃えできているのが確認できます。
また、.multilineTextAlignmentモディファイアには、次の選択肢があります。
| TextAlignment | 配置方法 |
| .leading | 左揃え |
| .center | 中央揃え |
| .trailing | 右揃え |
以上でタイトルは完成です。せっかくなので、前回学んだ.font(.largeTitle)を使用して、装飾しましょう。
Text("迷ったら時は\nコインで決めよう")
.multilineTextAlignment(.center)
.font(.largeTitle)
これで少しずつ見た目が整ってきました。
