CODEWITHSUNDEEP
iosswiftuisegmentedcontrol
Nitesh
Nitesh

Reputation: 2024

Design UISegmentControl

I'm having a segment control design like this enter image description here

How to design my segments so that the selected one should look like the "ALL" like in the image above. What I could think of to use different images on selection but if I do that then some part of the curve which is going in "Others" won't be visible. Any suggestion on designing UISegmentControl like this ?

Upvotes: 2

Views: 157

Answers (1)

MathewS
MathewS

Reputation: 2307

I have two suggestions:

  1. Find an alternative approach that avoids this. A lot of apps try to add delight by designing custom components and UI when actually it doesn't really add that much to the app. At worst you might frustrate people by using non-standard components that don't work the way they expect, or increase cognitive load as they're trying to use you're app.

  2. Go 100% with a custom subclass. Don't just settle for setting a static background image, but invest in creating a component that not only looks like this in a selected state, but also provides animations as people change the selected item.

This is going to be a fair amount of work, but would be something like this:

  • subclassing UISegmentedController -- it provides the base of the functionality that you're looking for which is good;
  • adding a new CAShapeLayer as to the controls background layer
  • figuring out a dynamic bezier curve that can update for all your states (will probably end up having control points for each segment) you might be able to do this by hand, but I'd have to use a tool like PaintCode to generate the bezier curve code, and Illustrator to make the initial curve
  • add listeners for event changes of the segment changing, and recalculate the curve control points as needed

The positive note of this is that the path property on CAShapeLayer is animatable, so when the segment changes and the curve updates the animation will probably be the easiest part!

Upvotes: 3

Related Questions