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

2020 10/13

2020.10.03 2020.10.13

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

環境は,

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)
}

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

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

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

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()
        }
    }
}

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)
}

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)
}

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

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)
}

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のすごいところです.

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)
        }
    }
}