入力した文字を表示させよう！

今回からは、とうとうアプリを作っていきます。と言ってもいきなりとてもすごいものを作るのも無理だし、どういうふうにすればいいのかもわからないので、まずは入力した文字を表示するプログラムを作ります。まずプロジェクトを作成してください。詳しくはこちら

SwiftUIをはじめよう！！SwiftUIをご存知でしょうか。SwiftUIとは、 より優れたAppを、より少ないコードで。 と、いうようにボタンやテキストなどの配...

ボタンを作る

まず入力した後確認用のボタンを作ります。ライブラリから追加する詳しい方法はこちら

Xcodeを使ってみよう！！ プログラムを作成する前に、少しxcodeの説明をします。まずはプロジェクトを作ってください。作り方はこちらをご覧ください。 ht...

追加していきます。

もともと最初に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アプリ開発入門ノート」は丁寧に解説してくれるのでとても便利です。

リンク

リンク