본문 바로가기

iOS/SwiftUI

SwiftUI Bordering (inside, half, outside)

extension View {
    func insideBorder<C, S>(
        _ content: C,
        shape: S = Rectangle(),
        lineWidth: CGFloat = 1
    ) -> some View where C: ShapeStyle, S: InsettableShape {
        overlay(
            shape
                .strokeBorder(content, lineWidth: lineWidth)
        )
    }
    
    func halfBorder<C, S>(
        _ content: C,
        shape: S = Rectangle(),
        lineWidth: CGFloat = 1
    ) -> some View where C: ShapeStyle, S: InsettableShape {
        overlay(
            shape
                .stroke(content, lineWidth: lineWidth)
        )
    }
    
    func outsideBorder<C, S>(
        _ content: C,
        shape: S = Rectangle(),
        lineWidth: CGFloat = 1
    ) -> some View where C: ShapeStyle, S: InsettableShape {
        overlay(
            shape
                .stroke(content, lineWidth: lineWidth * 2)
                .overlay(self)
        )
    }
}
// Example
HStack {
    Spacer()

    Rectangle()
        .fill(.orange)
        .frame(width: 60, height: 60)

    Spacer()

    Rectangle()
        .fill(.orange)
        .frame(width: 60, height: 60)
        .insideBorder(Color.red.opacity(0.5), lineWidth: 10)

    Spacer()

    Rectangle()
        .fill(.orange)
        .frame(width: 60, height: 60)
        .halfBorder(Color.red.opacity(0.5), lineWidth: 10)

    Spacer()

    Rectangle()
        .fill(.orange)
        .frame(width: 60, height: 60)
        .outsideBorder(Color.red.opacity(0.5), lineWidth: 10)

    Spacer()
}