SwiftUI入門-勉強メモ003-【レイアウトその2 Spacer, Divider】

今回はレイアウトの中で余白の扱いとその分割について触れてみます.

環境は,

  • macOS Catalina 10.15.6
  • Xcode 12.0
  • Swift 5.3
  • iOS 14.0

です.

目次

Spacer

Spancerは画面の余白を分配するものです. これは具体的に見たほうが早いかもしれません.

基のコードは次を用います.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack{
            Text("ABC")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(Color.red)
            Text("DEFGH")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(Color.blue)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

これにSpacerを入れると次のようになります. (コードはVStackの内部だけ載せてあります.)

VStack{
     Spacer()
     Text("ABC")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(Color.red)
     Text("DEFGH")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(Color.blue)
}
SwiftUI
VStack{
     Text("ABC")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(Color.red)
     Text("DEFGH")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(Color.blue)
     Spacer()
}
SwiftUI
VStack{
     Spacer()
     Text("ABC")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(Color.red)
     Spacer()
     Text("DEFGH")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(Color.blue)
     Spacer()
}
SwiftUI
VStack{
     Spacer()
     Spacer()
     Text("ABC")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(Color.red)
     Spacer()
     Text("DEFGH")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(Color.blue)
     Spacer()
}
SwiftUI

HStackの場合は水平方向の分配になります.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        HStack {
            Spacer()
            Spacer()
            Text("ABC")
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(Color.red)
            Spacer()
            Text("DEFGH")
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(Color.blue)
            Spacer()
        }
    }
}
SwiftUI

Divider

Dividerは画面に区切り線を入れます. (コードはVStackの内部だけ載せてあります.)

VStack{
    Text("ABCDE")
        .font(.title)
        .foregroundColor(Color.white)
        .padding(10.0)
        .background(Color.blue)
    Text("ABCDE")
        .font(.title)
        .foregroundColor(Color.white)
        .padding(10.0)
        .background(Color.blue)
}
SwiftUI
VStack{
    Text("ABCDE")
        .font(.title)
        .foregroundColor(Color.white)
        .padding(10.0)
        .background(Color.blue)
    Divider()
    Text("ABCDE")
        .font(.title)
        .foregroundColor(Color.white)
        .padding(10.0)
        .background(Color.blue)
}
SwiftUI

区切りの直線は太くしたり, 色を変更することができます.

VStack{
    Text("ABCDE")
        .font(.title)
        .foregroundColor(Color.white)
        .padding(10.0)
        .background(Color.blue)
    Divider()
        .frame(height: 10)
        .background(Color.purple)
    Text("ABCDE")
        .font(.title)
        .foregroundColor(Color.white)
        .padding(10.0)
        .background(Color.blue)
}
SwiftUI

DividerもHStackで使用できます.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        HStack {
            Text("ABC")
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(Color.red)
            Divider()
                .frame(width: 2, height: 200)
                .background(Color.black)
            Text("DEFGH")
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(Color.blue)
        }
    }
}
SwiftUI

今回の復習として作ってみました

今回の復習がてらに自己紹介カードのようなものを作ってみました. このくらいであれば簡単に実装できるのもSwiftUIのすごいところです.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack{
            Text("Pierrot")
                .font(.largeTitle)
                .foregroundColor(Color.white)
                .padding(10.0)
                .background(Color.blue)
            Divider()
                .frame(height: 2)
                .background(Color.blue)
                .padding(.horizontal, 20.0)
            Text("https://questict.net")
                .font(.title)
                .padding(.bottom, 5.0)
            Text("Mail:info@questict.net")
                .font(.title)
        }
    }
}
SwiftUI

コメント

コメントする

目次
閉じる