How to connect custom UIView in interface builder using storyboards?

Question

I want to use an F3BarGauge ( http://www.cocoacontrols.com/controls/f3bargauge ) in my iOS app and I want to use a .storyboard for my UI design.

I managed to achieve this programmatically by writing code into the view controller's loadView: method, which creates the instance of the F3BarGauge and adds it to the view via [self.view addSubview:myBarGauge]; .

However, now I can't see the F3BarGauge at all in the preview in Interface Builder and therefor I also can't adjust the size or position of the F3BarGauge from there. I can only do this in the code. Moreover, I think it is confusing for my colleagues if I create parts of the UI elements automatically through the .storyboard and some in my own code.

I would like to find a solution for both of these disadvantages. It is not important for me to see the actual custom UI element's content (in this case the F3BarGauge) in Interface Builder. If the frame of the F3BarGauge's area is displayed in Interface Builder and I can move and resize it, then I'm happy with the solution.

I do not have an example for this approach, because the example from the author of the F3BarGauge uses a .xib file and not a .storyboard.

I'm relatively new to iOS programming and Xcode / Interface Builder. Maybe there is a better way to achieve what I want than how I imagine my solution.

Answer 1

I don't think there is a way to see the F3BarGauge in IB, but you can add a UIView as a subview of your main view in IB, size and position it as you like, and then in code, add the F3BarGauge to the subview.

After Edit: Actually, after looking at the author's demo project, you can see it in IB. Just copy and paste his view from the demo project into a view controller (after deleting the default view first).