iOS 14부터 등장한 ContainerRelativeShape를 이용하여 특정 모서리만 둥글게 만드는 방법에 대한 글입니다.

ContainerRelativeShape 란 무엇입니까?

적절한 반경으로 SwiftUI 보기의 모서리를 둥글게 만듭니다.
iPhone 11, WidgetKit 등 모서리가 둥근 기기와 UI가 증가하고 있습니다.









조던 싱어


@jsngr






SwiftUI는 iOS 14에서 ContainerRelativeShape()를 제공하여 코너 반경 값을 수동으로 지정할 필요 없이 자동으로 코너 반경을 부모 모양에 동심으로 만듭니다 ✨


오후 17:34 - 2020년 6월 27일





98

784

목적

1. 왼쪽 상단에 배치
2. ContainerRelativeShape 적용
3. 왼쪽 위 모서리만 만들어주세요!







이 문서에서는 3의 구현에 대해 설명합니다.

모서리를 특정 모서리로 둥글게 하려고 합니다.

둥근 모서리뿐만 아니라 자동 계산의 CornerRelativeShape를 사용하려고 합니다.

암호

맞춤 모양

ContainerRelativeShapeSpecificCorner 프로토콜과 Shape 옵션 세트를 사용하여 UIRectCorner 구조체를 만듭니다.

struct ContainerRelativeShapeSpecificCorner: Shape {

    private let corners: [UIRectCorner]

    init(corner: UIRectCorner...) {
        self.corners = corner
    }

    func path(in rect: CGRect) -> Path {
        var p = ContainerRelativeShape().path(in: rect)

        if corners.contains(.allCorners) {
            return p
        }

        if !corners.contains(.topLeft) {
            p.addPath(Rectangle().path(in: CGRect(x: rect.origin.x, y: rect.origin.y, width: rect.width / 2, height: rect.height / 2)))
        }
        if !corners.contains(.topRight) {
            p.addPath(Rectangle().path(in: CGRect(x: rect.origin.x + rect.width / 2, y: rect.origin.y, width: rect.width / 2, height: rect.height / 2)))
        }
        if !corners.contains(.bottomLeft) {
            p.addPath(Rectangle().path(in: CGRect(x: rect.origin.x, y: rect.origin.y + rect.height / 2, width: rect.width / 2, height: rect.height / 2)))
        }
        if !corners.contains(.bottomRight) {
            p.addPath(Rectangle().path(in: CGRect(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2, width: rect.width / 2, height: rect.height / 2)))
        }
        return p
    }
}

사용 예

// Originally
Image("camera")
    .clipShape(ContainerRelativeShape())

// This article's
Image("camera")
    .clipShape(ContainerRelativeShapeSpecificCorner(corner: .topLeft, .topRight))

// Complete code sample
struct SampleView: View {
    var body: some View {
        Group {
            Image("camera")
                .resizable()
                .scaledToFill()
                .frame(width: 80, height: 80)
                .clipShape(ContainerRelativeShapeSpecificCorner(corner: .topLeft))
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .padding(8)
    }
}