Button（ボタン）の使い方

ボタンは、ほとんどのアプリに必ずと言っていいほど使われています。今回はそのボタンを作ってみましょう。ボタンを作る前にプロジェクトを作成しておいてください。

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

基本の文

まずは基本のボタンの表示のさせ方です。いろいろ方法はありますが、ライブラリから作るのが一番簡単です。ボタンの表示の仕方はこちら

入力した文字を表示させよう！今回からは、とうとうアプリを作っていきます。と言ってもいきなりとてもすごいものを作るのも無理だし、どういうふうにすればいいのかもわからな...

そうしたら、このように表示されていると思います。（バージョンによって違ったりします）

Button(action: Action) {
Content
}

Actionとは

まずActionです。この灰色に表示されているこの場所は（xcodeで）ボタンを押された時の動作をここに書きます。普通はActionというところに{}を書き、その中にコードを書きます。

Contentとは

Contentは、ボタンに表示されるデザインなどを設定します。

Text("")
Image("")

などのように設定します。ここではTextにHelloと表示させてみましょう。全文はこのようになります。

Button(action: Action) {
Text("Hello")
}

そして、Resumeをクリックすると、今作ったコードが表示されます。このようになっています。

いいですね。これにデザインを追加してみたいと思います。SwiftUIの売りである宣言型シンタックスを使います。

デザイン

宣言型シンタックスはその名前の通り、宣言して使えるものです。SwiftUIが開発される前は、プログラムからデザインを変えるには長いコードが必要でした。しかし、宣言型シンタックスを使用すれば１行だけで終わります。非常に使いやすく、みやすいコードになります。たくさんありますが、今回は文字の大きさと、文字のいろ、背景色を変えてみたいと思います。

文字の大きさ

文字の大きさは

.font(.largeTitle)

というように書きます。これは、Textのすぐ後に書きます。するとこのように全文がなります。

Button(action: Action) {
Text("Hello")
.font(.largeTitle)
}

選べるのはこんなものがあります。

文字のいろ

文字の色は

.foregroundcolor(.white)

というように書きます。これもTextの後に書きます。他に宣言型シンタックスがある場合はその後ろに書いても大丈夫です。先ほどの文字の大きさのものと合わせると、全文はこのようになります。

Button(action: Action) {
Text("Hello")
.font(.largeTitle)
.foregroundcolor(.white)
}

色はいろいろありますが、背景色を設定するのであれば.whiteが見やすいです。

背景色

背景色は

.background(Color.orange)

のように書きます。これで全文が完成しました。

Button(action: Action) {
Text("Hello")
.font(.largeTitle)
.foregroundColor(.white)
.background(Color.orange)
}

見た目としてはこのようになります。

おすすめの本

Swiftを始める時にインターネットだけでの独学は難しい！！と考える人もいると思います。「SwiftUI iPhoneアプリ開発入門ノート」は丁寧に解説してくれるのでとても便利です。

リンク