How to make ruler in SwiftUI - swiftui

Question

I'm trying to make such ruler in SwiftUI https://imgur.com/a/M89GXsj. I wonder is it possible to do it with only one ForEach? Is it right implementation?
struct Ruler: View {
var body: some View {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 0) {
ForEach(1...20, id: \.self) { num in
HStack(spacing: 40) {
HStack(alignment: .top, spacing: 3) {
Divider()
.frame(width: 1.5, height: 40)
.background(Color.white)
Text("\(num)")
.foregroundColor(Color.white)
.font(.system(size: 12, weight: .bold))
}
ForEach(1...3, id: \.self) { _ in
Divider()
.frame(width: 1.5, height: 15)
.background(Color.white)
.padding(.bottom, -14)
}
Spacer()
}
}
}
.frame(height: 40)
.background(Color.black)
}
}
struct Ruler_Previews: PreviewProvider {
static var previews: some View {
Ruler()
.previewLayout(.sizeThatFits)
}}

Answer 1

My recommendation would be to have each portion of the ruler be a Shape with an associated enum to represent the tick marks needed. Each iteration of the shape would draw exactly 1 section of the ruler. By doing this, you gain more control and more precision as to how to draw it, with 1 ForEach and simple repeatability. The shape could be defined as:
struct Unit: Shape {
let num: Int
let ticks: [Tick]
func path(in rect: CGRect) -> Path {
let distance = rect.width / CGFloat(ticks.count)
var path = Path()
var x = rect.minX
for tick in ticks {
switch tick {
case .major:
path.move(to: CGPoint(x: x, y: rect.minY))
path.addLine(to: CGPoint(x: x, y: rect.maxY))
case .mid:
path.move(to: CGPoint(x: x, y: rect.maxY))
path.addLine(to: CGPoint(x: x, y: rect.maxY - 16))
case .minor:
path.move(to: CGPoint(x: x, y: rect.maxY))
path.addLine(to: CGPoint(x: x, y: rect.maxY - 8))
}
x += distance
print("tick")
}
return path
}
}
enum Tick {
case major, mid, minor
}
Then your view would simplify to this:
struct Ruler: View {
let ticks: [Tick] = [.major, .minor, .mid, .minor, .mid, .minor, .mid, .minor]
var body: some View {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 0) {
ForEach(1...20, id: \.self) { num in
Unit(num: num, ticks: ticks)
.stroke(.white, lineWidth: 2)
.frame(width: 100)
.overlay(
Text("\(num)")
.padding(.trailing, 2)
.foregroundColor(.white),
alignment: .topTrailing
)
}
}
.frame(height: 40)
.padding(.top, 2)
.padding(.bottom, 1)
.background(Color.black)
}
.padding()
}
}