SwiftUI View란? View Modifiers

a screen in an iOS app is made up of SwiftUI views like Text, Image, Label and Button.

Apple defines View as a protocol.

 

 

struct HappyView: View {
   var body: some View {
       Text("Hello, World!")
   }
}

애플에서 View 는 프로토콜로 정의한다. (프로토콜이란 특정 태스크를 완료하기 위해 필요한 요구사항들의 집합의 초석을 정의하는 것)

위 코드에서 View는 구조체다. 구조체는 서로 관련있는 속성(properties)과 함수의 집합을 캡슐화한다.

HappyView: View 에서 : View는 HappyView는 View 프로토콜을 따른다는 것을 뜻한다.

 

body는 View 프로토콜의 속성(property)이다. 그래서 모든 커스텀 뷰를 구현할 때는 그 안에 body가 있어야한다. body는 내 뷰에 컨텐츠를 제공하는데, Button, Text 등 View 프로토콜에 따르는 어떠한 것들도 올 수 있다. 위의 코드에서 body는 Text 뷰를 가진다.

 

 

 

View Modifiers

뷰 모디파이어는 뷰에 attribute를 적용해서 뷰가 어떻게 나타나는지를 변경하는 것이다.

예를 들어 단순한 텍스트에 속성을 주어 변경하고 싶을 때, 이렇게 하면 된다.

Text("Hello, World!")
   .foregroundColor(.blue)
   .bold()

여기서 foregroundColor(), bold()와 같은 것들이 뷰 모디파이어이다. 그리고 이들은 서로 chained될 수 있다.(foregroundColor(.blue))

 

뷰 모디파이어의 순서는 딱히 중요하진 않지만 달라지는 몇몇 예시들이 있다. 뭐 요런 식

Text("I'm happy!")
   .border(Color.black, width: 1)
   .padding()

Text("I'm happy!")
   .padding()
   .border(Color.black, width: 1)

 

 

그리고 Text 뷰에 적용할 수 있는 다른 뷰 모디파이어를 보려면 옆에 . 을 찍으면 된다.

Text 뷰 모디파이어 예시

1. font() - 안에 .title / .headline / .footnote 등이 들어갈 수 있음. (.font(.title))

그리고 아래와 같은 식으로 커스텀 디자인을 할 수도 있다.

 Text("Hello")
     .font(.title)
     
  Text("World!")
     .font(Font.custom("Helvetica", size: 24))

여기서 Font 는 여러가지 방식으로 초기화 될 수 있는 구조체다. 애플 공식 문서에서 Font의 init() 메서드를 보면 아래와 같이 생겼다.

 static func custom(_ name: String, size: CGFloat) -> Font

static 키워드는 타입 메서드라는 것을 말하는데, 타입(구조체) 자체로 불리는 메서드를 말한다. 

 

2. multilineTextAlignment()

안에 .center 등을 넣어 사용할 수 있다.

 

3. padding()

뷰 주변에 공간을 더해준다. 기본값은 모든 변에 대하여 공간을 주지만, 특정 변에 대하여 커스텀하고싶으면 EdgeInsets을 이용하여 패딩을 주면 된다.

 Text("Checking alignment of text")
     .padding(EdgeInsets(top: 3, leading: 5, bottom: 10, trailing: 20))

또는 그냥 .padding(.top, 10)만 해도 위에만 적용된다.

 

4. bold() 글자 굵게

5. foregroundColor() 글자 색상을 정한다.

6. border() Text view 주변에 직사각형 테두리를 그려준다. 예시:   .border(Color.black, width: 1)