2

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 ?

Nitesh
  • 1,564
  • 2
  • 26
  • 53
  • Try this with collectionView. For selected item change the background yellow style. If you have image like yellow background then it can be easily developed otherwise use uibezierpath. – dahiya_boy Jan 07 '17 at 04:38
  • How to use `UIBezierPath` in segments ? And the curve will go to the other selected segment too ? Even if I use `UIBezierPath` it will display curves on the selected segment only. – Nitesh Jan 07 '17 at 04:42
  • 3
    You don't use `UISegmentedController`. This needs to be a custom control. – rmaddy Jan 07 '17 at 04:46
  • You have to take one yellow view to design the curve below the segment control. When user select any option, you have points for that option and create curve like this http://stackoverflow.com/questions/13719143/draw-graph-curves-with-uibezierpath – dahiya_boy Jan 07 '17 at 04:49
  • @the_dahiya_boy Yes I understood that but by this that curve will only be seen on the selected segment and not on the segment beside the selected segment. Having curved part stretched to the next segment is my main concern. – Nitesh Jan 07 '17 at 04:52
  • Actually according to my method, your design is independent of segment so you can give give curve to besides part . – dahiya_boy Jan 07 '17 at 04:54
  • @the_dahiya_boy can you please explain/elaborate ? – Nitesh Jan 07 '17 at 04:57
  • Bro you have to take background view for the design and in this view you have to add segment control – dahiya_boy Jan 07 '17 at 05:06

1 Answers1

3

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!

MathewS
  • 2,267
  • 2
  • 20
  • 31