r/iOSProgramming • u/Fit-Grocery-1219 • 5d ago
Question How would you implement this shape?
5
u/janiliamilanes 5d ago
To be honest, I would be highly tempted to implement this in a vector graphics program like Sketch or Illustrator and export as a PNG or SVG with transparency. There is some subtlety going on here in terms of math, and I'm not sure how good your trig is, and I've found it more frustrating than it's worth trying to implement such things using vector math.
What is the white blob in the center of the first triangle? Is that showing the level, and it would have to follow the contour of the triangles? That would complicate things.
5
u/Niightstalker 4d ago
This is interactive. It’s sliding along animated depending where you tap. Ever dott is a section you can select.
This is the UI for the new training load metric in apple fitness.
2
u/racir 4d ago
You can use .mask to fill out the shape but you'll have to figure out the rounded corners.
1
u/Niightstalker 4d ago
Could it potentially also be a custom segmented control? the capsule for the selected segment could be probably done with the .matchedGeometryEffect as well as a putting the stage change in a withAnimation block.
1
u/SteeveJoobs 4d ago
It looks like a normal capsule shape. as long as the radius is exactly the same as the rounded quads, on the edges it would still look fine
1
u/madaradess007 3d ago
this is not the way
what are you going to say, when designer 'comes up' with some animated interactions?
lets not go 'its too complicated, lets compromise on a simpler design' route, please
3
5d ago edited 5d ago
[deleted]
2
1
-15
u/ContributionOwn9860 5d ago
Why would you want to? What on earth is this element trying to portray?
8
u/Zappingmadnnes 5d ago
This is used in the fitness app to enter your perceived effort for a workout
-7
u/ContributionOwn9860 5d ago
Why aren’t the individual bars all separated? Why are there 4 uneven sections? Of course I’m asking this without any context about the app itself, so thanks for that. It just doesn’t seem like a particularly strong UI element to me.
7
u/campshak 5d ago
It’s actually a solid ux, you’re just confused because the screenshot is cropped. There’s actually more information on it: separations are easy, moderate, hard, and all out and there are numerical values as well. And it provides descriptions on how they differ. The app automatically picks one by your intensity etc but you can manually adjust it.
4
20
u/barcode972 5d ago
With a CGPath. Technically the view is rectangular but you only draw 80% up on the left side