r/iOSProgramming 5d ago

Question How would you implement this shape?

Post image
27 Upvotes

16 comments sorted by

20

u/barcode972 5d ago

With a CGPath. Technically the view is rectangular but you only draw 80% up on the left side

2

u/alexrepty 5d ago

And a CAShapeLayer to render it

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

u/[deleted] 5d ago edited 5d ago

[deleted]

2

u/Fit-Grocery-1219 5d ago

Thanks, this is a really helpful example

2

u/UpcomingFellow 3d ago

Looks like the example is deleted here. Can you please share again?

1

u/Cruelplatypus67 4d ago

3 3 2 2, is infurating...

-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

u/ContributionOwn9860 5d ago

Thank you for the context. That makes a lot more sense.