SwiftUI’s built-in shapes

 

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

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/swiftuis-built-in-shapes]

 

SwiftUI’s built-in shapes

 

SwiftUI는 일반적으로 사용되는 5개의 내장된 도형(shapes)을 제공합니다: rectangle, rounded rectangle, circle, ellipse, capsule. 특히 마지막 3개는 제공하는 크기에 따라 동작이 미묘하게 다르지만, 하나의 예제에서 모든 옵션을 보여줄 수 있습니다.

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.black)
                .frame(width: 200, height: 200)

            RoundedRectangle(cornerRadius: 25, style: .continuous)
                .fill(Color.red)
                .frame(width: 200, height: 200)

            Capsule()
                .fill(Color.green)
                .frame(width: 100, height: 50)

            Ellipse()
                .fill(Color.blue)
                .frame(width: 100, height: 50)

            Circle()
                .fill(Color.white)
                .frame(width: 100, height: 50)
        }
    }
}

 

5개의 도형 모두 그립니다: 200x200 2개와 100x50 3개. 하지만, 도형을 그리는 동작이 다르기 때문에, 출력에서 5개 도형 모두 볼수 있습니다.

• Rectangel은 지정한 정확한 수치로 상자(box)를 그립니다.
• RoundedRectable은 같지만, 특정 양만큼 모서리를 둥글게 만들수 있습니다. 2번째 매개변수, style은 전통적인 둥근 모서리(.circle) 또는 애플의 약간 더 부드러운 것(.continuous) 인지를 결정합니다.
• Capsule은 높이 또는 넓이가 가장큰지에 따라, 한쪽 모서리 축이 완전히 둥근 상자를 그립니다. 우리의 도형은 100x50 이므로, 상단과 하단 모서리가 똑바로되어 있는 동안, 왼쪽과 오른쪽 모서리가 둥글것입니다.
• Ellipse는 지정한 정확한 수치로 타원을 그립니다.
• Circle은 높이와 넓이가 같은 타원을 그리므로, 100x50을 제공할때 실제적으로 50x50의 공간이 될 것입니다.