DanielC
DanielC

Reputation: 51

Is this iOS app using segmented control?

In this photo (AirBnB iOS app), where it saids Upcoming and Previous, what do you guys think how this is implemented? Do you guys think this is developed using segmented control or two different buttons reversing (on/off, off/on) each other? Is there an easy way(preferably using Swift) or a library to implement this feature in the app? Sorry if this is a very naive question. It's my 3rd day learning iOS development :Face With Tears Of Joy:

enter image description here

Upvotes: 0

Views: 901

Answers (2)

lchamp
lchamp

Reputation: 6612

There is no right answer since we don't have the source code.

However it could be one of those proposition :

  • Using a UISegmentedControl and customize it's appearance ;
  • Using two UIButton and change there appearance depending on which one is currently selected ;
  • Creating your own component : IBDesignable (that you'll be able to see directly while building your interface).

Since you are at your 3rd day learning iOS development, you might want to give a look at all the proposition above.

The IBDesignable solution could be the better one. Indeed, if you build it properly you would be able to reuse it easily on different screen size and in multiple apps. But, it might not be easy for you to create it in the first place.

Upvotes: 0

Ashraf Tawfeeq
Ashraf Tawfeeq

Reputation: 3029

Yes, it's probably a segmented control. You can having something like the following:

UIImage *segmentSelected =
[[UIImage imageNamed:@"segcontrol_sel.png"]
    resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];
UIImage *segmentUnselected =
[[UIImage imageNamed:@"segcontrol_uns.png"]
    resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];
UIImage *segmentSelectedUnselected =
[UIImage imageNamed:@"segcontrol_sel-uns.png"];
UIImage *segUnselectedSelected =
[UIImage imageNamed:@"segcontrol_uns-sel.png"];
UIImage *segmentUnselectedUnselected =
[UIImage imageNamed:@"segcontrol_uns-uns.png"];

[[UISegmentedControl appearance] setBackgroundImage:segmentUnselected
forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setBackgroundImage:segmentSelected
forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];

[[UISegmentedControl appearance] setDividerImage:segmentUnselectedUnselected
forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setDividerImage:segmentSelectedUnselected
forLeftSegmentState:UIControlStateSelected
rightSegmentState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance]
setDividerImage:segUnselectedSelected
forLeftSegmentState:UIControlStateNormal
rightSegmentState:UIControlStateSelected
barMetrics:UIBarMetricsDefault];

Quoted from RayWenderlich: http://www.raywenderlich.com/21703/user-interface-customization-in-ios-6

Upvotes: 1

Related Questions