![見出し画像](https://assets.st-note.com/production/uploads/images/142574623/rectangle_large_type_2_503c5dad59f6813b4f8a420cb8e4dec3.png?width=800)
Design an interface - SwiftUI でプログラミング - 1
画面のデザインについてのチュートリアルです。画面に表示させるレイアウトを順を追って作っていきます。
2 つの画面を作成して、ビューを配置してレイアウトしていきます。 コードを書いて、好きなレイアウト、色、グラフィック、テキストをいれていきます。
Create the welcome page
新しいプロジェクトを作るとContentViewが出来上がりますが、今回は2つの画面を作っていくので、まず一つ目の画面を作るので"WelcomePage"という名前のSwiftUIの新規ファイルを作成します。
XcodeではFile > New > FileからSwiftUI Viewを選べばすぐにできますがPlaygroundsでは少し手間がかかります。Playgroundsでは新規ソースファイルを選びます。
![](https://assets.st-note.com/img/1717276856368-1z8P1X8DHp.png?width=800)
新しいファイルができたら名前も右クリックして"WelcomePage"変更します。これでファイルは完成ですが、このままだとこのファイルのプレビューされず、ContentViewのプレビューになります。これを一時的に"WelcomePage"にしてプレビューしながら開発できるようにします。その方法は
![](https://assets.st-note.com/img/1717277381438-ZNCTdH67kX.png?width=800)
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()を設置します。
Text("Description text")
.font(.title2) ・・・ モディファイア追加して文字を小さく
全体は
var body: some View {
VStack {
Text("Welcome to MyApp!")
.font(.title)
.fontWeight(.semibold)
Text("Description text")
.font(.title2)
}.padding()
}
次にテキストが表示されている部分の境界線を色(赤)と幅(1.5)を指定して追加します。
.border(.red, width: 1.5)
全体は
Text("Welcome to MyApp!")
.font(.title)
.fontWeight(.semibold)
.border(.red, width: 1.5)
Text("Description text")
.font(.title2)
.border(.red, width: 1.5)
枠線は
![](https://assets.st-note.com/img/1717325753246-H5bk2it5US.png)
となりました。
VStackとpaddingの効果を枠線を入れることで確認します。
.border(.orange, width: 1.5)
.padding()
.border(.purple, width: 1.5)
角丸四角形(RoundedRectangle)を追加します。
RoundedRectangle(cornerRadius: 30)
"cornerRadius: 30"で角丸にします。大きさを整えて色を指定します。
.frame(width: 150, height: 150)
.foregroundStyle(.tint)
![](https://assets.st-note.com/img/1717329405882-GAUZewCGiD.png?width=800)
Use padding within stacks
レイアウトをより見やすくする場合は".padding"などを使い余白をうまくいれていきます。
Text("Welcome to MyApp!")
.font(.title)
.fontWeight(.semibold)
.padding(.top)
.border(.red, width: 1.5)
".top"で上の余白のみつけることができます。
表示のレイアウトの基本的な4辺に余白をつける場合
.leading、.trailing、.top、および .bottom
を使います。
デザインを変更する時はそれぞれの".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)
に変更して枠線を消します。
![](https://assets.st-note.com/img/1717360074581-vqBTCnFgQS.png)
となりました。
この記事が気に入ったらサポートをしてみませんか?