What if we want big navigation bar - with title and segmented control under it. How to create this? There is a trick. We can create view under navigation bar, put segmented control in it, make color of navigation bar and color of container view the same and remove botton line of navigation bar.
Steps of creation:
- Add View under Navigation Bar
- Put Segmented Control in this view
- Set Navigation Bar NOT Translucent
- Set background and tint colors for navigation bar
- Set background color for segmented control
- Remove bottom line of Navigation Bar
We will put the code in
didFinishLaunchingWithOptions method and use
UIAppearance API for
UISegmentedControl and for
UINavigationBar.
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions:
[UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// get segmented appearance object
let segmentedAppearance = UISegmentedControl.appearance()
// set background color for segmented
segmentedAppearance.tintColor = UIColor.white
// get nav bar appearance object
let navigationAppearance = UINavigationBar.appearance()
navigationAppearance.isTranslucent = false
// change color of navigation bar background
navigationAppearance.barTintColor = UIColor.red
// change color of navigation bar items (buttons)
navigationAppearance.tintColor = UIColor.white
// change color of navigation bar title
navigationAppearance.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.white];
// remove bottom line for navigation bar
navigationAppearance.shadowImage = UIImage()
navigationAppearance.setBackgroundImage(UIImage(), for: .default)
return true
}
Also do not forget to set color of container view
override func viewDidLoad() {
super.viewDidLoad()
segmentContainer.backgroundColor = UIColor.red
}
Adding container view under navigation bar
After add views and setup colors - one issue is still here. It is bottom line of Navigation bar.
Finally removing bottom line