CODEWITHSUNDEEP
swiftxcode
David Choi
David Choi

Reputation: 6619

Make reusable component in Xcode storyboard

I have a specific situation but what I'm looking for is a generic solution. Currently I have a UIImageView that contains an image, a few labels, and multiple levels of constraints. I would like to configure this set of controls' properties once and reuse them inside of multiple controllers. Such that if I have to update this set, I would do it in one place and all the controller instances would get the change (sort of like how Sketch works with symbols).

Upvotes: 3

Views: 3935

Answers (2)

Zig
Zig

Reputation: 2603

You, sir, need a custom View!

My typical approach for this is to create an xib file, design the view I need, and create a class that subclasses UIView.

When you do this, you can assign the class of the xib File's Owner (in interface builder) and link up any @IBOutlets from the view to your custom class.

For the class, you'll need to implement a few methods. Here is an example custom view:

class LoadingView: UIView {

@IBOutlet var view: UIView!
@IBOutlet weak var messageLabel: UILabel!
@IBOutlet weak var activityIndicator: UIActivityIndicatorView!

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    loadViewFromNib()
    setUpView()
}

override init(frame: CGRect) {
    super.init(frame: frame)
    loadViewFromNib()
    setUpView()
}

func setUpView() {
    self.view.layer.cornerRadius = 10.0
    self.view.layer.masksToBounds = true
}

private func loadViewFromNib() {
    let bundle = Bundle.init(for: self.classForCoder)
    bundle.loadNibNamed("LoadingView", owner: self, options: nil)
    self.view.frame = bounds
    self.addSubview(self.view)
}

}

You are required (pun intended) to implement the required init and the override init methods, and the other two are (kind of) optional. The loadViewFromNib is a convenience method that implements the logic to actually load the xib file from your app's bundle.

Don't forget to match the nib name with your xib file name! You'll thank me later. ;)

You can use this view in storyboards and use constraints, etc. by placing a regular old view and assigning its class to your custom class.

You can also play around with @IBDesignable to actually see your custom view in interface builder, though it tends to constantly reload and slow down Xcode unless you toggle a setting that I can't remember the name of right now (sorry!).

Enjoy!

Upvotes: 12

EmilioPelaez
EmilioPelaez

Reputation: 19902

What you want is not possible exactly in the way you describe it but there's a way to achieve the same result.

Create a subclass of UIView that will contain all the content you want, once you do that there are two options.

The first (and best, imo) option is to generate your layout with code when the view is initialized. This will allow you to add the view to other view controllers and it will initialize itself. The downside of this method is that you'll need to create the constraints with code.

The second option is to create a xib with your views and constraints and initialize your custom class from that xib. The downside of this is that you'll have to instantiate your view with code and place it in the view hierarchy yourself. You could create a container in the storyboard where you will add the view and pin it to the edges.

Upvotes: 0

Related Questions