top of page

Swift 4: Using .xib instead of .storyboard Files in Xcode Project


When you are working on iOS projects, Storyboard files can guide you the flow and the page transitions in a visual way. However, when we are dealing with big projects, our teammates may not need to know all the flow and it will get confused. Also, if the storyboard encountered some unknown errors, it is extremely difficult to find the bug, especially when we are using Source Tree or simply Git.

So today we are going to disconnect the storyboard component and use a traditional way to build our layout.

1) We create a Single View App project with Swift

2) Disconnect the Project with Main.storyboard

Go to the <your-project-name> file using the Navigator on the left side of Xcode. Click "General", in the Deployment Info, delete the words in Main Interface, in order to disconnect between the project and Main.storyboard.

3) Code Time !

In order to make a new window by our own, go to "AppDelegate.swift", We are going to add the new window after the Launch Screen is finished loading. Add the following Code to inside the function application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool

4) Create our own xib file

Right Click on the "ViewController.swift", "New File" -> "View", It is not necessary, but a good practice to name the .xib file the same as your controller, and keep the .swift and .xib file together in the Navigator.

5) Connect your new .xib to .swift file

Go to "ViewController.xib", press the Identity Inspector "Custom Class" -> "Class", type the name of the ViewCotroller you have just created. We are almost done !

6) Connect between File's Owner and View

Even the File's Owner and the View are in the same file, the File's Owner does not know which view it should select. Therefore we need to connect them in the Connections Inspector.

We are all done. Have Fun!


Recent Posts

See All
Gerenal: Interesting Links

UICollectionView Custom Layout Tutorial: Pinterest https://www.raywenderlich.com/164608/uicollectionview-custom-layout-tutorial-pinterest-2

 
 
 

Comments


  • Facebook - White Circle
  • Instagram - White Circle
  • LinkedIn - White Circle

© 2017 by Johnny. Make it just for fun.

bottom of page