Let's look into segmented control now. It's a linear set of tappable segments, each of which functions as a mutually exclusive button that can display a different view is a segmented control to offer choices that are closely related, but mutually exclusive. In practice, it's useful filtering content or creating content subsections. Here's an example of a segmented control. You can filter between all friends and only online friends. Note that this app also shows you a number in each segment.

Also a bit unusual in this example is the bottom placing of the segmented control but it's totally fine. It was placed at the bottom because there are too many other elements on the top. segmented control consists of two or more segments. The segment width The same evenly placed across the occupied area. segments according to the guidelines can contain either icons or text. Avoid mixing text and images in the segmented control.

Meaning don't make one segment consists of an image and another one consists of a text. But it's actually okay to use both an icon and attacks if you use them in all segments of your segmented control. So it's important to keep consistency of course, don't mix styles across the segments. Make sure that each segment is easy to tap. To maintain a comfortable hit Return of 44 by 44 points for each segment. limit the number of segments on iPhone.

A segmented control should have five or fewer segments. As much as possible, make the size of each segments content consistent. Because all segments in a segmented control have equal width. It doesn't look good if the content feels some segments, but not others. So it might be okay to truncate the overly lengthy titles for example, you can change the colors of the segmented control to match your theme. And you probably already noticed that the current segment colors get inverted.

Another note for me, the segment control does not have to take the whole available with there's no point to make it overly big if not necessary. Like in this example, where we only have to short words. Position content appropriately in a custom segmented control. If you change the background appearance of segmented control, make sure contents didn't look as good doesn't appear misaligned.