I’m struggling on creating two vertical bars with lines and dash box. I would like to receive some suggestion on how to do this.
This is what I’m aiming to do:
Currently this is my code.
import SwiftUI
struct LoadManagementItemBarView: View {
let isLeft: Bool
let userWeight: Float
@State var progress: CGFloat
var body: some View {
ZStack(alignment: .bottom) {
Rectangle()
.fill(Color.white)
.frame(width: 32, height: 490)
Rectangle()
.fill(Color.positiveStappone)
.frame(width: 32, height: progress)
VStack {
HStack(alignment: .center) {
if isLeft {
Text("(String(format: "%.0f", userWeight)) kg")
}
Rectangle()
.frame(width: 38, height: 1)
if !isLeft {
Text("(String(format: "%.0f", userWeight)) kg")
}
}
.offset(y: CGFloat(userWeight))
Rectangle()
.strokeBorder(style: StrokeStyle(lineWidth: 1, dash: [10]))
.frame(width: 32, height: 188)
.offset(x: isLeft ? 24 : -23, y: -76)
HStack(alignment: .center) {
if isLeft {
Text(" 0 kg")
}
Rectangle()
.frame(width: 38, height: 1)
if !isLeft {
Text(" 0 kg")
}
}
.offset(y: 11)
}
.offset(x: isLeft ? -24 : 23)
}
.shadow(color: .gray, radius: 1, x: 1, y: 1)
}
}
struct LoadManagementItemBarView_Previews: PreviewProvider {
static var previews: some View {
LoadManagementItemBarView(
isLeft: true,
userWeight: 76,
progress: 350
)
}
}
I tried to use ZStack to fit all of the UI components but I’m struggling with the offset of these component, example to modify it’s y offset by just adding a max KG to the property created.
I want it to look like in the image below.
2
Answers
}
I would suggest you split the background bar and the marker (the dashed box) into two separate View implementations, then apply the marker as an overlay. Something like:
For iOS 15+ you probably want to use the new version of the
.overlay
modifier, the version I’ve used here has been deprecated.For the bar scaling, two possible ways to approach would be: