Reusing Custom Views in Xcode
June 29, 2015We recently started work on an app that reuses similar components across various screens. In an effort to be good stewards of the project, we decided to create a reusable view which could then be added to a container view. This proved to be a bit trickier than I had hoped, but the solution we came up with provides some nice flexibility.
For the purposes of this blog post we will be building a app that looks like the mockup below.
Designing Your View
Our current process is to design all of our views (with a few exceptions) using Interface Builder and XIB files. To accomplish our goal of reusing this play button view, we will need to create two different XIB files. First we will create the container view that will hold the reusable play buttons. The XIB will look something like the image below.
Note that we are constraining what will be our container views to the margins of the View Controller’s view (their super view). From here the constraints we put on the subview will take over. This approach lets us Modularize our UI into these separate components.
Designing Your Subview
Designing and constraining a custom subview requires a little extra thought in how you set up its constraints. The subview does not know what size container it might be put in, and as such you need to constrain it so that it looks good in all (reasonable) containers.
Below is a mockup of the constraints our custom, reusable play button might have.
Based on our mock up, the play button should expand the play icon to fit in the container while maintaining aspect ratio and a minimum margin between the edge of the icon and the edge of the button. Below is what this looks like in Interface Builder.
Now that we have our subview all laid out and constrained, we can add it to the container view we created earlier.
Putting them Together
This is where things get a little tricky. Simply adding our custom play button as a subview to the containers we set up earlier will not constrain the button to its container. As a result, we need to do that manually using a custom class for the container in Interface Builder. Create a new class called something like MLContainerView
. All this class needs to do is override the didAddSubview:
method with the following.
#import "MLContainerView.h" @implementation MLContainerView - (void)didAddSubview:(UIView *)subview { [super didAddSubview:subview]; [subview setTranslatesAutoresizingMaskIntoConstraints:NO]; NSDictionary *views = @{ @"sub" : subview }; NSMutableArray *constraints = [NSMutableArray new]; [constraints addObjectsFromArray: [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[sub]|" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:views]]; [constraints addObjectsFromArray: [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[sub]|" options:NSLayoutFormatDirectionLeadingToTrailing metrics:nil views:views]]; [self addConstraints:constraints]; } @end
What this method does is pin the added subview to the horizontal and vertical edges of the container. From there the auto-layout constraints of the play button will take over to layout our reusable view.
Putting all of this together we end up with an app that closely resembles our original mock up, while making maintenance of our view easier. By containing components of the UI in a separate layout, the container and the button layouts can change independently of one another, easing the headache of having multiple developers work on the same screen.
The final product for this demonstration can be found on github.
Looking for more like this?
Sign up for our monthly newsletter to receive helpful articles, case studies, and stories from our team.
Product Strategy
November 22, 2022A look at Product Strategy at MichiganLabs. Why we do it, what it is, what it is not, and how we approach it.
Read moreWhy Use Flutter?
January 18, 2023We discuss Flutter, a framework for building Android and iOS apps with a single codebase, created by Google in 2018. Given the increasing popularity of smartphones and mobile-first experiences, it is essential to cover not only Android and iOS platforms but also the mobile-first web.
Read moreBuild what matters: Prioritize value over feature count
August 1, 2024Focusing on value delivery—rather than just feature count—combines your business goals with your users’ needs to achieve real software ROI.
Read more