Is it possible to create an @IBOutlet in a custom view?

Question

I've created a view on the storyboard in one of my view controllers and realized that I'll need to reuse it. So I then created a subclass for UIView to consolidate the code. I've selected the view in the storyboard and changed the class to my custom view class. Now I want to create @IBOutlets for a couple of the components in the view (in this case, 2 text fields). When I try and drag&drop from storyboard to custom view file, the only thing it allows me to create is an @IBAction and @IBOutlet is grayed out.

I tried creating the @IBOutlet manually in code and then drag from the circle to the component on the storyboard. Everything seemed to work (i.e. I see the connection in the little black popup and also the circle next to the variable is filled in. But when I run the app, the 2 fields are nil.

Is there a reason why I can only create actions and not outlets? (I'm kind of new to iOS dev).

Seely

Can you post implementation of your custom view class and what outlets you are trying to add? – Chloe

@SanthoshR can you see the gif I posted? – Seely

Possible duplicate https://mcmap.net/q/347217/-cannot-create-outlet-connections-to-subviews-in-interface-builder-xcode-5. That's Objective-C, but the same happens in Swift. And while that's an old question, I see the same behavior in Xcode 9.2. – Perineum

Unfortunately, none of the solutions on any of those pages fix my problem. Like I said in my question, the manual approach doesn't work either. – Seely

Answer 1

If you want to reuse a UIView then best to create an xib of the view and a custom class of the UIView. Then change the file owner in xib class to your custom class. Then you can drag and drop IBOutlets of the components inside the view to custom class. In the storyboard you can use the custom view and change the name of the class of view to custom view. Now drag and drop the IBOutlets from the story board to UIView. You can see the tutorial video on how to do , I have made for you. https://youtu.be/IrgH522lbfA

Favors

I think this is the case. I don't think xcode supports creating custom view right in the storyboard and then linking it to a UIView subclass. It seems like it should work, but I'm convinced that it's not supported. I can't see your vid (probably didn't make it public), but I think you're right nonetheless. – Seely

Please wait for 10 minutes since the video is uploading. now – Favors

Now the video is uploaded now you can see it. I thing you can make it acceptable answer. – Favors

for loading the xib in Custom View swift class. func loadViewFromNib() -> UIView { let bundle = Bundle.init(for: type(of: self)) let nib = UINib(nibName: "CustomView", bundle: bundle) let view = nib.instantiate(withOwner: self, options: nil)[0] as! UIView view.frame = bounds view.autoresizingMask = [UIViewAutoresizing.flexibleWidth , UIViewAutoresizing.flexibleHeight] addSubview(view) return view } – Favors

I've already tested it out by following another xib example, and it's working. But you definitely gave the correct answer. – Seely

why can't I see the custom view controls on the storyboard when I set the view to the custom view? – Seely

Please go through my video you will get it. – Favors

Answer 2

No XIB is needed

1. Manually write the IBOutlet in your custom UIView class, for example: @IBOutlet weak var container: UIView!

2. Open the storyboard and select the custom view in the Document Outline panel on the left.

3. Open the Connections Inspector on the right. Drag from the Outlet to the custom view in the Document Outline panel to connect them.

Jonniejonny