Skip to main content

Storyboard vs XIB vs Custom UI Code

By
Have you ever felt difficulty while choosing between Storyboard and XIB or even going for Custom code? Let’s make it easier from this short article.

As we know, Storyboard introduced in iOS 5 and it consists of several ViewControllers, whereas XIB (previously NIB) files can consist of only one controller scene. Even custom codes can do all UI actions of such as positioning or animations..etc without help of any GUI tools. Further, we may not need to stick with only one of above options. We can have one or combinations of three as per the requirement.

Pros of Storyboard:

  • As its name says, we can visualize entire scene in a single shot.
  • On the Storyboard file, we can configure the flow between pages directly by using segue. Segues takes care most of UI configurations.
  • Reduces boilerplate code needed to pop, push, present and dismiss view controllers.
When storyboard makes sense?
  • A set of views say for example: Authentications (Login/Registration page), Wizards like welcome scene or tutorial for an app etc
  • Master details set of views for example: Profile lists and profile details.
  • Prototyping table view with multiple static table view cells. Since it can be clubbed inside one parent table view.

Cons of Storyboard:

  • Complicating team environment: when multiple developers work on the same storyboard file at the same time, source control conflicts are inevitable.
  • We also observed in larger storyboard file, it takes time while opening and performing certain changes.

Pros of XIB:

  • Breaks a view controllers view into separate modules. So that each component is easy to develop, debug and test.
  • Lazily loaded. So they don’t occupy memory unless needed.
So, when XIB makes sense?
  • Reusable view template.
  • Reusable table view cells.

Cons of XIB:

  • Views with dynamic content, where layout changes depending on the content.
  • Views that are not easily design able in Interface Builder.
  • Views that has complicated transitions and can be simplified with Storyboarding.

Taking time to write Custom code for UI ?

  • When we need render dynamic (loaded based on the content) UI which cannot be achieved from Storyboards or XIB.
  • Customizing views such as Rounded corners, Shadows or for dynamic frame sizes.
  • Developer will have clear idea of rendered UI components.

But ...
Writing custom codes are never be a bad idea. But can lead to boiler plate codes and in long term, may lead maintenance challenges.

Conclusion :

  1. Apple strongly believes that storyboards are future. It simplifies designing process and code size. Ultimately it leads lesser bugs. But keep in mind that, larger storyboard is not recommended.
  2. Unlike storyboard, XIBs are flexible and focused on single view with no visual flow.
  3. If none of storyboard or xib gives advantage, write code.

Further Reading :

Debate from Raywenderlich & team gives many for dimensions on this topic.

 Also refer, 




Labels:

Popular posts from this blog

Animating label text update - choosing a better way

By
Recently I published a countdown app .  At one point of development - I have to show a timer on a UILabel which ticks on each seconds. As usual I started  setting text to a label object - self .timerLabel.text = someString Easy piece of cake right !?   But wait ... it won't take much user attention when timer ticks on every seconds. So I decided to make use of a simple animation while label gets text update. I found there are dozens of ways to animate a label. In this short article, I listed 3 best way you can animate text on a label. ( Spoiler Alert 👀- I decided to go with 3rd option)  1. Fade In - Fade out animation : CATransition class has got transition type `fade`. With timing function of CATransition - I was able to see the below result. let animation: CATransition = CATransition () animation.timingFunction = CAMediaTimingFunction (name: CAMediaTimingFunctionName .easeInEaseOut) animation.type = CATransitionType .fade animation.subtype = C...
Read more

Prevent Navigationbar or Tabbar overlapping Subview - solved for Card view

By
Recently, I started with a Card view added as a subview of UIView in a view-controller. When a view controller created along subviews, it tends to use entire screen bounds and also slips behind Tab bar or Navigation bar. In my current situation, it's second case. Casually new iOS developers will write a patch by additional value for coordinate y and subtracting bar height from its size. A lot of them posted in SO threads too : How to prevent UINavigationBar from covering top of view? View got hidden below UINavigationBar iOS 7 Navigation Bar covers some part of view at Top So, how I got solved ? self.edgesForExtendedLayout = [] This  will avoid all subviews in a view controller get behind any bars. Read full apple  documentation on here. Full Source code below :  //Simple view controller where its view layed-out as a card. class WidgetCardViewController : UIViewController { var containerView = UIView () //MARK:- View Controller Life Cyc...
Read more

Printing Staircase Pattern : Swift coding challenge

By
In this post, we can try interesting pattern printing challenge in Swift. The problem statement goes like this " Print a staircase of given size 'n'. Make sure that its base and height are both equal to n, and the image is drawn only using `#` symbols and spaces. The last line is not preceded by any spaces." Expected Output : # ## ### #### ##### ###### Working solution: func makePatternOf ( _ size : Int ) { var str = "" // 1 for index in ( 0 ..< size ) { let stop = size -index-1; // 2 for _ in 0 ..< stop { str. append ( " " ) ; } // 3 for _ in 0 .. . index { str. append ( "#" ) ; } print ( str ) str = "" } } makePatternOf ( 6 ) Loop to visit every row of stair case. Loop for appe...
Read more

Implementing autocompletion OTP field in iOS

By
Long waiting is over. !!  iOS 12 brings Autofill for OTP text field which is close to Android provided a decade back. Previously in iOS we used to toggle between OTP text screen and message inbox.  Which was hard to remember and time consuming resulting a bad user experience. Personally, I have been asked from the client/customer couple of times to implement autocompletion for OTP field and took me a lot of time to convey that it is not possible in iOS. Why Autofill was not possible previously?  We all know that Apple gives at most care for user privacy. When we see iOS architecture, each individual app is like a separate island. There is no inter-app bridge between apps (exception for Keychain and URLSchemes APIs which gives very limited scope). Thus we cannot read message content from inbox. Where to start Autofilling? First of all, the target SMS need to have the OTP Code with prefix string "Code" or "Passcode"on its message content. Beware of OTP c...
Read more

UICollectionViewCell shows with wrong size on First time - Solved

By
We commonly use Collection view where its cell size calculated run time. The flow layout delegate is responsible to return individual cell sizes. BUT in most of the cases, delegate method `collectionView: layout sizeForItem:` expects cell size too early. Before generating actual cell size. extension YourViewController : UICollectionViewDelegateFlowLayout { func collectionView ( _ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { return CGSize (width: externalWidth, height: externalHeight) } } For instance, if a cell size depends on external view and its frame is not yet ready - results with wrong (or outdated) cell size. Typically happens for the first time view controller laid out all views. You can find similar queries in StackOverflow community : Collection view sizeForItemNotWorking UICollectionViewCell content wrong size on first load How to refresh UICollec...
Read more