13. Label & Font

Label

---

Apple Developer Documentation

Label은 이미지와 문자열을 표시하기에 적합한 View다.
SwiftUI 초기에는 존재하지 않았기 때문에 하위 호환성을 고려해 사용해야 한다.

struct LabelView: View {
    var body: some View {
        Label("Bulb", systemImage: "lightbulb")
    }
}

기본 형태는 title + systemImage이고,
Custom은 title + iCon으로 이 경우엔 Image View와 Text View를 조합해 사용하는 것과 크게 다르지 않다.

struct LabelView: View {
    var body: some View {
        NavigationView {
            Button {

            } label: {
                Label("icon", image: "icon")
            }
            .toolbar() {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button {

                    } label: {
                        HStack {
                            Image("icon")
                            Text("icon")
                        }
                    }
                }

                ToolbarItem(placement: .navigationBarTrailing) {
                    Button {

                    } label: {
                        Label("icon", image: "icon")
                    }
                }
            }
        }
    }
}

코드와 같이 같은 디자인의 Button을 Image View와 Text View를 조합해서 만들었을 때.
Lable을 사용해서 만들었을 때를 비교하면 Label을 사용해 만든 쪽은 Navigation Bar에 배치될 때 문자열이 사라지는 걸 볼 수 있다.

Image View와 Text View를 조합해 만든 것 같은 Custom View들은 iOS의 Context에 바로 적용할 수 없다.
즉 Label로 구현했을 때 동일한 구현으로 iOS Context에 자동으로 대응되므로 조금 더 편한 구현이 가능할 수 있다.
또한 Context에서 지원하는 Label Style 지원 등의 기능도 적용할 수 있다.

 

Font

---

Apple Developer Documentation

font는 Font 구조체로 구현돼 있다.
Dynamic Font를 기본적으로 지원하지만 직접 지정하기보다는
역할에 따른 시각적 구분과 가독성을 위해 기본값을 사용하는 것이 권장된다.

struct LabelView: View {
    var body: some View {
        Text("This, that pink venom This, that pink venom This, that pink venom")
            .font(.system(.title3, design: .monospaced))
    }
}

기본 값은 고딕체이고 가변 포트를 지원한다.
system(style:design:weight:) 생성자를 사용한다.

system(style:design:weight:)

Apple Developer Documentation

struct LabelView: View {
    var body: some View {
        Text("This, that pink venom This, that pink venom This, that pink venom")
            .font(.system(size: 25, weight: .black))
    }
}

font의 크기와 굵기를 변경할 수도 있다.
system(size:weight:) 생성자를 사용한다.

system(size:weight:design:)

Apple Developer Documentation

폰트의 스타일을 변경하지 않는다는 게 큰 차이점이다.
해당 생성자를 사용하게 되면 Dynamic Font를 더 이상 지원하지 않는다는 것을 주의해야 한다.