Slim UIViewController - Break Into Multiple UIView Components

Mohd Hafiz
Apr 17 · 5 min read
Image by M W from Pixabay

It is common in iOS development where UIViewController becomes very messy and hard to manage because it is filled up with every single element, including Views, outlets, actions, cosmetics, layouts and business logics.

In fact, UIViewController should be very simple. It only need to manage the Views and observe the actions occur. In this tutorial, I would like to share one of the best practice that I always apply to my projects.

Solution

We are going to break down the screen into multiple UIView components and each UIView component will manage all the layouts and styles themselves. It also will take a responsibility to notify ViewController of any action or changes. Besides, the UIView component eventually becomes reusable throughout the projects. Awesome!

Imagine we are going to develop this simple profile page (image above). So, in our mind, surely we are going to put all those things in a ViewController. We can simply open storyboard and start adding the outlets (Labels, Image) and some constraints. Exactly, that’s the common practice we always do, unfortunately 😅

Yeah, perhaps we won’t repeat such mistake again after finish reading this.

The problems will happen when start making more changes to the UI or maybe add more functions. Hence, the ViewController will be getting fatter easily.

Break it now

Now, we want to keep the UIViewController always slim and start breaking into separate UIViews. Here are the steps.

  1. First, add UIScrollView and UIStackView in ViewController to enable dynamically adding components.
  2. Separate into 3 UIViews (HeaderView, StatsView, and PostView)
  3. Create xib and UIView file for each component (You may create those programatically as you want)
  4. Manage all styles in each UIView.
  5. Create function in UIView to update UI with data.
  6. Add protocol (delegate) in each UIView to enable ViewController get events on any UI updates or actions

OK. Let’s get our hands dirty! Create a new iOS project. Before start going through each step, take note that you may refer the completed project uploaded here.

1 — Add StackView in ViewController to enable dynamic adding component.

Go to ViewController.swift, then add UIStackView() and UIScrollView() variables programatically (No need to touch the storyboard for now). First, add a UIScrollView and pin it to edge of superView. then we add UIStackView inside the scrollView and also pin the edges. Also make sure to set width constraint of the stackView to scrollView.

Good! nothing changed for now if we run the project.

2 — Break down into 3 UIViews ( HeaderView, StatsView, and PostView)

In this step, we are going to create 3 UIView Swift files and 3 xib files, then linked it together.

a. HeaderView.swift and HeaderView.xib

Make sure to link the “File’s Owner” with “Class” name. Also link all IBOutlets created in HeaderView.swift.

link the “FIle’s Owner” with the HeaderView.swift

b. StatsView.swift and StatsView.xib (Same as before, to link the “File’s Owner” and Outlets).

c. The last UIView file to create is PostView.swift and PostView.xib.

4 — All styles are manage in each UIView

5 — Create function in UIView to update UI with data.

Make sure to pass the proper object to be used. In this project, we will be using DemoProfile with all properties required.

For step 4 & 5, we already did in step 3. Great!

6 — Add protocol (delegate) in each UIView so Controller can get events on any UI updates or actions

Perhaps you are familiar with Swift protocol since we are using it in this step to make sure UIView component able to notify ViewController on any action or changes.

Our UIView component is an independent class, therefore, ViewController won’t know anything that happen inside it.

In our case, we only need to add a protocol (delegate) in HeaderView to notify Controller if the “Edit Profile” button is tapped.

a. Firstly, add a protocol namely HeaderViewDelegate in HeaderView.swift

b. Then, as shown above, add a method called didTapEditButton(). Then, make sure the button target action will call the delegate method (above code in line 19).

c. In ViewController class, implement the HeaderViewDelegate and set HeaderView object .delegate to self to get the call in the implementation method (as show below).

Add the HeaderViewDelegate implementation in ViewController.swift file (at bottom) to make it works and avoid the error.

At last, let’s update the ViewController to include those 3 components in the stackView. The updated ViewController will be as below.

Mission completed!

Congratulations! Now, we have completely done all the steps and the project is ready to run. See that our ViewController.swift is only got 52 lines. Really? Yeah and you did it 🎉.

The complete source code can be downloaded here. Try to implement into your existing projects so it will become cleaner and more extendable (with the future modules or features).

Thanks for reading and don’t forget to share with your friends. Feedbacks are most welcome.

“Learn, that’s how we grow our skills”

References

https://docs.swift.org/swift-book/LanguageGuide/Protocols.html

https://github.com/xmhafiz/SlimViewControllerDemo

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Mohd Hafiz

Written by

iOS Developer focusing on Swift — “Learn, that’s how we grow our skill”.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Mohd Hafiz

Written by

iOS Developer focusing on Swift — “Learn, that’s how we grow our skill”.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store