How To Create iOS Project With XIB File In Xcode

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

1. Remove Main Storyboard Files In Xcode Project.

1. Create an Xcode project either use swift or objective-c coding language.
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.
5. Click the Xcode project name in Xcode left project navigator panel, then click one of the targets under TARGETS item in the center editor window, then click General tab in the 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 to remove the Main.storyboard file in step 4.

2. Create Cocoa Touch Class With XIB File.

1. Click File —> New  —> File menu item in Xcode top menu bar.
2. Select Cocoa Touch Class template in the iOS tab Source area, click Next button.
3. Input the cocoa touch class name, select it’s superclass, and check the Also create XIB file checkbox, select the coding language that you use ( Swift or Objective-C), then click Next button.
4. Select the xib file saved 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.
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 clicking the RootViewController.xib file, then click the Show the Connections inspector tab icon in the right inspector panel. You can see this in Referencing Outlets section.

3. Design User Interface In XIB File.

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

1. Click the xib file RootViewController.xib file.
2. It will open a user interface editor in the Xcode center editor.
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 the keyword 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.

1. Because this example is developed using Xcode 11.0 and iOS 13, so it uses SceneDelegate class to play the role of AppDelegate class.
2. The SceneDelegate class manages the user interface’s life cycle. You can read the article How To Set Application Root View Controller Programmatically In Xcode 11 to learn more.
3. 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.
4. You should take care of the code line let rootViewController = RootViewController(nibName: "RootViewController", bundle : nil), this line of code just tells you how to create the root view controller use a specified xib file. The first parameter is the xib file name.
5. 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 }
       }

6. When you run the above example, you can see the button in the screen center.