Adding view created in Interface Builder to Progmatically created view - can it be done?

Question

Ok so I've downloaded an open source project that I'm looking at customising for personal use (unless it turns into a great project in which case who knows) but in either case I'm having some difficulty.

From a starting point I'm finding creating UI elements using progmatic methods rather difficult, just can't find a good tutorial out there (if anyone has any suggestions it would be much appreciated!)

So I've come to the conclusion that maybe my best method is to take the view that I wish to modify, recreate it in Interface Builder, then add it to the previous view, the problem here is that I just can't seem to get my head around how to do this. If anyone wants to see the code I can provide it but it's based on the RemotePad open source project (easily googled) and I'm looking at replacing the TapView elements - really all I need to do is add a fourth button under the three mouse buttons but it's just lost me.

I suppose really what I'm asking is what's the best way for me to go about adding this fourth button? Ideally the button should be 'skinable' i.e. should be in the form of an image that can have a highlighted mode applied.

Answer 1

This should actually be fairly easy to do.

1. First, you need to set up the existing view controller (the one associated with the view where you want to add your button) with an IBOutlet for your new button. So you add something like:

   @property (nonatomic, retain) IBOutlet UIButton *myFourthButton;
   

2. Next, create the nib file with Interface Builder. Start with an empty IB file and add your button to it. You also need to set the File's Owner to be an instance of the view controller class. Then connect the File Owner's myFourthButton outlet to your new button. Save the IB file.

3. Now you need some way to load this NIB file when the view controller is created. I would suggest doing this in the view controller's viewDidLoad: method by calling:

   [[NSBundle mainBundle] loadNibNamed:@"yourNibFile" owner:self options:nil];
   

4. The button from the NIB file should now be connected to your myFourthButton outlet, now you just need to add it to the view and position it. Below I add it to the view controllers main view. However, there may be a subview that you should add it to instead (depends on how the original view is set up). Again, I would put this code in viewDidLoad: after all of the existing code to set up the view programmatically (or in another method if that code is elsewhere).

   [self.view addSubview:myFourthButton];  
   
   
   CGRect frame = myFourthButton.frame;
   frame.origin.x = 100;
   frame.origin.y = 100;
   myFourthButton.frame = frame;
   

   When you need your button to actually respond to a tap event, you can connect it to your view controller using an IBAction and Interface Builder just as you would expect.