Design an interface　- SwiftUI でプログラミング - 1

Design an interface | Apple Developer Documentation

画面のデザインについてのチュートリアルです。画面に表示させるレイアウトを順を追って作っていきます。

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()を設置します。

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)

枠線は

となりました。

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)

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)

に変更して枠線を消します。

となりました。