今回からは、とうとうアプリを作っていきます。と言ってもいきなりとてもすごいものを作るのも無理だし、どういうふうにすればいいのかもわからないので、まずは入力した文字を表示するプログラムを作ります。まずプロジェクトを作成してください。詳しくはこちら
-
STEP1ボタンを作る入力するためのボタンを作りましょう。
-
STEP2テキストフィールドをつくるテキストを入力するための箱を作りましょう。
-
STEP3テキストを表示させる実際に入れた文字を表示させます。
-
STEP4ビルドしてみるシミュレーターを使ってビルドしてみましょう。
ボタンを作る
まず入力した後確認用のボタンを作ります。ライブラリから追加する詳しい方法はこちら
追加していきます。
もともと最初にHelloworldのテキストがあったので、下に追加すると、縦に二つ並びます。
次にテキストフィールドを追加します。
テキストフィールドの追加
ライブラリから
TextFieldをTextとButtonの真ん中に入れます。
そうすると今こんな感じになっているはずです。
実際に動かしていきましょう。
プログラムを作る
まず、入力した文字を入れておく変数を作成します。変数は箱のようなものです。
@State var text:String = ""
これは、
struct ContentView: View {
のすぐ下に書きます。@Stateをつけることで、textという変数は変更可能な変数になります。Stringという型は、もじや数字、記号なんかも入れられる万能な型です。
ボタンなどのデザインも少し変えましょう。
まずボタンです。今このようなコードになっているはずです。
Button(action: {}) {
Text("Button")
}
これを次のように変えます。
Button(action: {}) {
Text("押して！！")
.foregroundColor(.green)
.font(.largeTitle)
.frame(width: 240, height: 70, alignment: .center)
.background(Color.orange)
}
「.」から始まるコードがデザインです。foregroundColorは文字色、fontはフォント、frameは大きさ、backgroundはテキストの下の設定です。今回はカラーを設定しています。
Textのデザイン
Textはこのようにしました。
Text("Hello, World!")
.foregroundColor(.blue)
.font(.largeTitle)
.frame(width: 240, height: 70, alignment: .center)
.background(Color.gray)
先ほどのと同じように設定しています。
TextFieldのデザイン
TextDieldはこんな感じ
TextField("何か入力してください。", text: $text)
.frame(width: 240, height: 30, alignment: .center)
.textFieldStyle(RoundedBorderTextFieldStyle())
text:のところを$textに変えてください。
それでは、本当にプログラムをしていきます。
プログラム
Buttonのところを見てください。actionと書かれたあとに大括弧があると思います。{}
それにプログラムを書いていきます。このボタンはキーボードを閉じることにします。
まず先にimport SwiftUIのすぐ下にこう書きます。
extension UIApplication {
func Keyend() {
sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
}
キーボードを下ろすようにします。先ほどのButtonに戻り、こう書きます。
UIApplication.shared.Keyend()
こうすれば下ろすことができます。次にTextが変数を表示できるようにします。こう書きます。
Text("\(text)")
この逆スラッシュはoptionと￥を同時に押すことで入れることができます。こうすればもう完成です。ビルドしてみましょう。ウィンドウの左上にある再生ボタンでビルドできます。ビルドが完了するとシミュレーターが立ち上がり、作ったアプリを使えます。
お疲れ様でした。
Swiftを始める時にインターネットだけでの独学は難しい！！と考える人もいると思います。「SwiftUI iPhoneアプリ開発入門ノート」は丁寧に解説してくれるのでとても便利です。
