How do I add a UISegmentedControl to my UIToolbar using Storyboard? - ios

Question

I'm trying to add a Segmented Control to my UIToolbar below, but when I try to drag it over in Storyboard it replaces my Table View.
Also, when I try to add UIBarButton to my Toolbar it pushes my Prototype Cells down... do I have my views hierarchy wrong?
When I add a UIBarButton item anyway, in the simulator the toolbar is not Black Transparent as I set in my navigation control inspector. Whats up with that?
thanks!

Answer 1

To create Segmented Control element in the toolbar with Interface builder it is possible to use the following hint
1) Create Segmented Control Bar Button Item in Navigation Controller:
2) Drag Bar Button Item up to Navigation Item
3) Then you should get the following structure
4) Now you can select Segmented Control to set its properties

Answer 2

1 - Do it programmatically. You need to assign a frame to your UIToolbar first, then you can add elements in it (the segmentedControl). I suggest though to use UIBarButtonItems, which basically are the same.
To stick it to the bottom, try to do this way:
#define SCREEN_FRAME [[UIScreen mainScreen] applicationFrame]
CGRect frame = CGRectMake(0, [[UIScreen mainScreen] bounds].size.height - 44, [[UIScreen mainScreen] bounds].size.width, 44);
UIToolbar *toolBar = [[UIToolbar alloc]initWithFrame:frame];
toolBar.frame = CGRectMake(0,self.view.frame.size.height-toolBar.frame.size.height,SCREEN_FRAME.size.width,toolBar.frame.size.height);
//Setting up the items
UIBarButtonItem *first = [[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"image.png"] style:UIBarButtonItemStylePlain target:self action:#selector(yourAction:)] autorelease];
UIBarButtonItem *second = [[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"image.png"] style:UIBarButtonItemStylePlain target:self action:#selector(yourAction:)] autorelease];
//Creating an array with the items
NSArray *items = [NSArray arrayWithObjects:first,second, nil];
//Assigning the array to the toolBar
[toolBar setItems: items];
Then you can set its style with
mytoolbar.barStyle = UIBarStyleBlack;
2 - Same as above, framing.
3 - You need to set your navigationController style to Black.
Use self.navigationController.navigationBar.style = UIBarStyleBlack; ,or in IB choose the buttons and from Inspector set Tint or Style to whatever you want.
Check also this question

Answer 3

I presume there's a navigation view controller somewhere in here. They have their own toolbar, but it's hidden and empty. The toolbar you're seeing is just a simulation of a toolbar for the purpose of letting you edit the UI.
So to do this with storyboard, don't add the segmented control to the simulated toolbar, create a new toolbar and add it to the tree of views available in your controller (as a sibling to your Table View) and create an IBOutlet to reference it. Then in your viewDidLoad method assign the items in the toolbar to the toolbar already created by the view controller.
In this example I've created a property on my view controller called (cunningly) toolbar:
#property (nonatomic, retain) IBOutlet UIToolbar toolbar;
In my view controller's implementation I assign the toolbar items manually:
-(void)viewDidAppear:(BOOL)animated
{
[self setToolbarItems:self.toolbar.items animated:NO];
[self.navigationController setToolbarHidden:NO animated:YES];
}
You'll need to hide the toolbar when the view controller is popped, for instance in the calling view controller:
-(void)viewWillAppear:(BOOL)animated
{
[self.navigationController setToolbarHidden:YES animated:YES];
}
Assuming you want to hide it, of course.

Answer 4

I did this by placing the UISegmentedController in a Bar Button Item.
Add a toolbar to the UINavigationController window, then enable the display of this toolbar on a ViewController screen.
Drag a bar button into the toolbar on the ViewController screen, and drag a UISegmentedController into that (resizing the button to the full width of the screen)
To wire it all up, ctrl-drag from the UISegmentedController to the corresponding .h file, drag from "referencing outlet" to the yellow view controller icon (using the same variable name), then drag from "ValueChanged" to the yellow icon (selecting the method on the controller that you want to call on a new selection).
This all seems to work as expected. (If you can't select a segment on the controller to set an initial value, you didn't connect up the referencing outlet as described above. That stumped me for a little while.)