Designing your own button in SwiftUI - swift

Question

I'm trying to draw the following picture with each circle segment consisting of 3 buttons which can be clicked.
I've copied code from this forum, but when I try to use it, I get an error message and the code will not compile. Tried various versions (latest one printed), but none work. What am I doing wrong? Also, will the integers i and j be passed on to the call of the class CustomShapeButton?
import SwiftUI
import UIKit
struct ContentView: View {
static let segmentCount = 4
static let circleCount = 4
var i: Int = 0
var j: Int = 0
var NewButtons: CustomShapeButton
var body: some View {
ZStack {
ForEach(1..<ContentView.circleCount){ j in
ForEach(1..<ContentView.segmentCount){ i in
NewButtons = CustomShapeButton()
}
}
}
}
}
class CustomShapeButton: UIButton {
lazy var pantsShapeBezierPath: UIBezierPath = {
// Crate new path
let path = UIBezierPath()
var r = CGFloat(75.0)
r = CGFloat(50.0 + (CGFloat(j) - 1.0) * 50.0)
let center_x = CGFloat(200.0)
let center_y = CGFloat(200.0)
var arc_start = CGFloat(45.0 * CGFloat(Double.pi) / 180.0)
arc_start = CGFloat((45.0 + (CGFloat(i) - 1.0) * 90.0)) * CGFloat(Double.pi) / 180.0
let arc_length = CGFloat(90.0 * CGFloat(Double.pi) / 180.0)
let arc_width = CGFloat(45.0)
let line0Target_x = center_x + r * CGFloat(cos(Double(arc_start)))
let line0Target_y = center_y + r * CGFloat(sin(Double(arc_start)))
let line1Target_x = center_x + (r + arc_width) * CGFloat(cos(Double(arc_start + arc_length)))
let line1Target_y = center_x + (r + arc_width) * CGFloat(sin(Double(arc_start + arc_length)))
path.move(to: CGPoint(x: line0Target_x, y: line0Target_y))
path.addArc(center: CGPoint(x: center_x, y: center_y), radius: r, startAngle: Angle(radians: Double(arc_start)), endAngle: Angle(radians: Double(arc_start + arc_length)), clockwise: false)
path.addLine(to: CGPoint(x: line1Target_x, y: line1Target_y))
path.addArc(center: CGPoint(x: center_x, y: center_y), radius: (r + arc_width), startAngle: Angle(radians: Double(arc_start + arc_length)), endAngle: Angle(radians: Double(arc_start)), clockwise: true)
path.addLine(to: CGPoint(x: line0Target_x, y: line0Target_y))
path.close()
return path
}()
override func draw(_ rect: CGRect) {
super.draw(rect)
// Set shape filling color
UIColor.red.setFill()
// Fill the shape
pantsShapeBezierPath.fill()
}
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
// Handling touch events
if (pantsShapeBezierPath.contains(point)) {
return self
} else {
return nil
}
}

Answer 1

Here you go. You just need to implement the button style first then use it. This result is 9 buttons. I would suggest having 9 functions for each button and not using the same one.
struct CustomShapeButtonStyle: ButtonStyle {
var j: Int
var i: Int
var fillColor: Color
func makeBody(configuration: Self.Configuration) -> some View {
GeometryReader { geometry in
Path { path in
var r = CGFloat(75.0)
r = CGFloat(50.0 + (CGFloat(self.j) - 1.0) * 50.0)
let center_x = CGFloat(200.0)
let center_y = CGFloat(200.0)
var arc_start = CGFloat(45.0 * CGFloat(Double.pi) / 180.0)
arc_start = CGFloat((45.0 + (CGFloat(self.i) - 1.0) * 90.0)) * CGFloat(Double.pi) / 180.0
let arc_length = CGFloat(90.0 * CGFloat(Double.pi) / 180.0)
let arc_width = CGFloat(45.0)
let line0Target_x = center_x + r * CGFloat(cos(Double(arc_start)))
let line0Target_y = center_y + r * CGFloat(sin(Double(arc_start)))
let line1Target_x = center_x + (r + arc_width) * CGFloat(cos(Double(arc_start + arc_length)))
let line1Target_y = center_x + (r + arc_width) * CGFloat(sin(Double(arc_start + arc_length)))
path.move(to: CGPoint(x: line0Target_x, y: line0Target_y))
path.addArc(center: CGPoint(x: center_x, y: center_y), radius: r, startAngle: Angle(radians: Double(arc_start)), endAngle: Angle(radians: Double(arc_start + arc_length)), clockwise: false)
path.addLine(to: CGPoint(x: line1Target_x, y: line1Target_y))
path.addArc(center: CGPoint(x: center_x, y: center_y), radius: (r + arc_width), startAngle: Angle(radians: Double(arc_start + arc_length)), endAngle: Angle(radians: Double(arc_start)), clockwise: true)
path.addLine(to: CGPoint(x: line0Target_x, y: line0Target_y))
path.closeSubpath()
}.fill(self.fillColor)
}
}
}
struct ContentView: View {
static let segmentCount = 4
static let circleCount = 4
var body: some View {
ZStack {
ForEach(1..<Self.circleCount) { j in
ForEach(1..<Self.segmentCount) { i in
Button(action: {
print("I was clicked")
}) {
Text("") // Just a placeholder
}.buttonStyle(CustomShapeButtonStyle(j: j, i: i, fillColor: Color(red: 177/255, green: 152/255, blue: 177/255)))
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

Answer 2

Your code is mixing both UIKit and SwiftUI in an improper way. You can't do this in a body statement:
NewButtons = CustomShapeButton()
Everything inside of the body function has to be a View. This is an assignment statement.
Next, CustomShapeButton is a UIButton subclass. You can't use that here, either. If you want to use this random internet code (which I do not suggest), you will have to wrap it inside of a UIViewRepresentable. Instead, consider following Apple's guide on how to create custom path-based Views.
https://developer.apple.com/tutorials/swiftui/drawing-paths-and-shapes
Once you can draw the shapes that you want, wrap it in a Button:
Button(action: { /* do your action */ }) {
CircularCutoutShape()
}