テキストを入力できるようにする
ユーザーがテキストを入力できるようにするには、TextFieldというViewを使用します。TextFieldにも、さまざまな値を設定できる形式のものがありますが、今回は次のものを使用します。
TextField(titleKey:, text:, axis: )
-
titleKeyには、このTextFieldの目的を入力します。また、文字が入力されていない状態では、そのtitleKeyの値が画面上に表示されます -
text: 入力されたテキストを保持するため、
String型の変数を渡します - axis: テキストが利用可能なスペースに収まらない場合に、どの方向にスクロールするかを指定するものです
実際にコードを変更して動きを確認してみましょう。
struct ComplaintView: View {
@State private var isPresented = false
// ここを追加↓
@State private var inputText = ""
var body: some View {
VStack {
HStack(spacing: 16) {
Text("Good")
Text("Chill")
.foregroundStyle(.yellow)
}
.font(.system(size: 56))
.fontWeight(.black)
.foregroundStyle(.red)
Button(action: {
isPresented = true
}, label: {
Text("愚痴る")
.font(.largeTitle)
.padding()
})
.buttonStyle(.borderedProminent)
.buttonBorderShape(.capsule)
.padding(.top, 40)
}
.sheet(isPresented: $isPresented, onDismiss: {
// 画面を閉じた時に実行する処理
}, content: {
VStack {
// ここを変更↓
TextField("愚痴る", text: $inputText, axis: .vertical)
}
})
}
}
変更した箇所は2箇所です。
-
入力したテキストを管理するための
@State変数のinputTextを追加 -
TextFieldを追加
変更することで、以下のような動きが加わります。
- 入力文字がない時は愚痴るという文字が表示されます。
-
text: ここでも
$inputTextでバインディングの$が使用されており、テキストの入力の値を変数inputTextに反映するために使われています。 -
axis: 入力された文字が画面スペースいっぱいになった場合は、
.vertical（垂直方向）にスクロールできるように指定しています。
プレビュー上では、愚痴るボタンを押すと愚痴るというテキストがグレー色の文字で表示されます。
その愚痴るの部分をタップするとテキストの入力ができるようになります。
Enterを押してしまうと入力したテキストが消えてしまいますが、iOS シミュレータでは正常に動作することが確認できます。
iOSシミュレーターでの動作確認は、MyAppCollectionAppのViewを書き換えてビルドを実行してみて下さい。
@main
struct MyAppCollectionApp: App {
var body: some Scene {
WindowGroup {
// ここを変更↓
ComplaintView()
}
}
}
画面を閉じた時に処理を実行する
今のこのアプリの動きでは、愚痴を入力した後にsheetで表示した画面を閉じても入力したテキストは消えません。これだと愚痴を吐き出した後に誰かに見られてしまう危険性があります。これは今すぐ、sheetで表示した画面を閉じた時にテキストを空にした方が良さそうです。次のようにコードを変更します。
.sheet(isPresented: $isPresented, onDismiss: {
// ここを追加↓
inputText = ""
}, content: {
VStack {
TextField("愚痴る", text: $inputText, axis: .vertical)
}
})
これでsheetで表示した画面が閉じると、テキストが空になり、他の方に吐き出した後の愚痴を見られる心配がなくなりました。
レイアウトを調整する
最後に愚痴る画面のレイアウトを調整するため、次のようにコードを変更します。
.sheet(isPresented: $isPresented, onDismiss: {
inputText = ""
}, content: {
VStack {
TextField("愚痴る", text: $inputText, axis: .vertical)
// ここを追加↓
Spacer()
}
// ここを追加↓
.padding()
})
変更点としては2点です。
-
VStackにpaddingをつけたことでTextFieldが端に詰まっていて見にくくなっていた問題を解消しました -
Spacer()を使って、TextFieldの配置を上詰めに変更しました
これでレイアウトが調整でき、より見やすいアプリになりました。
レイアウト要素Spacerとは
Spacerは、要素がないHStackやVStackの中で、空いているスペースを埋めるために使用するレイアウト要素です。例えば、Textの上にSpacerを置くと、このTextは下詰めになります。
VStack {
Spacer()
Text(“下詰め”)
}
以下の例では、Textは右詰めになります。
HStack {
Spacer()
Text(“右詰め”)
}
まとめと次回
今回はアプリを作る過程で、HStackの使い方や余白のつけ方、Spacerを使ったレイアウトの調整方法、テキストを入力する方法や別の画面をモーダル表示する方法などを学びました。
実は、別画面を表示した際には閉じるボタンをつけることが推奨されていますが今回は省略しています。「SwiftUI dismiss」などで検索すると、画面を閉じる方法が書かれた記事が出てくると思いますので、今回の愚痴る画面に閉じるボタンをつけるチャレンジをしても面白いかもしれません。
この連載で作ったアプリを自分なりにどんどんカスタマイズしていただき、さらにアプリ作りの楽しさにハマっていただけると嬉しいです。
次回はアプリ「カップラーメンタイマー」を作ります。お楽しみに！
