[SwiftUI] Text 알아보기

basic

Text는 아래와 같이 modifier들을 사용가능.

struct SwiftUIView: View {
    var body: some View {
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus sem at congue varius. Nunc vulputate purus eros, vitae venenatis turpis blandit in.")
            .bold()     // 볼드체
            .italic()   // 이텔릭
            .strikethrough(true, color: .blue)  // 취소선
            .underline(true, color: .green)     // 밑줄
            .lineLimit(3) // 줄 제한
            .multilineTextAlignment(.center)    // 텍스트 정렬
            .font(.title3) // 폰트
            .font(.system(size: 12, design: .rounded)) // 폰트
            .foregroundColor(.red) // 색상
            .lineSpacing(10.0)      // 행간
            .tracking(5)    // 자간 (iOS16+)
            .kerning(5)     // 글꼴에 따른 자간 (iOS16+)
    }
}

 
 

Text끼리 더해서 표현

Text끼리 +로 합쳐서 여러스타일이 적용된 하나의 Text로 만들 수 있음.

struct SwiftUIView: View {
    var body: some View {
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
            .bold()
            .foregroundColor(.orange)
        +
        Text(" Vivamus tempus sem at congue varius.")
            .italic()
            .foregroundColor(.blue)
        +
        Text(" Nunc vulputate purus eros, vitae venenatis turpis blandit in.")
            .strikethrough()
            .foregroundColor(.green)
    }
}

 

AttributedString 적용

struct SwiftUIView: View {
    var body: some View {
        let attributedString: AttributedString = {
            var string = AttributedString("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus sem at congue varius. Nunc vulputate purus eros, vitae venenatis turpis blandit in.")
            
            if let range1 = string.range(of: "Lorem ipsum dolor sit amet,") {
                string[range1].foregroundColor = UIColor.systemRed
                string[range1].kern = 5
            }
            
            if let range2 = string.range(of: "consectetur adipiscing elit.") {
                string[range2].strikethroughStyle = .single
            }
            
            if let range3 = string.range(of: "Vivamus tempus sem at congue varius. ") {
                string[range3].baselineOffset = 5
            }
            
            if let range4 = string.range(of: "vitae venenatis turpis blandit in.") {
                string[range4].underlineStyle = .single
            }
            
            return string
        }()
        
        Text(attributedString)
    }
}

 

Text의 frame

Text는 string의 길이가 길면 부모의 maxWidth만큼 채우거나, 길이가 짧으면 그보다 작은 너비를 가지게 됨.
예시.

struct SomeSwiftUIView: View {
    var body: some View {
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus sem at congue varius. Nunc vulputate purus eros, vitae venenatis turpis blandit in.")
            .background(Color(.yellow))
            .padding(.vertical)
        
        Text("Vestibulum auctor ultrices odio.")
            .background(Color(.green))
    }
}

 
frame의 maxWidth를 .infinity로 지정해주면 string의 길이가 부족해도 부모의 maxWidth만큼 채울 수 있음.

struct SomeSwiftUIView: View {
    var body: some View {
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempus sem at congue varius. Nunc vulputate purus eros, vitae venenatis turpis blandit in.")
            .background(Color(.yellow))
            .padding(.vertical)
        
        Text("Vestibulum auctor ultrices odio.")
            .frame(maxWidth: .infinity) // 최대 너비를 지정
            .background(Color(.green))
    }
}

 

 

TextSelection(iOS15+)

롱프레스시 선택메뉴를 보여줄 수 있음.

struct TextPractice: View {
    var body: some View {
        Text("text 선택")
            .textSelection(.enabled)
    }
}

 

Text와 Markdown문법(iOS15+)

iOS15부터 Text에서 마크다운을 지원.
Forum에서 GFM(Github Flavored Markdown)을 지원한다는 답글이 있음.
(GFM Spec: https://github.github.com/gfm/)
모든 마크다운 문법이 지원되는 것은 아님(타이틀(#)이나 이미지(![]())도 되지 않음)
예시.

struct SomeSwiftUIView: View {
    var body: some View {
        VStack(spacing: 10, content: {
            Text("Markdown")
                .font(.title)
            
            Text("**bold**") // 볼드
            Text("__bold__") // 볼드
            
            Text("*italic*") // 이탤릭
            Text("_italic_") // 이탤릭
            
            Text("***bold italic***") // 볼드 이탤릭
            Text("___bold italic___") // 볼드 이탤릭
            
            Text("~~strikethrough~~") // 취소선

            Text("`monospaced`") // monospaced
            
            Text("[link](swifty-cody.tistory.com)") // 링크
        })
    }
}

 
마크다운 String변수를 Text에 바로 넣으면 동작하지 않고,
LocalizedStringKey로 초기화한 후 넣으면 동작됨.

struct SomeSwiftUIView: View {
    var body: some View {
        VStack(spacing: 10, content: {
            Text("Markdown")
                .font(.title)
            
            Text("**bold**") // 볼드
            Text("__bold__") // 볼드
            
            let boldString = "**bold**"
            
            Text(boldString) // 변수는 동작하지 않음
            Text(.init(boldString)) // 변수를 LocalizedStringKey로 초기화하면 동작.
        })
    }
}

 

 

지정된 라인수 예약하기(iOS16+)

지정한 라인을 채우지 못해도 Text의 공간을 채워서 그릴수 있음.

struct TextPractice: View {
    var body: some View {
        ScrollView {
            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
                .lineLimit(5, reservesSpace: true)
                .frame(maxWidth: .infinity)
                .background(Color.blue)
        }
    }
}