[SwiftUI] Text and Fonts

Text 모디파이어

• 텍스트 출력
  font: .largetTitle 등 서식 설정
  foregroundColor: 글자 색
  background: 글자 배경 색(프레임 색)
  lineLimit: text의 길이가 긴 경우 표시할 줄 설정
  multilineTextAlignment: 기본은 .leading, 여러줄일 경우 정렬 설정
  lineSpacing: 줄 간 여백 설정
  truncationMode: text의 길이가 길 때 전부 표시할 수 없을 시 .head, .middle, .tail 중 설정 가능하며 기본값은 .tail

---

Label

• 이미지와 텍스트를 함께 출력하는데 사용

Label("표시할 text", systemImage: "이미지")

systemImage의 종류가 많기 때문에 앱을 설치한 뒤 확인하는 것이 좋다 (설치 링크)

HStack {
	Image(systemName: "person")
    Text("User Profile")
}
.font(.largeTitle)

//위와 동일
Label("User Profile", "systemImage: "person")
	.font(.largeTitle)

HStack {
	Image("logo")
    	.resizable()
        .aspectRatio(1.0, contentMode: .fit)
        .frame(width: 60)
        .clipShape(Circle())
        .overlay {
        	Circle()
            .stroke(lineWidth: 2)
            .forgroundColor(.blue)
        }
        
        Text("KxCoding")
        	.font(.largeTitle)
}

//위와 동일
Label {
	//오른쪽 표시
    Text("KxCoding")
    	.font(.largeTitle)
} icon: {
	//왼쪽 표시
    Image("logo")
    	.resizable()
        .aspectRatio(1.0, contentMode: .fit)
        .frame(width: 60)
        .clipShape(Circle())
        .overlay {
        	Circle()
            .stroke(lineWidth: 2)
            .forgroundColor(.blue)
        }
}

-> UI가 단순하면 Label이 좋고, 커스텀 뷰 리턴 시 차이가 없음. 단, 네비게이션바나 툴바에 임베드하면 Label이 좀 더 좋음
왜냐하면 labelStyle 모디파이어를 사용 가능하기 때문

.toolbar {
	Button {
    
    } label: {
    	Label("User Profile", systemImage: "person")
        	.labelStyle(.titleAndIcon)
    }
}

---

Font

• SwiftUI는 dynamic font를 지원한다
  • 만약 직접 지정하면(ex: 50pt) 지원하지 않음
• 크기를 직접 지정하는 것보다는 미리 선언된 크기를 사용하는 것이 좋다.
• font를 따로 지정하지 않으면 .body가 기본

Font Design

• 별도 지정 없을 시 고딕체 사용
• 문자에 따라 너비가 달라지는 가변 폰트 사용

Monospaced

• system 메소드 사용

Text("Monospaced")
	.font(.system(.largeTitle, design: .monospaced))

Rounded

Text("Rounded")
	.font(.system(.largeTitle, design: .rounded))

Serif

Text("Serif")
	.font(.system(.largeTitle, design: .serif))

font 크기 조정

Text("50pt Font")
	.font(.system(size: 50))
    
//weight 조정
Text("Black")
	.font(.system(size: 50, weight: .black)
    
Text("Ultra Light")
	.font((.system(size: 50))
    .fontWeight(.ultraThin)

font Styles

Text("Underline")
	.underline(active: Bool, color: nil)

• 밑줄 그어줌
• active 파라미터로 밑줄 표시 여부 전달
• color 파라미터로 색 설정, nil일경우 검정색