참고 자료: SwiftUI 튜토리얼 공식문서
이제 막 SwiftUI를 배워보는 한 사람으로서, 코드 작성하고 내가 이해 한 대로 작성할것이다.
이 글의 내용은 위에 있는 참고자료의 공식문서를 번역하여 조금 더 내가 느끼기에 자연스럽게 만들어서 작성하는것이다.
누군가에게 알려주기보다 자신이 정리를 하면서 다시 문서를 보고 어버버거리지 않게 다시 참고하기 위함이기에 해당 문서를 읽는 사람은 swift에 대해서 어느 정도 안다는 가정하에 글을 작성할것이다
시작
다양한 폰트, 다이나믹 타입 및 다양한 문자열 길이에 맞게 조정되는 레이아웃을 구성한다.
텍스트를 포함하는 view를 구성할 때, 심볼이나 패딩과 같은 다른 요소를 해당 텍스트와 관련하여 정의해야 view가 텍스트의 크기에 맞게 조정된다.
변경되거나 현지화, 다이나믹 타입의 크기 등으로 텍스트 컨텐츠가 변경될 때 해당 텍스트를 기준으로 심볼과 패딩 등의 요소를 조정해 view가 유연하게 조정될 수 있게 구성해야 한다.
분석
1. 컨텐츠를 텍스트와 연결
Bubble.swift
import SwiftUI
// Source file for Section 1
struct KeywordBubbleDefaultPadding: View {
let keyword: String
let symbol: String
var body: some View {
Label(keyword, systemImage: symbol)
.font(.title)
.foregroundColor(.white)
.padding()
.background(.purple.opacity(0.75), in: Capsule())
}
}
struct KeywordBubbleDefaultPadding_Previews: PreviewProvider {
static let keywords = ["chives", "fern-leaf lavender"]
static var previews: some View {
VStack {
ForEach(keywords, id: \.self) { word in
KeywordBubbleDefaultPadding(keyword: word, symbol: "leaf")
}
}
}
}해당 view를 재사용하기 위해서는, label의 text와 simbol의 이름이 view의 속성이어야 한다.
다른 view가 해당 view를 사용할 때, 그 view는 표시할 텍스트와 심볼을 지정한다.
-> view 내부에 변수로 지정을 해두면 이걸 사용해서 할 수 있는것 같음 UIView에서 내부 변수 두고 해당 변수의 값을 바꿔가면서 내부의 컴포넌트들을 조정을 하는거처럼 같은 뜻인것 같음
Label은 텍스트와 심볼, 이 view의 주요 컨텐츠를 배열하는 view이다. Label은 심볼의 크기를 조정하고 두 컨텐츠를 정렬하므로 두 컨텐츠를 따로 정렬할 필요는 없다.
Label은 텍스트와 이미지 모두 동일 글꼴을 적용하며 이미지는 글꼴 정보를 사용하여 크기와 위치를 결정한다.
padding()을 활용하여 view의 네 가장자리 모두에 기본 공간을 추가하는 뷰를 생성한다.
Capsule은 해당 view를 채우기 위해 둥근 사각형의 모양을 제공한다.
캡슐이 텍스트와 기호 뒤에 속하도록 지정하는 코드를 Label 내부에 정의한다.
2. Xcode에서 커스텀 view 미리보기
Xcode는 코드가 변경될 때 레이아웃을 미리 볼 수 있는 방법을 제공한다.
커스텀 view의 미리보기를 보기 위해서는 PreviewProvider 프로토콜을 구현한다.
프리뷰는 view의 변경되어지는 것을 표시 할 수 있으므로 다양한 환경에 어떻게 적응하는지 확인 가능하다
Protocol: PreviewProvider
3. ScaledMetric을 이용한 크기 조정
이 view의 패딩이나 fram이 width와 height가 항상 레이아웃에 적합하지 않을 수 있다.
대부분의 상황에서 다양한 환경에 사용할 값의 집합을 설계 가능하나 다이나믹 타입 설정과 폰트 옵션의 조합은 100가지가 넘으므로 각각에 대해 특정 값을 선택하는 것은 실용적이지 않다.
각 환경의 유효한 폰트 크기에 맞는 값을 제공해야 하는 경우에는 ScaledMetric 프로퍼티로 감싸서 사용한다.
Struct: ScaledMetric
import SwiftUI
// Source file for Section 2
struct KeywordBubble: View {
let keyword: String
let symbol: String
@ScaledMetric(relativeTo: .title) var paddingWidth = 14.5
var body: some View {
Label(keyword, systemImage: symbol)
.font(.title)
.foregroundColor(.white)
.padding(paddingWidth)
.background {
Capsule()
.fill(.purple.opacity(0.75))
}
}
}1의 샘플코드에서 기본 패딩을 사용하면 리프 심볼의 끝이 캡슐 모양의 가장자리와 충돌하는것을 확인 할 수 있다.
텍스트의 작은 크기에 너무 많은 여백을 주지 않고 큰 크기로 내부의 컨텐츠를 유지하려면 텍스트 크기에 따라 크기가 조정이 되는 custom padding metric을 정의해야 한다.
이 변수는 다이나믹 타입 환경에서 컨텐츠에 대한 값을 제공한다.
ScaledMetric 프로퍼티를 사용하면 dynamicTypeSize의 현재 값에 따라 비례적으로 크거나 작은값이 된다.
Property: dynamicTypeSize
Label은 텍스트의 크기를 지정한다.
padding()에 변수를 사용함으로 이제 모든 다이나믹 타입의 변형에 대해 캡슐모양과 심볼 사이에 여백이 적용된다.
참고자료
기타
당연 틀린 부분 지적은 감사하나 비난은 정중하게 사양하겠다.
