How To Create iOS Project With XIB File In Xcode

In some older version Xcode, it use xib file to help you to design iOS app user interface. This article will tell you how to use xib file to design iOS app user interface instead of storyboard.

1. Remove Main Storyboard Files In Xcode Project.

  1. Create a Xcode project either use swift or objective-c coding language.
    ios app use xib xcode project
  2. The Xcode project should use Single View App template.
  3. Press Command key and select both ViewController.swift and Main.storyboard file ( if you use objective-c language, then select ViewController.h, ViewController.m and Main.storyboard file).
  4. Use two finger to press the mouse key to popup a menu list, then click Delete menu item in the popup menu list to remove the ViewController and Main.storyboard files. When delete the two files, you can either click the Remove References or Move to Trash button in the remove confirm popup dialog.
    delete view controller and main storyboard file in xcode
  5. Click the Xcode project name in Xcode left project navigator panel, then click one of the target under TARGETS item in center editor window, then click General tab in top tab bar, then scroll down to the Deployment Info section and delete Main in the Main Interface drop down list text box, just let the text box value empty. This is because we had remove the Main.storyboard file in step 4.
    delete swift app main interface in xcode project

2. Create Cocoa Touch Class With XIB File.

  1. Click File —> New¬† —> File menu item in Xcode top menu bar.
    xcode file new file menu item
  2. Select Cocoa Touch Class template in iOS tab Source area, click Next button.
    xcode ios cocoa touch class template
  3. Input the cocoa touch class name, select it’s super class, and check the Also create XIB file checkbox, select the coding language that you use, then click Next button.
    create cocoa touch class and check also create xib file checkbox
  4. Select the xib file save location in the next popup dialog, then click Create button to create them.
  5. Now you can see the newly created UIViewController file and it’s related xib file in the Xcode project navigator panel.
    xcode cocoa touch class and it's xib file in xcode project
  6. Each cocoa touch class file has one related xib file, and the cocoa touch class is the owner of the xib file. You can see this relationship by click the RootViewController.xib file, then click the Show the Connections inspector tab icon in right inspector panel. You can see this in Referencing Outlets section.
    xib file's owner in xcode connection's inspector
READ :   How To Call Objective C Code From Swift Project

3. Design User Interface In XIB File.

Now you can design the iOS app’s user interface in the XIB file follow below steps.

  1. Click the xib file RootViewController.xib file.
  2. It will open a user interface editor in the Xcode center editor.
    design user interface in xib file
  3. You can add components in the user interface from the component library. You can click Xcode View —> Show Library menu item to popup the component library window. Then input button in the search text box, and drag and drop a button component into the xib screen view.

4. Create iOS App Root View Controller With XIB File In Scene Delegate Class.

Because this example is developed use Xcode 11.0 and iOS 13, so it use SceneDelegate class to play the role of AppDelegate class. The SceneDelegate class manage the user interface’s life cycle. You can read article How To Set Application Root View Controller Programmatically In Xcode 11 to learn more.

So you should write below code in the project’s SceneDelegate.swift’s func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) function.

You should take care of the code line let rootViewController = RootViewController(nibName: "RootViewController", bundle : nil), this line of code just tell you how to create the root view controller use specified xib file. The first parameter is the xib file name.

If you do not use Xcode 11.0 and iOS 13, you can add below code ( the function scene‘s body ) in the project’s AppDelegate class’s func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool function.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        
        print("Scene willConnectTo.")
        
        // Force convert UIScene type variable to UIWindowScene type variable.
        let windowScene:UIWindowScene = scene as! UIWindowScene;
        
        // Create the UIWindow variable use above UIWindowScene variable.
        self.window = UIWindow(windowScene: windowScene)
        
        // Create a ViewController object with provided xib file name.
        let rootViewController = RootViewController(nibName: "RootViewController", bundle : nil)
        
        // Set above root view controller object as the scene's window's root view controller.
        self.window!.rootViewController = rootViewController
                
        // Make this scene's window be visible.
        self.window!.makeKeyAndVisible()
        
        guard let _ = (scene as? UIWindowScene) else { return }
    }

When you run above example, you can get below picture, you can see the button in the screen.

READ :   How To Set Application Root View Controller Programmatically In Xcode 11

develop ios app with xib file instead of storyboard

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.