[SwiftUI] Text 뷰 심화 정리 (1)

앱개발시 Text 뷰는 정말 많이 쓰입니다.
많이 쓰이는 만큼이나 다양한 케이스를 정리해보았습니다.

 

기본적인 형태

Text("Tunko1")

 

Text에 이미지 넣기

Text(Image(systemName: "star"))

Text 연산자 사용하기 (비교)

if Text(textValue) == Text(textValue)
{
    Text(textValue)
}

 

Text 연산자 사용하기 (합치기)

(Text("Hello ") + Text(Image(systemName: "star")) + Text(" World!"))
.foregroundColor(.red)
.font(.largeTitle)

소괄호로 묶어서 동시에 속성을 적용할 수 있습니다.

 

Text 커스텀 폰트 사용하기

Text("Hello swiftUI!")
    .font(Font.custom("AppleGothic-bold", size: 20))

 

Text 자간 넣기 및 공간 넣기[kerning] [tracking]

자간 넣기

Text("Hello swiftUI!")
    .kerning(10)

공간 넣기

Text("Hello swiftUI!")
    .tracking(10)

kerning 을 적용한것과 tracking 을 적용한것은 결과값이 같아 보일 수 있다. 하지만 값을 변경하면 엄연한 차이가 발생한다.

Text("Hello swiftUI!")
    .kerning(30)

Text("Hello swiftUI!")
    .tracking(30)

이처럼 결과에 차이가 나타나게 된다.
tracking 에대한 공식 링크를 남긴다.

공식 문서 설명상으로
kerning 과 tracking은 유사합니다. 하지만 tracking은 후행에 공백 문자를 제거 합니다. 따라서 위와 같은 결과나 나타나는 것으로 보입니다.
이 부분에 대해 정확하게 필자는 정확히 이해를 못했습니다. 혹시 풀어서 설명해주실분은 댓글 부탁드립니다.

The effect of tracking resembles that of the kerning(_:) modifier, but adds or removes trailing whitespace, rather than changing character offsets. Also, using any nonzero amount of tracking disables nonessential ligatures, whereas kerning attempts to maintain ligatures.

 

Text 우선순위 할당하기 [layoutPriority]

예를들어 A,B Text가 있습니다.
좁은 영역에 한줄로 보여지는 형태 일때 중요한 Text는 전문이 다보이고, 나머지 부분은 … 표시가 되도록 처리 해야 할때가 생긴다.

HStack {
    Text("알베르트 아인슈타인 :").lineLimit(1)
    Text("삶을 사는 데는 단 두가지 방법이 있다.하나는 기적이 전혀 없다고 여기는 것이고, 또 다른 하나는 모든 것이 기적이라 여기는방식이다.").lineLimit(1)
}.frame(width : 240)

위 코드를 보면 HStack에 Text 가 두개 있는 형태이다. 여기서 처음 문구와 두번째 문구가 … 처리 되어있음을 알 수 있다.

이때 .layoutPriority 레이아웃 우선순위를 할당하면 결과가 변하게 된다.

HStack {
    Text("알베르트 아인슈타인 :").lineLimit(1).layoutPriority(1)
    Text("삶을 사는 데는 단 두가지 방법이 있다.하나는 기적이 전혀 없다고 여기는 것이고, 또 다른 하나는 모든 것이 기적이라 여기는방식이다.").lineLimit(1)
}.frame(width : 240)

 

이때 layoutPriority에 0은 기본값 이기에 1을 할당했습니다.

다음글에서 이어서 SwiftUI Text를 다뤄보겠습니다.
워낙 다양한 케이스와 개발시 자주 쓰이는 View라서 꼼꼼히 정리해두면 개발할때 너무 편할것으로 예상합니다.