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

今回は, 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)
        }
        
    }
}
SwiftUI

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

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

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

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

import SwiftUI

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

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

コメント

コメントする

目次
閉じる