Embedding a Tab Bar inside a UI View - ios

Question

I am working with a SplitView controller. Inside my DetailView, I want to implement something similar to the image given below
In my DetailView Controller, I have divided my entire view into 3 subviews. In my middle subview, I want to implement a Tab Bar such that on the press of those three Tab Item(Error, Warning and Status), a different view should load.
I have tried searching for anyway to implement it, but failed. Any guide regarding how to achieve it will be really appreciated.
EDIT:
I have found that I can get the action of my Tab Items using the delegate method
- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item;
I implemented the above method inside my DetailViewController.m in following way:
- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item
{
if (_myTabBar.selectedItem.tag == 1) {
NSLog(#"TAB 1");
}
else if (_myTabBar.selectedItem.tag == 2) {
NSLog(#"TAB2");
}
else if (_myTabBar.selectedItem.tag == 3)
{
NSLog(#"TAB3");
}
else
{
NSLog(#"TAB NOT WORKING");
}
}
But the above method is not working. Someone please guide me if I am missing something.
Thanks in advance!

Answer 1

There are a few number of ways to achieve what you want, but I would not recommend that you use a TabBar to implement this.
You should use a UISegmentedControl. You may not be able to exactly skin it the way you want, but its the easiest way to achieve the functionality that you want.
Use 3 different buttons and place them inside your based on your need. In this case you would need to manually manage the selections (showing one on and others off), background images and other details yourself.
Either way, a Tab Bar is not probably the right way to go for this. Hope this helps. Thanks.

Answer 2

If you really want to use a UITabBar (but, as Gurtej suggested, UISegmentedControl seems to be more appropriate), here's an example :
// This is to calculate the proper position of each UILabel in your middle view (you don't really care about it)
static CGFloat labelYCurrentPosition;
static CGFloat labelYFirstPosition;
static CGFloat xMargin = 5.f;
static CGFloat labelXPosition;
static CGFloat labelWidth = 120.f;
- (void)viewDidLoad {
[super viewDidLoad];
self.middleView = [[UIView alloc] initWithFrame:CGRectMake(0, 150.f, self.view.frame.size.width, 250.f)];
self.middleView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:self.middleView];
UITabBar *tb = [[UITabBar alloc] initWithFrame:CGRectMake(0, 0, self.middleView.frame.size.width, 49)];
tb.backgroundColor = [UIColor greenColor];
UITabBarItem *tbi1 = [[UITabBarItem alloc] initWithTitle:#"Error" image:nil tag:0];
UITabBarItem *tbi2 = [[UITabBarItem alloc] initWithTitle:#"Warning" image:nil tag:1];
UITabBarItem *tbi3 = [[UITabBarItem alloc] initWithTitle:#"Status" image:nil tag:3];
[tb setItems:#[tbi1, tbi2, tbi3]];
[tb setDelegate:self]; // Delegate of your UITabBar is your detailViewController
[self.middleView addSubview:tb];
labelYFirstPosition = tb.center.y + tb.frame.size.height;
labelYCurrentPosition = labelYFirstPosition;
labelXPosition = xMargin;
}
- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item{
CGFloat labelHeight = 20.f;
// This is to calculate x position of each label (you don't really care about it)
if (labelYCurrentPosition + labelHeight > self.middleView.frame.size.height){
labelXPosition += labelWidth;
labelYCurrentPosition = labelYFirstPosition;
}
UILabel *lab = [[UILabel alloc] initWithFrame:CGRectMake(labelXPosition, labelYCurrentPosition, labelWidth - 2 * xMargin, labelHeight)];
lab.text = [NSString stringWithFormat:#"%# with tag %ld", item.title, (long)item.tag];
lab.font = [UIFont systemFontOfSize:12.f];
[self.middleView addSubview:lab];
labelYCurrentPosition += labelHeight;
}

Answer 3

You can achieve above image functionality by following steps:
Make the UIVIEW with three or more buttons (title will be same as your button name).
Give the tag value to each button i.e 1, 2, and 3 respectively
Make IBOutlet as well as action method of UIButton
When user press the button 1 (Errors) then make view1 visible else view2 and view3 as hidden
When user press the button 2 (Warning) then make view2 visible else view1 and view3 as hidden
Same goes for other button.
Please let me know in case of any query.