[SwiftUI] Text, Label 사용하기 + ViewModifier

Text("Hello World")

사용방법은 간단하다. 위 코드처럼 Text에 string 값을 넣거나 변수로 된 String 값을 넣으면 된다.

기본적으로 사용하는 방법은 Text 안에 String 값을 넣는것이지만 그 외에도 많은 생성 방법이 있다.

첫 번째 파라미터 이름을 기준으로 순서대로 역할을 알아보았다.

1. AttributedContent - AttributedString Type의 변수를 넣어서 사용할 수 있다. AttributedString은 텍스트의 특정 부분에 스타일을 적용 할 수 있다. (MarkDown, Custom Text)
2. date - Date값을 넣고 Style을 지정하면 스타일에 따라 정해진 표시형식의 텍스트가 출력된다. 옵션으로는 date, time, timer, relative, offset이 존재한다.
3. key - String Localizing을 위한 생성방법이다. 만들어둔 현지화 파일을 기준으로 key에 따라 텍스트를 변환해 준다. tableName을 지정하지 않으면 기본 테이블에서 키를 탐색하여 출력한다.
4. timeInterval - ClosedRange<Date>를 사용해서 타이머를 만들 수 있다. Range만 설정하면 초당 변하는 타이머 텍스트를 출력할 수 있다. countDowns는 타이머를 0부터 시작할건지 max부터 아래로 내려갈 것인지를 설정할 수 있고, showsHours는 분단위만 표시할건지 시까지 표시할것인지 설정할 수 있다.  IOS 16.0부터 사용 가능하다.
5. verbatim - Localizable로 현지화 했을 때 Key를 사용하지 않고 문자열 그대로를 출력하고 싶을때 사용한다. (현지화를 우회하는 방법)

* 5번 현지화 Text 생성의 경우 변수에 key String을 담아서 Text로 보낼경우 현지화가 되지 않는다. 이때는 LocalizedStringKey()로 변수를 감싸서 Text에 넣으면 현지화가 된 텍스트를 얻을 수 있다.

*이 외에도 몇가지 생성 방법이 더 있지만 이해하기 어렵다... 공식문서에 존재한다.

---

ViewModifier

ViewModifier | Apple Developer Documentation

ViewModifier는 프로토콜로 View 혹은 다른 ViewModifier에 적용하여 또다른 View를 생성한다.

간단하게 사용하는 것을 봐서는 뷰를 꾸며준다. 라고 볼 수 있을 것 같다.

Text를 예로 들면 간단한 ViewModifier는 Text를 꾸며주는 역할을 하는것이 있다.

Text("Hello")
	.font(.headline)
	.foregroundColor(.green)
	.underline()
	.italic()
	.background(Color.yellow)

font, color, underline, background등 텍스트를 꾸며주는 modifier가 존재한다.

꾸며주는 것 외에도 라인제한, 생략, 줄 간격 등을 설정할 수 있다.

Text("Hello Info.plist contained no UIScene configuration dictionary, Info.plist contained no UIScene configuration dictionary")
                .lineLimit(1)
                .truncationMode(.tail)
                .lineSpacing(10.0)

lineLimit는 nil을 넣으면 줄 수를 제한하지 않는다.

truncationMode는 head, middle, tail이 있으며 각각 앞, 중간 뒤쪽의 줄임표시 ...을 자동으로 해 준다. 줄 수 제한이 없다면 표시되지 않는다.

ViewModifier는 직접 만드는 것도 가능하다. (프리셋 같이?)

struct ModifierPreset: ViewModifier {
    var foregroundColor: Color = .green
    func body(content: Content) -> some View {
        content
            .foregroundColor(foregroundColor)
            .background(Color.yellow)
    }
}

SwiftUI 파일을 생성 후 ViewModifier 프로토콜을 채택하는 구조체를 생성하고 body를 자동완성하면 content 파라미터를 갖는 body 함수가 생성된다.

이 함수에는 Modifier가 적용되는 Content가 들어오기 때문에 content에 modifier를 적용시켜주면 된다.

그리고 생성시 파라미터를 입력받게 해서 추가 수정 작업을 외부에서도 할 수 있기도 하다.

이렇게 만든 ViewModifier의 사용방법은

Text("Hello Label")
    .modifier(ModifierPreset(foregroundColor: .blue))

.modifier에 자신이 만든 ViewModifier를 선언해주면 끝이다.

---

Label

UIKit에 UILabel이 있다면 SwiftUI에는 Label이 있다. Text와 뭐가 다른것인가 싶지만, Label은 image도 넣을 수 있고 이미지와 텍스트의 표시 형식도 정할 수 있는 등 여러 다른점이 있다.

솔직히 이모티콘 넣으면 아니다.

VStack {
	Label("Lightning", systemImage: "bolt.fill")
		.labelStyle(.titleOnly)
	Label("Lightning", systemImage: "bolt.fill")
		.labelStyle(.iconOnly)
	Label("Lightning", systemImage: "bolt.fill")
		.labelStyle(.titleAndIcon)        
}

애플 공식 문서에 있는 코드 3가지다. 

systemImage파라미터를 사용해서 SFSymbol을 삽입할 수 있고 또는 image 파라미터를 사용해서 Asset에 있는 이미지를 Label에 넣을 수 있고, modifier로 labelStyle을 선택해 표시형식을 다르게 할 수도 있다.

titleOnly는 이미지 없이 텍스트만, iconOnly는 이미지만, titleAndIcon은 둘 다 표시해준다. automatic도 있다.

Label {
    Text("Hello Label")
        .bold()
} icon: {
    Image(systemName: "message")
}

또는 Text와 Icon을 View로 반환하게 하여 Label을 생성할 수 있다.