UISegmentedControl below UINavigationbar in iOS 7

ios uinavigationbar uisegmentedcontrol
yoeriboven picture yoeriboven · Feb 19, 2014 · Viewed 31k times · Source

How do I make a UISegmentedControl as a part of an UINavigationBar below it? Is it connected to the UINavigationBar or is it a complete separate view just added as a subview to the UINavigationController's view controller. Looks like it is part of the UINavigationBar since there is a shadow below the bar.

enter image description here

Answer

Leo Natan picture Leo Natan · Feb 24, 2014

It's a simple effect to accomplish.

First, place a segment in a toolbar. Place this toolbar right below the navigation bar. Set the delegate of the toolbar to your view controller, and return UIBarPositionTopAttached in positionForBar:. You can see in the store app, if you perform an interactive pop gesture, that the segment bar does not move the same as the navigation bar. That's because they are not the same bar.

enter image description here

Now to remove the hairline. The "hairline" is an UIImageView that is a subview of the navigation bar. You can find it and set it as hidden. This is what Apple does in their native calendar app, for example, as well as the store app. Remember to show it when the current view disappears. If you play a little with the Apple apps, you will see that the hairline is set to hidden on viewWillAppear: and set to shown in viewDidDisappear:.

To achieve the style of the search bar, just set the bar's searchBarStyle to UISearchBarStyleMinimal.

Related questions

Add segmented control to navigation bar and keep title with buttons

I want to add segmented control to the navigation bar but also keep the title and buttons, like in iOS 7 Appstore purchased section (example) I have tried adding segmented control as title view and then using prompt as the title, …

Read More
How to add the UISegmentedControl in UINavigationBar?

I have tried to add the UISegmentedControl to the bottom of UINavigationBar with title. But i cannot add it and I cannot add UISegmentedControl in the tableView.headerView,because i need the search bar in the tableView.headerView, so there …

Read More
UISegmentedControl in the Navigation Bar with the Back button

I'm adding a UISegmentedControl to the Navigation bar programatically where the titleView should be. But as Apple docs have mentioned under titleView, This property is ignored if leftBarButtonItem is not nil. But I want to have the back button as …

Read More