SwiftUI 텍스트 다루기 (SwiftUI 강좌)

Dark Mode

SwiftUI 소개에서 SwiftUI에 대해 간략하게 알아본 데에 이어 이번에는 SwiftUI에서 텍스트를 어떻게 다루는지에 대해 알아보겠습니다.

참고로, SwiftUI는 Swift 문법 자체는 동일하게 사용하지만, 사용 방식이나 Xcode 사용법 등이 기존과는 달라졌습니다. 이 강좌는 Swift 기본 문법을 숙지하고 있다는 가정 하에 작성되었습니다.

텍스트 레이블 만들기

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

Text("Hello World")

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

Text("Hello World")
    .lineLimit(3)

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

Text("Hello World")
    .lineLimit(nil)

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

var body: some View {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
        .truncationMode(.middle)
}

텍스트 폰트, 색상, 줄 간격

텍스트의 폰트는 font를 통해 변경할 수 있고

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

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

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

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

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

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

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

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

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

텍스트뷰의 텍스트 포맷 설정

텍스트뷰안에 표시되는 텍스트의 포맷을 설정하기 위해서는 formatter를 사용하면 되는데요. 밑의 예시는 날짜 포맷으로 텍스트를 표기하는 예시입니다.

struct ContentView: View {
    static let taskDateFormat: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateStyle = .long
        return formatter
    }()

    var dueDate = Date()

    var body: some View {
        Text("Task due date: \(dueDate, formatter: Self.taskDateFormat)")
    }
}

마무리

SwiftUI의 새로운 구현 방식은 기존의 방식과 비슷하면서도 사뭇 다른데요. 오랜만에 완전히 새로운 프레임워크를 사용하다보니 정말 간단한 것도 막히는 부분이 생겨 답답하면서도 새롭고 진보된 기술의 신선함이 느껴져 좋았습니다.

이렇게 해서 SwiftUI에서는 텍스트를 어떻게 다루는지 알아봤는데요. 다음에는 SwiftUI에서 이미지를 어떻게 다루는지 알아보려고 합니다. 궁금한 점은 댓글로 남겨주세요!

댓글

Please enter your comment!
Please enter your name here