8
votes

SwiftUI - Ajouter une bordure à un bord d'une image

C'est une question assez simple - comment appliquer un effet de bordure uniquement aux bords voulus d'une image avec SwiftUI?

Par exemple, je souhaite uniquement appliquer une bordure aux bords supérieur et inférieur d'une image car l'image occupe toute la largeur de l'écran.

Image(mission.missionImageString)
    .resizable()
    .aspectRatio(contentMode: .fit)
    .border(Color.white, width: 2) //Adds a border to all 4 edges

Toute aide est appréciée!

swift swiftui image uiimage

0 commentaires

3 Réponses :

29
votes

Démo

la mise en oeuvre

Vous pouvez utiliser ce modificateur sur n'importe quelle View :

struct EdgeBorder: Shape {

    var width: CGFloat
    var edges: [Edge]

    func path(in rect: CGRect) -> Path {
        var path = Path()
        for edge in edges {
            var x: CGFloat {
                switch edge {
                case .top, .bottom, .leading: return rect.minX
                case .trailing: return rect.maxX - width
                }
            }

            var y: CGFloat {
                switch edge {
                case .top, .leading, .trailing: return rect.minY
                case .bottom: return rect.maxY - width
                }
            }

            var w: CGFloat {
                switch edge {
                case .top, .bottom: return rect.width
                case .leading, .trailing: return self.width
                }
            }

            var h: CGFloat {
                switch edge {
                case .top, .bottom: return self.width
                case .leading, .trailing: return rect.height
                }
            }
            path.addPath(Path(CGRect(x: x, y: y, width: w, height: h)))
        }
        return path
    }
}

Avec l'aide de cette simple extension:

extension View {
    func border(width: CGFloat, edges: [Edge], color: Color) -> some View {
        overlay(EdgeBorder(width: width, edges: edges).foregroundColor(color))
    }
}

Et voici la structure magique derrière ceci:

.border(width: 5, edges: [.top, .leading], color: .yellow)

2 commentaires

Le code ajoute un espacement qui occupe tout l'espace.

Placer le code "magique" (le bloc dans le body ) à l'intérieur d'une .overlay de ma forme fonctionne très bien. Merci pour ce code!

7
votes

Si quelqu'un a besoin d'ajouter simplement une bordure rapide à 1 (ou plus) côté à une vue (par exemple, le bord supérieur ou toute combinaison aléatoire d'arêtes), j'ai trouvé que cela fonctionne bien et est modifiable:

bord supérieur:

.overlay(Rectangle().frame(width: 1, height: nil, alignment: .leading).foregroundColor(Color.gray), alignment: .leading)

bord d'attaque:

.overlay(Rectangle().frame(width: nil, height: 1, alignment: .top).foregroundColor(Color.gray), alignment: .top)

etc.

Ajustez simplement la hauteur, la largeur et le bord pour produire la combinaison de bordures souhaitée.

0 commentaires

3
votes

Similaire à @smakus, si vous n'avez pas besoin de contrôler la couleur ou l'épaisseur, vous pouvez simplement le faire:

    .overlay(Divider(), alignment: .top)
    .overlay(Divider(), alignment: .bottom)

0 commentaires