1
Help us understand the problem. What are the problem?

posted at

第3回iPhoneアプリ開発入門

はじめに

今回は、カウンターアプリを装飾していきます。まず、前回のプロジェクトを開いてください。

Modifier

まず、ボタンを装飾します。次のように書き換えます。

スクリーンショット 2022-05-05 12.30.08.png

Buttonに「.buttonStyle(.borderedProminent)」とつけることで、Buttonの見た目を整えることができました。このような、Viewの見た目を整えるものをModifierといいます。ちなみに、Textについている「.padding()」は余白をつけるModifierです。

背景色を変える

次に、背景色を変更します。
スクリーンショット 2022-05-05 12.47.54.png
ZStackは、{ }内のViewを重ねて表示するViewです。Color.tealは、ティール色を表示します。他にも、Color.redとすると赤色を表示できます。Colorについている.ignoresSafeArea()は、Viewを画面目一杯に表示するModifierです。

テキストを装飾する

スクリーンショット 2022-05-05 13.20.48.png
「.font(.title.bold())」は、フォントを「タイトル」の太字にしています。「.foregroundColor(.white)」はテキストの色を白色にしています。

ボタンにアイコンを表示する

ボタンを次のように書き換えます。
スクリーンショット 2022-05-05 13.25.25.png
Label("Add", systemImage: "plus")と書くとテキストとアイコンを表示できます。systemImageにはアイコンの名前を書きます。
アイコンの名前は、https://developer.apple.com/sf-symbols/ でダウンロードできるアプリから調べられます。
Image(systemName: "plus")と書くとアイコンのみを表示できます。

次回予告

次回は、Appleのチュートリアルを進めていく予定です。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
1
Help us understand the problem. What are the problem?