Case Study: How we built LUNSegmentedControl

Build custom UISegmentedControl

What do you do if there’s no standard element that would serve your needs just right? Exactly, you make a custom one! And that’s what we did.

If you are looking for a mix of iOS SegmentedControl and UISwitch that would allow you switching between states, but the default solution doesn’t let you implement your unique design, then this article is just for you! Keep on reading!

What motivated us to create LUNSegmentedControl?

Wireframe of iOS SegmentedControl and UISwitch

We came up with the idea to create LUNSegmentedControl as an attempt to customize UISegmentedControl and UISwitchControl.

The first one lets you switch between a few states, yet has a pretty trivial design, which might often be too standard for a custom app user interface. The second element works great. However, it’s primary function is switching between enabled and disabled states.

As you can see, there’s no default way to implement the possibility to switch between a number of different states and at the same time maintain the unique design of your app. Not having these options we decided to come up with our own thing!

What did we wanna get:

  • A control that would let user switch between a number of different states;
  • Interactive animation for transitions between states;
  • A possibility to insert any view instead of a segment;
  • An ability to customize colors and change states on selection;

How we built LUNSegmentedControl?

Step #1

To make our element customizable first of all we created a Data Source protocol, which allows to set the amount of segments, define a number of colors for a segment selection.

With its help one can also change text (either simple or with attributes) or views for both selected and unselected states of a segment:

Besides, we created settings which determine the way a control looks:

That being said, you can make a simple Segmented Control and not implement tons of methods. All you need is pass the number and title for each segment, everything else can be customized in settings.

Thanks to that LUNSegmentedControl is both highly customizable and easy to use.

Step #2

Create Segmented Control

Now let’s take a closer look at Transition Style and Shape Style.

Transition Style is responsible for transitions between the selected and unselected states of a segment. You can also create your own style, which we will talk about later on. Shape Style defines the selection form.

There’s another way to customize LUNSegmentedControl. It’s possible because it notifies its delegate about each and every change of its state:

There are two simple methods to notify about the start and end of changing a segment.

In addition, a delegate gets notified on the current selection location from the left corner of the control. This method is called periodically on changing. It can be used to smoothly alter content. Check out our test app example for an example of use.

Two following methods let you set transitions between selected and unselected states of a segment. This method is called once the customization according to the current Transition Style is finished.

That’s how you can change properties View and Selected View to get the transition you want. Keep in mind that Selected View lies on top of View.

In addition we added a shadow for a selected state. We used the following properties for the shadow customization:

Step #3

Once we’ve done all that we decided to add Liquid Shape Style. This change turned out to be one of the most interesting and compelling features of the control.

Liquid animation

In order to get the result we had to build a Bezier Path, which would gradually and smoothly change on dragging and at the same time would resemble the liquid shape.

We did lots of experimenting and playing around to get the desired outcome. You can check out whether we pulled it off 😉

Why use LUNSegmentedControl?

Choosing between a number of states

Instead of only being able to switch between two states you get the ability to choose between a number of different states. On top of that our control is highly customizable, so you can adjust it to the unique look of your app.

Smooth interactive transition interaction

LunApps has always been paying much attention to the app’s UX and especially compelling smooth animations. LUNSegmentedControl is not an exception. Just try it out for yourself and you’ll see what a big difference can the right animation make.

Customizable segments

One of the most important tasks for us was to make the control as customizable as possible. That’s why we decided to make it possible to put a View instead of a simple segment. This will let you integrate our control into your unique app design in no time!

Customizable colors and states transition

Our customization spree goes even further. LUNSegmentedControl offers color customization for each segment.

Besides, you can customize transition between states on segment selection. There is a pack of settings for that, so you can play around in order to get what you exactly want.

How can you use LUNSegmentedControl?

UISwitchControl Static animation

Just add UIView and change its class to LUNSegmentedControl. Then you can set its Data Source (You can also do it directly from the StoryBoard).

Implement the Data Source method to get the segment count:

Now implement one of the Data Source methods so you can set either a string, an attributed string or a view to be displayed in every segment.

Now the control is ready to go!

If necessary, you can set a string, an attributed string or a view for the selected state for each segment with the help of following Data Source methods:

After that from the StoryBoard you can set the following parameters in order to change the way your control looks:

In case you want to customize corner radius of the control.

That’s how you change the color of selection itself.

In addition, you can set a color (or a number of colors to get a gradient) for each segment: for both left and right bounces with the help of the following Data Source methods:

Conclusion

We did our best to show you the upsides of our LUNSegmentedControl solution and how to use it. We hope its functionality is gonna be useful for developers.

However, testing out is gazillion times better than reading about it! Go ahead and try it for yourself!

If you want to get smart custom design for your app, feel free to contact us. Our ideology is: everything in the app should be perfectly harmonious and maintain the unique design of your app – from buttons to complicated controls.

Comments

Vadim Getman

Vadim Getman