Je souhaite appliquer ContainerRelativeShape uniquement à des coins spécifiques [SwiftUI]

Cet article indique que vous souhaitez utiliser la forme arrondie automatique ContainerRelativeShape qui est apparue dans iOS 14 uniquement pour des coins spécifiques.

Qu'est-ce que ContainerRelativeShape?

Le nombre d'interfaces utilisateur aux coins arrondis uniques à chaque pièce augmente, comme le terminal iPhone 11 lui-même et le widget apparu dans iOS14. Le ContainerRelativeShape affiche le rayon arrondi approprié à chaque emplacement.

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

Objectif

Placez-le en haut à gauche	Appliquer ContainerRelativeShape	Développez et arrondissez le coin supérieur gauche!

--Je ne veux arrondir que des coins spécifiques

• Et je veux utiliser le ContainerRelativeShape calculé automatiquement au lieu de juste des coins arrondis.

Je vais vous expliquer la mise en œuvre de l'image à l'extrême droite qui a réalisé cela.

code

Forme personnalisée

Utilisation du protocole Shape Il y a un OptionSet ʻUIRectCornerqui est juste pour gérer les informations de coin, alors utilisez-le Définissez votre propre structureContainerRelativeShapeSpecificCorner`.

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

Exemple d'utilisation

//À l'origine
Image("camera")
    .clipShape(ContainerRelativeShape())

//Ce mec(Coins arrondis uniquement pour des coins spécifiques)
Image("camera")
    .clipShape(ContainerRelativeShapeSpecificCorner(corner: .topLeft, .topRight))

//Tous les exemples de code
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)
    }
}