Xcode – Automatically aligning the content shape of a button with the opaque parts of its image?

After fiddling for a few days, I've come up with a solution! For each of my buttons, I did the following:

1. Add an overlay of the background in the scroll view with a geometry reader:

ScrollView(.horizontal) {
    Image("Background Image Name")
        .resizable()
        .scaledToFill()
        .overlay {
            GeometryReader { proxy in

            }
        }
}

Visual result:

2. Add the full-screen image of the button:

ScrollView(.horizontal) {
    Image("Background Image Name")
        .resizable()
        .scaledToFill()
        .overlay {
            GeometryReader { proxy in
                Image("Image Name")
                    .resizable()
                    .scaledToFill()
            }
        }
}

Visual result:

3. Add a rectangle behind the image, sizing it to line up with your image's visible section. I did this using padding and the geometry reader to measure the size of this rectangle in relation to the background image. It's important that you ONLY use multiplication (*) or division (/) when inputing hard numbers. Otherwise, the values you end up with won't be proportional to the screen size.

ScrollView(.horizontal) {
    Image("Background Image Name")
        .resizable()
        .scaledToFill()
        .overlay {
            GeometryReader { proxy in
                let w = proxy.size.width
                let h = proxy.size.height

                Rectangle()
                    .fill(.green)
                    .padding(.init(top: h / 1.8, leading: w / 1.42, bottom: h / 16, trailing: w / 8.70))

                Image("Image Name")
                    .resizable()
                    .scaledToFill()
            }
        }
}

Visual result:

4. If your button's content shape is a custom shape, then add it on top, using the same measurements of the rectangle to line it up. I added a stroke to my shape so I could see it, but adding a fill color works just as well.

ScrollView(.horizontal) {
    Image("Background Image Name")
        .resizable()
        .scaledToFill()
        .overlay {
            GeometryReader { proxy in
                let w = proxy.size.width
                let h = proxy.size.height

                let topOffset = h / 1.8
                let leadingOffest = w / 1.42
                let bottomOffset = h / 16
                let trailingOffset = w / 8.7

                Rectangle()
                    .fill(.green)
                    .padding(.init(top: topOffset, leading: leadingOffest, bottom: bottomOffset, trailing: trailingOffset))

                Image("Image Name")
                    .resizable()
                    .scaledToFill()

                CustomContentShape()
                    .stroke(.blue, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
                    .padding(EdgeInsets(top: topOffset, leading: leadingOffest, bottom: bottomOffset, trailing: trailingOffset))
            }
        }
}

Visual result:

You'll find that this shape will scale correctly regardless of screen size, just as the image does! I haven't tested landscape mode, as my app doesn't support it, but I did test two different types of iPad and iPhone in my canvas.

Now all that's left is:

5. Add your content shape to your button. Applying the padding to the shape and then trying to use it as a content shape for your button poses many problems, but you can get around this by moving the rectangle inside the button's label, applying the padding to it, overlaying and clipping your image to it, giving it a clear background, and applying your custom shape to the button. Like so:

ScrollView(.horizontal) {
    Image("Background Image Name")
        .resizable()
        .scaledToFill()
        .overlay {
            GeometryReader { proxy in
                let w = proxy.size.width
                let h = proxy.size.height

                let topOffset = h / 1.8
                let leadingOffest = w / 1.42
                let bottomOffset = h / 16
                let trailingOffset = w / 8.7
                            
                Button {
                    runFunction()
                } label: {
                    Rectangle()
                        .fill(.clear)
                        .padding(EdgeInsets(top: topOffset, leading: leadingOffest, bottom: bottomOffset, trailing: trailingOffset))
                        .overlay {
                            Image("Image Name")
                                .resizable()
                                .scaledToFill()
                                .clipped()
                        }
                }
                .contentShape(CustomContentShape())
            }
        }
}

Visual result:

I'm not sure how efficient computationally this is, but it is functional and that's all I could ask for.

It's important to note that while setting up the custom shape, I used paths in a function like so:

struct CustomContentShape: Shape {
    
    func path(in rect: CGRect) -> Path {
        var pencil = Path()
    
        pencil.move(to: CGPoint(x: rect.minX + (rect.maxX / 7), y: rect.maxY))
        pencil.addLine(to: CGPoint(x: rect.minX, y: rect.midY + (rect.maxX / 4)))
        pencil.addLine(to: CGPoint(x: rect.midX - (rect.maxX / 5), y: rect.minY + (rect.maxX / 3)))
        pencil.addLine(to: CGPoint(x: rect.minX + (rect.maxX / 8), y: rect.minY + (rect.maxX / 7)))
        pencil.addLine(to: CGPoint(x: rect.minX + (rect.maxX / 4.7), y: rect.minY))
        pencil.addLine(to: CGPoint(x: rect.midX, y: rect.minY + (rect.maxX / 8)))
        pencil.addLine(to: CGPoint(x: rect.midX, y: rect.midY + (rect.maxX / 5)))
        pencil.addLine(to: CGPoint(x: rect.maxX, y: rect.midY + (rect.maxX / 8)))
        pencil.addLine(to: CGPoint(x: rect.maxX, y: rect.midY + (rect.maxX / 2)))
        pencil.closeSubpath()
    
        return pencil
    }
}

All calculations using hard coded numbers have to be either multiplication or division. By using the min, mid, and max values of the shape's rectangle 'bounding box' for these calculations, you're able to ensure your shape will stay proportionate to its image. If you don't know what that means, look into using paths to make custom shapes in swift. I used this guide: https://medium.com/@amosgyamfi/using-calculated-geometric-properties-how-to-draw-complex-shapes-in-swiftui-7c6beccdbedf though it is important to note that the var** controlPoint: Double they have you add as part of the tutorial isn't actually used for anything. I just left it out of my code.

Finally, setting this up in a scroll view means that every time you change a value in your code, the view reloads, which snaps the scroll view back to its default position. If you're trying to edit something off-screen, this gets old FAST. To counter this, I usually use this method: SwiftUI how to prevent view to reload whole body However, this doesn't always seem to work when making complicated views for some reason I can't fathom, so another trick I used was using .scaleEffect(x: -1, y: 1) on every view in the body in order to flip it. This makes it so the shape's min, mid, and max values are now flipped, which gets confusing, but the values that you input will still be correct when you implement them unflipped into your app.

Good luck out there, fellow programmers!