Pages

How to design the Navigation Controller programmatically without using Storyboard in Swift

Designing User Interface without using Storyboard:


       As you know that UINavigationControllers are the workhorse of organizing the ViewControllers. UINavigationControllers are stack-based.The newest viewController that has been pushed on the screen is the one to visible & the child view controller in terms of hierarchy.

        Designing user Interface using predefined Library objects is a boring task & won't let us learn anything about core part about programming & how these components works internally. So here we will designing the user Interface Programmatically. When I say word something like programmatically I means to say that drawing everything without using Storyboard that is created for us by default when you create your project. 


1. Well as usual create a new Xcode project with single view application & select the language as SWIFT. As I told you we are not going to use STORYBOARD,  so go ahead & delete the file named ViewController.Swift & let us now disable the storyboard.

2. Expand the supporting files folder from the left hand side of your Xcode window & you will see a ".plist" extension file. Now click and open it. Now delete the row with key "Main storyboard file base name" & delete this entry by pressing DELETE key of your keyboard as shown in the image.




3. Now Create a new Cocoa Touch Class file call it ViewController & make it a subclass of UIViewController. Also check the XIB file check box, & follow the steps to create new file. Now open the ViewController.swift file & add the following sort of code to it...

convenience override init() {      //Calling the designated initializer of same class        
        self.init(nibName: "ViewController", bundle: nil)
        //initializing the view Controller form specified NIB file
    }

       Here the code is the code that I have explained in my previous post "Presenting a View Controller Programmatically in User Interface". Please check my mentioned post if you are concern about it. And View Controller's XIB/NIB file looks like:


      In the XIB/NIB file of the ViewController.Swift file there is no any complex user interface but only a single button that I dragged from object Library. Go ahead & do the same as above Image shows so that you view controller window also looks like this Image as well.

3. Create a new Cocoa Touch Class file call it NavigationViewController & make it a subclass of UIViewController. Also check the XIB file check box, & follow the steps to create new file. Now open the NavigationViewController.swift file & add the following sort of code to it...

convenience override init() {      //Calling the designated initializer of same class        
        self.init(nibName: "NavigationViewController", bundle: nil)
        ////initializing the view Controller form specified NIB file
    }
    
   Again the code here is initializing the UserInterface view form the XIB/NIB file of NavigationViewController.swift from a designated Initializer (init() here). This view will appear when user Tap the "Present View" button. Open the NIB/NIB file of NavigationViewController.Swift file & mimic the user interface by changing the background color of the view to "yellow" as shown in below Image:




4. Now let us connect an action to the button"Present View". Open the ViewController.Swift file & add the following bit of code & connect the action to button of the XIB/NIB file of user interface:


@IBAction func Presenting(sender: AnyObject) {        
        var navigationViewController = NavigationViewController()
                //creating onject of NasvigationViewController class        
        self.navigationController?.pushViewController(navigationViewController, animated: true)
                //pushing the new view controller(NavigationViewControler) to view Hierarchy
    }

5. Open the AppDelegate.Swift file & add the following code in the "application:applicationDidFinishLaunchingWithOptions:" method:


window = UIWindow(frame: UIScreen.mainScreen().bounds)
                //setting the initial screen bounds of the view
        self.viewController = ViewController()
                //creating object of ViewController class
        var navigationController = UINavigationController(rootViewController: viewController!)
                //creating an instance of UINavigationController & setting the rootViewController
        window?.rootViewController = navigationController
                //setting the initial VieController as UINavigationController

        window?.makeKeyAndVisible()

   Your AppDelegate file somewhat looks like:



6. Well guys go ahead a Build and Run your app & in output the very first View that will appear is UINavigationController present the ViewController.XIB view. And when you click on "Present View" button you will be gifted with Yellowish View of the NavigationViewController.XIB file.


    Here in the above Image the left hand side Image is showing the Initial view when your app launches & the right hand side shows the view when you tap the "Present View" button.

Well guys I hope you enjoyed this app. And as usual go ahead & try & practice it on your own.




No comments:

Post a Comment