Navigation Tab Bar in IOS | Swift tutorial

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 
    1
    Top bar

     : – Select the viewController and change the property of 

    1
    Tab bar

     to 

    1
    Trnaslucent Navigation Bar

    .

  • Add navigation title view:: – Add 
    1
    Navigation item

     in navigation bar. (Directly drag and drop)

  • Navigation bar Button : – Directly drag and drop the 
    1
    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 
    1
    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 

1
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 
    1
    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 
    1
    UIBarButtonItem

     : – Create UIBarButton item and assign them to 

    1
    rightBarButtonItem

    .


1
2
3
4
5
6
7
8
<span class="hljs-keyword">override</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">viewWillAppear</span><span class="hljs-params">(<span class="hljs-number">_</span> animated: Bool)</span></span> {
        <span class="hljs-keyword">super</span>.viewWillAppear(animated)
        <span class="hljs-keyword">let</span> addButton = <span class="hljs-type">UIBarButtonItem</span>(title: <span class="hljs-type">NSLocalizedString</span>(<span class="hljs-string">"AddTitle"</span>, comment: <span class="hljs-string">""</span>),
                                        style: .plain,
                                        target: <span class="hljs-keyword">self</span>,
                                        action: #selector(action(<span class="hljs-number">_</span>:)))
        navigationItem.rightBarButtonItem = addButton
    }
  • Add Image : – Create 
    1
    UIBarButtonItem

     With Image.


1
2
3
4
5
   <span class="hljs-keyword">let</span> emailButton = <span class="hljs-type">UIBarButtonItem</span>(image: <span class="hljs-type">UIImage</span>()),
                                              style: .plain,
                                              target: <span class="hljs-keyword">self</span>,
                                              action: #selector(action(<span class="hljs-number">_</span>:)))
     navigationItem.rightBarButtonItem = emailButton
  • Add Custom View : – Create 
    1
    UIBarButtonItem

     with custom view


1
2
3
4
5
6
7
8
9
  <span class="hljs-keyword">let</span> segmentedControl = <span class="hljs-type">UISegmentedControl</span>(items: [
                <span class="hljs-string">"Item 1"</span>,
                <span class="hljs-string">"Item 2"</span>
                ])
            segmentedControl.addTarget(<span class="hljs-keyword">self</span>, action: #selector(action), <span class="hljs-keyword">for</span>: .valueChanged)
            segmentedControl.frame = <span class="hljs-type">CGRect</span>(x: <span class="hljs-number">0</span>, y: <span class="hljs-number">0</span>, width: <span class="hljs-number">90</span>, height: <span class="hljs-number">30</span>)
            segmentedControl.isMomentary = <span class="hljs-literal">true</span>
            <span class="hljs-keyword">let</span> segmentBarItem = <span class="hljs-type">UIBarButtonItem</span>(customView: segmentedControl)
            navigationItem.rightBarButtonItem = segmentBarItem
2.2) Custom title view

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


1
2
3
        <span class="hljs-keyword">self</span>.navigationItem.titleView = <span class="hljs-type">UIView</span>()    
        <span class="hljs-comment">/* Add segemented View Controller or
        custom view */</span>
2.3) Navigation Prompt

1
        navigationItem.prompt = <span class="hljs-string">"Navigation prompts appear at the top."</span>
2.4) Large Title View

Large title view is coming in iOS 11


1
2
3
 <span class="hljs-keyword">if</span> #available(iOS <span class="hljs-number">11.0</span>, *) {
            <span class="hljs-keyword">self</span>.navigationController?.navigationBar.prefersLargeTitles = <span class="hljs-literal">true</span>
        }
2.5) Multiple UIBarButtonItem in navigation right bar

Add array of UIBarButtonItem in 

1
naviaitionItem

 property 

1
rightBarButtonItems

1
2
3
4
5
6
7
8
9
10
11
12
13
  <span class="hljs-keyword">let</span> emailButton1 = <span class="hljs-type">UIBarButtonItem</span>(image: <span class="hljs-type">UIImage</span>(),
                                          style: .plain,
                                          target: <span class="hljs-keyword">self</span>,
                                          action: #selector(action(<span class="hljs-number">_</span>:)))
        <span class="hljs-keyword">let</span> emailButton2 = <span class="hljs-type">UIBarButtonItem</span>(image: <span class="hljs-type">UIImage</span>(),
                                          style: .plain,
                                          target: <span class="hljs-keyword">self</span>,
                                          action: #selector(action(<span class="hljs-number">_</span>:)))
        <span class="hljs-keyword">let</span> emailButton3 = <span class="hljs-type">UIBarButtonItem</span>(image: <span class="hljs-type">UIImage</span>(),
                                          style: .plain,
                                          target: <span class="hljs-keyword">self</span>,
                                          action: #selector(action(<span class="hljs-number">_</span>:)))
        navigationItem.rightBarButtonItems = [emailButton1, emailButton2, emailButton3]




Download the complete project here.

Related Post

Data Type And Storage And Keywords To store data inside the computer we need to first identify the type of data elements we need in our program. There are several different types of dat...
Drag and Drop Collection View cell in IOS 11 &... Drag and Drop Collection View cell in IOS 11 & swift 4 In this tutorial we are explain how to drag and drop collection view cell in two collectio...
Comments in C Comments in C Comments in C language are used to provide information about lines of code. It is widely used for documenting code. There are 2 types o...
Switch Case Statement Switch Case Statement The switch statement is a multi-way branch statement. It provides an easy way to dispatch execution to different parts of c...
Firebase Push notification | Swift tutorial Push Notification by firebase in IOS.For Firebase Push notification we need to have paid apple developer account. You need to Enroll into the Apple D...
Setting Class Path for Java Setting Class Path for Java In this tutorial we are study how we can set the java JDK class path. Java is an open source software, it is is freely...

Leave a Reply

Your email address will not be published. Required fields are marked *