Navigation Tab Bar in IOS | Swift tutorial

Different Customizing techniques for Navigation bar with storyboard and code

1) Custom NavigationTabBar by StoryBoard

1.1) Add navigation bar directly by storyboard and Add single navigation bar button
  • Set property Top bar : – Select the viewController and change the property of Tab bar to Trnaslucent Navigation Bar.
  • Add navigation title view:: – Add Navigation item in navigation bar. (Directly drag and drop)
  • Navigation bar Button : – Directly drag and drop the Bar Button Item in navigation bar. According to your requirement.
  • Bar button properties : – Set directly navigation bar button item image by storyboard and chnage the bar button tint color according to you.

Get Action action for these navigation bar:- directly create action methods for these navigation bar button item

1.2) Add multiple navigation bar button Directly by storyboard (Custom Navigation bar button item)
  • Follow the same 1.1 process for adding the navigaiton bar in UIViewController.
  • Now you can add multiple button with storyboard, directly drag and drop from Show The Object Libary tab.
1.3) Add Custom multiple navigation bar button Directly by storyboard (Add UIButton in navigation bar button item)

NOTE: – We Can add custom UIView in navigation bar item accroding to requirement

  • Add UIView In bar button item : – For adding the UIButton in navigation bar, First we need to add UIView in Navigation bar item. We can directly drag and drop add UIView in nav item.
  • Chnage UIView dimension : – We can change the UIView Dimension by change the view height and width.
  • Add Custom UIButton or custom design in UIView : – NOw we can directly add the UIBUtton or custom design accroding you requirement.
1.4) Add Navigation Prompt by Storyboard
  • Directly set the Navigation Promt by navigation bar Properties.
1.5) Add Custom title view in Navigation bar
  • Add Custom title view : We can directly drag and drop the UIView in title view and change the dimrntion by change the height and width in UIView properties.

2) Custom Navigation bar with Code in view Controller

2.2) Navigation Right Bar button
  • Add UIBarButtonItem : – Create UIBarButton item and assign them to rightBarButtonItem.
override func viewWillAppear(_ animated: Bool) {
        let addButton = UIBarButtonItem(title: NSLocalizedString("AddTitle", comment: ""),
                                        style: .plain,
                                        target: self,
                                        action: #selector(action(_:)))
        navigationItem.rightBarButtonItem = addButton
  • Add Image : – Create UIBarButtonItem With Image.
   let emailButton = UIBarButtonItem(image: UIImage()),
                                              style: .plain,
                                              target: self,
                                              action: #selector(action(_:)))
     navigationItem.rightBarButtonItem = emailButton
  • Add Custom View : – Create UIBarButtonItem with custom view
  let segmentedControl = UISegmentedControl(items: [
                "Item 1",
                "Item 2"
            segmentedControl.addTarget(self, action: #selector(action), for: .valueChanged)
            segmentedControl.frame = CGRect(x: 0, y: 0, width: 90, height: 30)
            segmentedControl.isMomentary = true
            let segmentBarItem = UIBarButtonItem(customView: segmentedControl)
            navigationItem.rightBarButtonItem = segmentBarItem
2.2) Custom title view

Assign View in navigationItem titleView. And set the frame for view.

        self.navigationItem.titleView = UIView()    
        /* Add segemented View Controller or
        custom view */
2.3) Navigation Prompt
        navigationItem.prompt = "Navigation prompts appear at the top."
2.4) Large Title View

Large title view is coming in iOS 11

 if #available(iOS 11.0, *) {
            self.navigationController?.navigationBar.prefersLargeTitles = true
2.5) Multiple UIBarButtonItem in navigation right bar

Add array of UIBarButtonItem in naviaitionItem property rightBarButtonItems

  let emailButton1 = UIBarButtonItem(image: UIImage(),
                                          style: .plain,
                                          target: self,
                                          action: #selector(action(_:)))
        let emailButton2 = UIBarButtonItem(image: UIImage(),
                                          style: .plain,
                                          target: self,
                                          action: #selector(action(_:)))
        let emailButton3 = UIBarButtonItem(image: UIImage(),
                                          style: .plain,
                                          target: self,
                                          action: #selector(action(_:)))
        navigationItem.rightBarButtonItems = [emailButton1, emailButton2, emailButton3]

Download the complete project here.

Related Post

Custom View by use of xib in swift Custom View by use of xib in swift We can create the custom and common view by the use of xib in swift 3.1 and XCode 8.3.2 . Custom views are common ...
Variables in Java Variables in Java A variable is something which is associated with a value can be changed. For example: int i=10; Here variable name “i” wh...
Loop Control Statement Loop control statements are used when a section of code may either be executed a fixed number of times. C gives you a choice of three types of loop st...
Create Gradient layer by the use of CAGradientLaye... Create Gradient layer by the use of CAGradientLayer Mostly developers are use the gradient (Combination of colors) colors images for make app more ef...
Dart Data type | Dart Tutorial Dart Data type Variables can store data of different types, and different data types can do different things. Dart supports the following data typ...
C Language – Introduction Why C? There are three important aspects of any language so as C has : The way it stores data, The way it operates on this data and How th...

Write A Comment