[SU] 도형

Source: Dev.to

고려 사항

한 형태는 자신을 포함하는 프레임의 크기를 가정합니다.

• Rectangle.init()
• RoundedRectangle.init(cornerRadius:style:)
• Circle.init()
• Ellipse.init()
• Capsule.init(style:)

Shape 초기화자

Rectangle()
RoundedRectangle(cornerRadius: 20, style: .continuous)
Circle()
Ellipse()
Capsule()

도형 예시

struct ContentView: View {
    var body: some View {
        HStack {
            Rectangle()
                .frame(width: 100, height: 120)

            RoundedRectangle(cornerRadius: 20, style: .continuous)
                .frame(width: 100, height: 120)

            Circle()
                .frame(width: 100, height: 120)

            Ellipse()
                .frame(width: 100, height: 120)

            Capsule()
                .frame(width: 100, height: 120)
        }
        .padding()
    }
}

Shape 메서드

• Shape.fill(_:style:): 색상이나 그라데이션으로 형태를 채웁니다.
• ShapeView.stroke(_:lineWidth:antialiased:): 색상이나 그라데이션을 사용해 형태의 테두리를 그립니다. 테두리는 바깥쪽으로 50 %·안쪽으로 50 % 확장됩니다.
• ShapeView.stroke(_:style:antialiased:): StrokeStyle을 통해 추가 스타일 정보를 사용해 테두리를 그립니다.
• ShapeView.strokeBorder(_:style:antialiased:): 선 두께의 절반에 해당하는 내부 여백을 적용하는 뷰를 반환합니다; 테두리는 안쪽으로 100 % 확장됩니다.
• ShapeView.strokeBorder(_:lineWidth:antialiased:): 선 두께만 지정하는 변형입니다.

채우기 및 테두리 예시

struct ContentView: View {
    var body: some View {
        HStack {
            Rectangle()
                .fill(.red)
                .frame(width: 100, height: 120)

            RoundedRectangle(cornerRadius: 20, style: .continuous)
                .fill(.white)
                .stroke(.red, lineWidth: 2)
                .frame(width: 100, height: 120)

            Circle()
                .fill(Color.white)
                .stroke(.red,
                        style: .init(lineWidth: 4,
                                     lineCap: .round,
                                     lineJoin: .miter,
                                     miterLimit: 0,
                                     dash: [10, 10],
                                     dashPhase: 10))
                .frame(width: 100, height: 120)

            Ellipse()
                .fill(Color.white)
                .strokeBorder(.red,
                             style: .init(lineWidth: 4,
                                          lineCap: .round,
                                          lineJoin: .miter,
                                          miterLimit: 0,
                                          dash: [10, 10],
                                          dashPhase: 10))
                .frame(width: 100, height: 120)

            Capsule()
                .fill(Color.white)
                .strokeBorder(.red,
                               style: .init(lineWidth: 4,
                                            lineCap: .round,
                                            lineJoin: .miter,
                                            miterLimit: 0,
                                            dash: [10, 10],
                                            dashPhase: 10))
                .frame(width: 100, height: 120)
        }
        .padding()
    }
}

뷰의 배경으로 Shape 사용

struct ContentView: View {
    var body: some View {
        VStack {
            Button {
                debugPrint("Hola1")
            } label: {
                Text("Activar 1")
                    .padding()
            }
            .tint(.white)
            .background(
                Capsule()
                    .fill(Color.blue)
            )

            Button {
                debugPrint("Hola2")
            } label: {
                Text("Activar 2")
                    .padding()
            }
            .tint(.white)
            .background(.blue, in: Capsule())
        }
        .padding()
    }
}

참고 문헌

Gauchat, J. D. (2024). SwiftUI for Masterminds: How to take advantage of Swift and SwiftUI to create insanely great apps for iPhones, iPads, and Macs (5ª ed.). John D Gauchat.