Make two buttons acting as one SwiftUI - ios

Question

I want to make two buttons acting as one, or have a single button but with the touch area only the zone that is red like in the picture. A normal button would also have on the touch area that white space on which I put the x-es, which I don't want.
struct ContentView: View {
var body: some View {
HStack(spacing: 0) {
Spacer()
Button(action: {}) {
Text("This is button 1")
.frame(width: 100, height: 200)
.background(Color.red)
}
Button(action: {}) {
Text("This is button 2")
.frame(height: 100)
.background(Color.red)
}
Spacer()
}
}
}

Answer 1

Here's one way it could be done. Have a single button with two overlaid white rectangles. Only the red area can be clicked:
struct ContentView: View {
var body: some View {
HStack(spacing: 0) {
Spacer()
Button(action: {}) {
Text("This is one big button")
.frame(width: 200, height: 200)
.background(Color.red)
}
.overlay(
HStack {
Spacer()
VStack {
Rectangle()
.frame(width: 100, height: 50)
.foregroundColor(.white)
Spacer()
Rectangle()
.frame(width: 100, height: 50)
.foregroundColor(.white)
}
}
)
Spacer()
}
}
}
Solution using a custom Shape
Another way to do it would be to create a custom Shape for the Button, and then use it to draw and set its contentShape():
struct ButtonShape: Shape {
func path(in rect: CGRect) -> Path {
var path = Path()
let width = rect.width
let height = rect.height
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: width/2, y: 0))
path.addLine(to: CGPoint(x: width/2, y: height/4))
path.addLine(to: CGPoint(x: width, y: height/4))
path.addLine(to: CGPoint(x: width, y: 3 * height/4))
path.addLine(to: CGPoint(x: width/2, y: 3 * height/4))
path.addLine(to: CGPoint(x: width/2, y: height))
path.addLine(to: CGPoint(x: 0, y: height))
path.closeSubpath()
return path
}
}
struct ContentView: View {
var body: some View {
HStack(spacing: 0) {
Spacer()
Button(action: {}) {
Color.red
.clipShape(ButtonShape())
.overlay(
Text("This is one big button")
)
}
.contentShape(ButtonShape())
.frame(width: 200, height: 200)
Spacer()
}
}
}
This solution overall works better because the clipped areas aren't drawn making it easier to put this button on a colored background for instance.