SwiftUI Text 다루기

• 이번에는 SwiftUI에서 Text를 어떻게 다루는지에 대해 알아보겠습니다.

SwiftUI Text

• SwiftUI의 Text는 기본적으로 LocalizedStringKey를 사용합니다.
• 아래는 Text의 생성자입니다.

init(
    _ key: LocalizedStringKey,
    tableName: String? = nil,
    bundle: Bundle? = nil,
    comment: StaticString? = nil
)

• LocalizedStringKey는 SwiftUI에서 다국어 지원을 쉽게 할 수 있도록 도와주는 타입입니다.
• Text 뷰에 문자열을 전달할 때 LocalizedStringKey를 사용하면 Localizable.strings 파일에서 자동으로 번역된 문자열을 가져올수 있습니다.

Text("hello_world") // Localizable.strings에서 번역된 값 사용

// en.lproj/Localizable.strings
"hello_world" = "Hello World!";

// ko.lproj/Localizable.strings
"hello_world" = "헬로우 월드!";

Text 만들기

• 기본적으로 Text 레이블은 다음과 같이 만들 수 있습니다.

Text("Hello World")

• 그리고 다음과 같이 줄 개수를 제한할 수 있습니다.

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
  .lineLimit(3)

• 줄의 개수를 제한하고 싶지 않다면, 숫자 대신 nil 값을 넣어줍니다.

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
  .lineLimit(nil)

• 긴 문장에 대해서는 다음과 같이 truncationMode를 사용해 일부를 생략할수도 있습니다.

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
  .lineLimit(1)
  .truncationMode(.middle)

• Text의 줄 간격은 lineSpacing을 다음과 같이 사용하면 조절할 수 있습니다.

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
  .lineSpacing(50)

• 여러 줄에 대한 정렬은 multilineTextAlignment를 통해 제어할 수 있습니다.

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
  .multilineTextAlignment(.center)

• Text의 폰트는 font를 통해 변경할 수 있습니다.

Text("Lorem ipsum")
  .font(.largeTitle)

• Text의 색상을 변경하기 위해서는 foregroundColor를 사용합니다.

Text("Lorem ipsum")
    .foregroundColor(Color.red)

• Text의 음영색, 배경색을 변경하고 싶다면 background를 사용합니다.

Text("Lorem ipsum")
    .background(Color.yellow)

Label 만들기

• Label은 Text와 Icon을 같이 표시해주는 UI 컴포넌트입니다.
• 다음과 같이 1번째 파라미터에 String 텍스트를 입력하고 systemImage를 불러올수 있습니다.

Label("동그라미", systemImage: "circle")

• 다음과 같이 font를 통해 Label의 font를 변경할수 있습니다.

Label("동그라미", systemImage: "circle")
  .font(.title)

• labelStyle을 통해 Label의 텍스트 혹은 이미지만 표시 할 수도 있습니다.

Label("동그라미", systemImage: "circle")
  .labelStyle(.titleOnly)

• 다음과 같이 텍스트와 아이콘을 완전히 독립적으로 구현할수도 있습니다.

Label {
  Text("Hohyeon Moon")
    .font(.largeTitle)
} icon: {
  RoundedRectangle(cornerRadius: 10)
    .fill(.blue)
    .frame(width: 32, height: 32)
}

마무리

이렇게 해서 SwiftUI에서는 Text를 어떻게 다루는지 알아봤습니다.