Ich möchte ContainerRelativeShape nur auf bestimmte Ecken anwenden [SwiftUI]

In diesem Artikel heißt es, dass Sie die automatische abgerundete Ecke "ContainerRelativeShape", die in iOS 14 angezeigt wurde, nur für bestimmte Ecken verwenden möchten.

Was ist ContainerRelativeShape?

Die Anzahl der Benutzeroberflächen mit abgerundeten Ecken, die für jedes Teil eindeutig sind, nimmt zu, z. B. das iPhone 11-Terminal selbst und das Widget, das in iOS14 angezeigt wurde. Die ContainerRelativeShape zeigt an jeder Stelle den entsprechenden abgerundeten Radius an.

SwiftUI gives you ContainerRelativeShape() in iOS 14, which automatically makes a corner radius concentric to its parent shape without needing to manually specify corner radius values ✨ pic.twitter.com/MO2IQuE7nx

— Jordan Singer (@jsngr) June 27, 2020

Zweck

Platziere es oben links	Wenden Sie ContainerRelativeShape an	Erweitern und umrunden Sie die obere linke Ecke!

• Ich möchte nur bestimmte Ecken abrunden --Und ich möchte die automatisch berechnete ContainerRelativeShape anstelle nur abgerundeter Ecken verwenden.

Ich werde die Umsetzung des Bildes ganz rechts erklären, das dies realisiert hat.

Code

Benutzerdefinierte Form

Verwenden des "Form" -Protokolls Es gibt ein gutes UIRectCorner-Optionsset, das Eckinformationen verarbeitet. Verwenden Sie es also Definieren Sie Ihre eigene ContainerRelativeShapeSpecificCorner-Struktur.

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
    }
}

Anwendungsbeispiel

//Ursprünglich
Image("camera")
    .clipShape(ContainerRelativeShape())

//Dieser Typ(Abgerundete Ecken nur für bestimmte Ecken)
Image("camera")
    .clipShape(ContainerRelativeShapeSpecificCorner(corner: .topLeft, .topRight))

//Alle Codebeispiele
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)
    }
}