SwiftUI Text 다루기

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

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를 어떻게 다루는지 알아봤습니다.