SwiftUI入門-勉強メモ004-【レイアウトその3 padding, offset, position】

2020 10/13

2020.10.05 2020.10.13

今回は, Viewのレイアウト調整について初歩的なものを扱っていきます.

環境は,

macOS Catalina 10.15.7
Xcode 12.0.1
Swift 5.3
iOS 14.0

です.

padding

paddingはViewの周囲に余白を作ります. top, bottom, leading, trailingでそれぞれ上下左右の余白のみ指定できます. これ以外にも, horizontal(左右の余白), vertical(上下の余白)の指定もできます.

値	説明
top	上方向に余白を作る
bottom	下方向に余白を作る
leading	左方向に余白を作る
trailing	右方向に余白を作る
vertical	上下に余白を作る
horizontal	左右に余白を作る
all	全方向に余白を作る

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        
        VStack(spacing: 40.0){
            Text("ABC")
                .font(.title)
                .foregroundColor(Color.white)
                .background(Color.blue)
            Text("ABC")
                .font(.title)
                .foregroundColor(Color.white)
                .padding(10.0)
                .background(Color.blue)
            Text("ABC")
                .font(.title)
                .foregroundColor(Color.white)
                .padding(.top, 10.0)
                .background(Color.blue)
            Text("ABC")
                .font(.title)
                .foregroundColor(Color.white)
                .padding(.bottom, 10.0)
                .background(Color.blue)
            Text("ABC")
                .font(.title)
                .foregroundColor(Color.white)
                .padding(.leading, 10.0)
                .background(Color.blue)
            Text("ABC")
                .font(.title)
                .foregroundColor(Color.white)
                .padding(.trailing, 10.0)
                .background(Color.blue)
        }
        
    }
}

verticalとhorizontalの余白は次のようになります.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        
        VStack(spacing: 40.0){
            Text("ABC")
                .font(.title)
                .foregroundColor(Color.white)
                .background(Color.yellow)
            Text("ABC")
                .font(.title)
                .foregroundColor(Color.white)
                .padding(.vertical,10.0)
                .background(Color.yellow)
            Text("ABC")
                .font(.title)
                .foregroundColor(Color.white)
                .padding(.horizontal, 10.0)
                .background(Color.yellow)
        }
        
    }
}

offset

offsertはViewの位置をx軸方向とy軸方法に動かすことができます.

View().offset(x: x軸方向の移動量, y: y軸方向の移動量)

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        
        ZStack{
            ContainerRelativeShape()
                .fill(Color.blue)
                .frame(width: 120, height: 120)
            ContainerRelativeShape()
                .fill(Color.yellow)
                .frame(width: 80, height: 80)
            ContainerRelativeShape()
                .fill(Color.green)
                .frame(width: 40, height: 40)
        }
        
    }
}

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        
        ZStack{
            ContainerRelativeShape()
                .fill(Color.blue)
                .frame(width: 120, height: 120)
            ContainerRelativeShape()
                .fill(Color.yellow)
                .frame(width: 80, height: 80)
                .offset(x:50)
            ContainerRelativeShape()
                .fill(Color.green)
                .frame(width: 40, height: 40)
                .offset(y:-30)
        }
        
    }
}

position

positionはViewの位置を指定できます. 指定されるのはView()の中心部分です.

View().positon(x: x軸方向の位置, y: y軸方向の位置)

(0, 0)は左上を指します. デバイスによって最大幅が違うので, offsetと同様マルチデバイス対応のアプリを考えている場合は使い方が難しいかもしれません.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        
        ZStack{
            ContainerRelativeShape()
                .fill(Color.blue)
                .frame(width: 120, height: 120)
            ContainerRelativeShape()
                .fill(Color.yellow)
                .frame(width: 80, height: 80)
                .position(x: 200, y: 500)
            ContainerRelativeShape()
                .fill(Color.green)
                .frame(width: 40, height: 40)
                .position(x: 100, y: 100)
        }
        
    }
}

指定するのはViewの中心部分ですので, (x, y)=(0, 0)を指定した場合は画面からはみ出してしまいます.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        Image("cat")
            .border(Color.gray)
    }
}

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        Image("cat")
            .border(Color.gray)
            .position(x: 0, y: 0)
    }
}