SwiftUI Layout, Text

Layout

1. Frame()

프레임은 고정된 크기의 레이아웃을 지정할 때 사용한다.

 

import SwiftUI

struct Layout: View {
    var body: some View {
        VStack {
            Text("Hello World!")
                .background(Color.blue)
            Text("Hello SwiftUI!")
                .frame(width: 200, height: 300, alignment: .center)
                .background(Color.purple)
            Text("Let's learn SwiftUI")
                .frame(minWidth: 200, maxWidth: 300, minHeight: 100, maxHeight: 200, alignment: .center)
                .background(Color.red)
        }
    }
}

struct Layout_Previews: PreviewProvider {
    static var previews: some View {
        Layout()
    }
}

 

 

— 파라미터1

.frame(width: Int, height: Int, alignment: enum)

고정된 크기의 넓이와 높이를 지정해주고 정렬옵션을 지정할 수 있다.

 

— 파라미터2

.frame(minWidth: Int, maxWidth: Int, minHeight: Int, maxHeight: Int, alignment: enum)

컴포넌트의 내용에 따라 크기가 바뀌는데 우선순위는 min보다 max가 더 높다.

 

 

2. Padding(), Spacer()

import SwiftUI

struct Layout: View {
    var body: some View {
        VStack {
            VStack {
                Text("Hello World!")
                .background(Color.blue)
                Spacer()
                Text("Hello SwiftUI!")
                    .frame(width: 200, height: 300, alignment: .center)
                    .background(Color.purple)
            }
            .padding(.bottom, 10)
            VStack {
                Text("Let's learn SwiftUI")
                    .frame(minWidth: 200, maxWidth: 300, minHeight: 100, maxHeight: 200, alignment: .center)
                    .background(Color.red)
            }
        }
    }
}

struct Layout_Previews: PreviewProvider {
    static var previews: some View {
            Layout()
    }
}

 

 

—Spacer()

컴포넌트 내부요소들의 간격을 띄어준다.

 

—Padding()

컴포넌트 사이의 레이아웃을 설정한다.

 

• 4방향 한 방향을 선택해서 지정할 경우

padding(enum, Int)

enum 값 안에 .bottom, .top, .trailing, .leading 중 선택

Int 값 만큼 공백을 설정한다.

 

• 4방향 중 여러 방향을 선택해서 지정할 경우

padding([enum], Int)

enum 값을 배열로 묶어서 선언하면 Int 값만큼 공백을 설정할 수 있다.

 

• 전체를 다 설정할 경우

padding(Int)

모든 방향에 layout을 지정할 수 있다.

 

3. GeometryReader

부모 뷰의 사이즈를 이용하여 사이즈를 조절할 때 사용한다.

import SwiftUI

struct Layout: View {
    var body: some View {
        VStack {
            GeometryReader { geometry in
                VStack {
                    Text("Let's learn SwiftUI")
                        .frame(width: geometry.size.width, height: geometry.size.height / 6)
                        .background(Color.red)
                        .padding(.top, 100)
                }
            }
        }
    }
}

struct Layout_Previews: PreviewProvider {
    static var previews: some View {
            Layout()
    }
}

 

 

GeometryReader 함수안에 geometry라는 파라미터를 이용하여 부모뷰의 넓이와 높이 값을 가져와서 프레임의 사이즈를 지정할 수 있다.

 

 

---

Text

 

import SwiftUI

struct Layout: View {
    var body: some View {
        VStack {
            Text("Hello SwiftUI!")
                .frame(width: 400, height: 100, alignment: .top)
                .font(.system(size: 30, weight: .bold, design: .default))
                .background(Color.orange)
                .foregroundColor(Color.white)
            Divider()
            Text("abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz")
                .frame(width: 400, height: 100, alignment: .center)
                .lineLimit(1)
                .truncationMode(.middle)
                .background(Color.green)
                .font(.system(size: 30, weight: .heavy, design: .default))
                
        }
    }
}

struct Layout_Previews: PreviewProvider {
    static var previews: some View {
            Layout()
    }
}

 

 

—Property

• frame() : frame에서 alignment 파라미터를 통해 해당 정렬상태를 변경할 수 있다.
  • top : 위쪽을 기준으로 정렬
  • topLeading : 위쪽과 왼쪽을 기준으로 정렬
  • topTrailing : 위쪽과 오른쪽을 기준으로 정렬
  • center : 정 가운데 정렬
  • Leading : 왼쪽 정렬
  • Trailing : 오른쪽 정렬
  • bottom : 아래를 기준으로 정렬
  • bottomLeading : 아래쪽과 왼쪽을 기준으로 정렬
  • bottomTrailing : 아래쪽과 오른쪽을 기준으로 정렬

   

• font() : 글씨의 속성을 지정할 수 있다. 보통 system을 사용하여 폰트의 크기와 디자인을 한꺼번에 설정한다.

 

• foreground(Color) : Text의 색상을 변경할 수 있다.

 

• background(Color) : Text 컴포넌트의 배경색을 변경할 수 있다.

 

• lineLimit(Int) : Text의 줄 수를 지정할 수 있다.

 

• multilineTextAlignment(enum) : 여러줄에 대한 정렬을 지정하고 싶을 때 사용하는 속성으로 enum값은 frame의 alignment의 속성값과 같다.

 

• truncationMode(enum) : .head, .middle, .tail로 구성되어 있으며, text가 생략될 때 어디를 생략할지를 정해준다.

 

 

Uploaded by Notion2Tistory v1.1.0