Search This Blog

Tuesday, November 1, 2016

ios Swift. How to add SegmentedControl in NavigationBar and keep title

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:

  1.  Add View under Navigation Bar
  2.  Put Segmented Control in this view
  3.  Set Navigation Bar NOT Translucent
  4.  Set background and tint colors for navigation bar
  5.  Set background color for segmented control
  6.  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 



7 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Great post! Thank you so much. I really need these tips. The detailed explanation is really helpful. Seeing how you write was very inspiring.
    -Custom Website Design Company

    ReplyDelete
  3. Thank you for writing this blog and giving this vital and useful information. Best Custom Websites

    ReplyDelete
  4. Your article is unbelievable with precise knowledge. I can see a lot of research behind that and that is beyond my expectations.
    Create Your Own Website \

    ReplyDelete
  5. Good content. I was looking for this type of content. Saved my time for further search.
    You should always provide that type of content. I appreciate your determination to give the students a good title.Custom Designed Websites

    ReplyDelete
  6. Excellent website. This is the first time I've visited this blog, and it's fantastic. The main thing is that the content in this blog is written in a clear and intelligible manner.
    SEO Agency

    ReplyDelete