Design an interface - SwiftUI でプログラミング - 1
画面のデザインについてのチュートリアルです。画面に表示させるレイアウトを順を追って作っていきます。
2 つの画面を作成して、ビューを配置してレイアウトしていきます。 コードを書いて、好きなレイアウト、色、グラフィック、テキストをいれていきます。
Create the welcome page
新しいプロジェクトを作るとContentViewが出来上がりますが、今回は2つの画面を作っていくので、まず一つ目の画面を作るので"WelcomePage"という名前のSwiftUIの新規ファイルを作成します。
XcodeではFile > New > FileからSwiftUI Viewを選べばすぐにできますがPlaygroundsでは少し手間がかかります。Playgroundsでは新規ソースファイルを選びます。
新しいファイルができたら名前も右クリックして"WelcomePage"変更します。これでファイルは完成ですが、このままだとこのファイルのプレビューされず、ContentViewのプレビューになります。これを一時的に"WelcomePage"にしてプレビューしながら開発できるようにします。その方法は
ContentView()をWelcomePage()に変更するとプレビュー画面がWelcomePage()を表示するようになります。
struct WelcomePage: View {
var body: some View {
Text("Welcome to MyApp")
.font(.title)
}
}
と書き直してみると、"Welcome to MyApp"と表示されるのが確認できます。
ここからこの画面をカスタムしていきます。まず、
.fontWeight(.semibold)
を".font(.title)"の下に追加すると太文字になります。
全体は
import SwiftUI
struct WelcomePage: View {
var body: some View {
Text("Welcome to MyApp!")
.font(.title)
.fontWeight(.semibold)
}
}
Inspect the size of your views using borders
SwiftUI でのレイアウトについてモディファイアの".border "を使って境界線を表示を確認します。
まずはVStackと.paddingをつけてもう一つText()を設置します。
全体は
var body: some View {
VStack {
Text("Welcome to MyApp!")
.font(.title)
.fontWeight(.semibold)
Text("Description text")
.font(.title2)
}.padding()
}
次にテキストが表示されている部分の境界線を色(赤)と幅(1.5)を指定して追加します。
全体は
枠線は
となりました。
VStackとpaddingの効果を枠線を入れることで確認します。
角丸四角形(RoundedRectangle)を追加します。
"cornerRadius: 30"で角丸にします。大きさを整えて色を指定します。
Use padding within stacks
レイアウトをより見やすくする場合は".padding"などを使い余白をうまくいれていきます。
".top"で上の余白のみつけることができます。
表示のレイアウトの基本的な4辺に余白をつける場合
を使います。
デザインを変更する時はそれぞれの".padding"を試してみましょう。
Use a ZStack to embellish your graphic
奥行きの設定を使って四角を描画している上にSFシンボルを追加してみます。
ZStack {
RoundedRectangle(cornerRadius: 30)
.frame(width: 150, height: 150)
.foregroundStyle(.tint)
Image(systemName: "figure.2.and.child.holdinghands")
.font(.largeTitle)
}
さらに.font(.largeTitle)を
.font(.system(size: 70))
.foregroundStyle(.white)
に変更して枠線を消します。
となりました。
この記事が気に入ったらサポートをしてみませんか?