Polishing designs with fonts and colors

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/polishing-designs-with-fonts-and-colors]

 

Polishing designs with fonts and colors

[동영상 강좌 : https://youtu.be/dkQKHqCKbT8]

 

조금 뒤에 디자인을 더 추가할 것이지만, 우선 잠깐 멈추고 더 좋게 보이도록 만듭시다. 

 

각 행에서 가장 중요한 것이 메뉴 항목의 이름을 명확히 하는 것이지만, 아래 있는 가격과 동일한 폰트 크기를 가집니다. Apple의 Dynamic Type 크기를 허용하는 font() modifier를 사용해서 크기와 비중을 늘리수 있습니다.

 

따라서 다음과 같이 눈에 띄게 만들 것입니다.

Text(item.name)
    .font(.headline)

 

사진은 있는 그대로 보이는것이 좋지만, 약간 더 좋게 보이도록 합니다. 예를 들어, clipShape() modifier를 적용하고 원 모양으로 잘라내도록 요청 할 수 있습니다.

Image(item.thumbnailImage)
    .clipShape(Circle())

 

또는 clipShape() modifier을 적용하고 나서 overlay() modifier를 추가해서 이미지의 윗쪽에 도형을 배치할 수 있습니다. 예를 들어, 이미지 위에 동그라미를 추가하고나서, 2 포인트 회식 테두리 원을 줄수 있습니다. 

Image(item.thumbnailImage)
    .clipShape(Circle())
    .overlay(Circle().stroke(Color.gray, lineWidth: 2))

 

스타일은 충분합니다 - 좀 더 복잡한 것을 봅시다.

 

menu.json을 보면 각 메뉴 항목에 제한된(restrictions) 문자열 배열이 었는 것을 알수 있습니다: 글루텐 함량에 대해 G, 견과류 함량에 대해 N, 채식을 위한 V, 등등. 이를 사용해서 음식의 내용을 한눈에 볼 수 있는 색상 아이콘을 만들 수 있고, 각 행마다 적절하게 0개 이상을 보여줄 수 있습니다.

 

우선, 각 제한된 타입에서 사용할 색상 디렉토리가 필요합니다. ItemRow에 다음 프로퍼티를 추가하세요.

static let colors: [String: Color] = ["D": .purple, "G": .black, "N": .red, "S": .blue, "V": .green]

 

두번째로, 모든 제한사항을 반복하고 각각 텍스트 뷰에 넣어야 합니다. 이것을 이름과 비용을 포함하는 VStack 뒤에 넣습니다.

ForEach(item.restrictions) { restriction in
    Text(restriction)
}

 

 

이제 한가지 문제가 있습니다: 코드는 컴파일 되지 않습니다. 이전에 언급했던 것처럼, SwiftUI가 배열의 각 항목을 고유하게 식별할 수 있는 방법을 알고 있는 한 ForEach에 배열을 넣을 수 있습니다. 섹션과 항목들이 Identifiable 프로토콜을 준수해서, 항목을 식별하는데 id 프로퍼티를 사용하도록 만들어서 해결했었습니다. 

 

여기에, 문자열 배열이 있으므로, Identifiable을 준수하도록 만들 수 없습니다. 대신에, 다른것이 필요합니다: 문자열 자체(itself)가 각 항목의 식별자인 것을 Swift에게 알려줘야 합니다. 다음과 같이 ForEach에 대한 id매개변수에 .self를 전달해서 완료할 수 있습니다.

ForEach(item.restrictions, id: \.self) { restriction in
    Text(restriction)
}

 

 

이제 Xcode 미리보기에 있는 예제 항목 옆에 G와 V를 보게 될 것입니다. 

 

약간 단조롭기에, 몇가지 modifiers를 추가합시다.

Text(restriction)
    .font(.caption)
    .fontWeight(.black)
    .padding(5)
    .background(Self.colors[restriction, default: .black])
    .clipShape(Circle())
    .foregroundColor(.white)

 

 

텍스트에 작고 두꺼운 폰트를 사용하고 배경 색상이 있으며, 원 모양으로 잘라내고, 주변에 약간의 공간을 추가해서 텍스트 원이 가까이 있지 않도록 합니다.

해당 항목의 행 디자인을 완료하기 전에 한가지 더 할 것입니다: 제한된(restriction) 텍스트가 해당 행의 나머지와 멀리 떨어뜨려야 합니다. SwiftUI는 Spacer이라는 전용 뷰가 뷰가 있고, 다음과 같이 제한 사항에 대한 ForEach 앞에 넣어주기 바랍니다.

Spacer()

ForEach(item.restrictions, id: \.self) {

 

 

그것은 자동으로 사용가능한 남은 공간을 가지며, 사진은 가장 왼쪽에 있고 제한사항(restrictions)은 가장 오른쪽에 있습니다.

 

계속해서 프로젝트를 실행하면 멋지게 보일 것입니다! 이제 UITableViewCell을 사용해서 이 모든 것을 달성하기 위한 방법을 생각해보세요 - 생각보다 코드가 많이 필요합니다. 

 

팁: 메뉴 항목 라벨이 잘리는 경우에는, ItemRow에 있는 VStack에 .layoutPriority(1)을 추가해보세요 - VStack에 있는 모든 항목들을 보여줘야 한다는 것을 SwiftUI에게 알려줍니다. 이것이 바로 필요하지 않기를 바랍니다!