Remove More and show all 7 tabs with scrolling option

Question

I am newbie to iOS. I am creating iPhone application where I am using UITabBarController. As there is limit of 5 tab item, I see option as More... at the bottom of my screen.

What I want is show all 7 tab bar items at the bottom. First 5 on main screen and have scrolling option so that if I scroll tab-bar, I can see 6th and 7th tab too.

Any idea/ suggestion how to get this done?

Edit 1

-(void)addCustomElements
{
    // Initialise our two images
    UIImage *btnImage = [UIImage imageNamed:@"NavBar_01.png"];
    UIImage *btnImageSelected = [UIImage imageNamed:@"NavBar_01_s.png"];

    self.btn1 = [UIButton buttonWithType:UIButtonTypeCustom]; //Setup the button
    btn1.frame = CGRectMake(0, 430, 80, 50); // Set the frame (size and position) of the button)
    [btn1 setBackgroundImage:btnImage forState:UIControlStateNormal]; // Set the image for the normal state of the button
    [btn1 setBackgroundImage:btnImageSelected forState:UIControlStateSelected]; // Set the image for the selected state of the button
    [btn1 setTag:1]; // Assign the button a "tag" so when our "click" event is called we know which button was pressed.
    [btn1 setSelected:true]; // Set this button as selected (we will select the others to false as we only want Tab 1 to be selected initially

    // Now we repeat the process for the other buttons
    btnImage = [UIImage imageNamed:@"NavBar_02.png"];
    btnImageSelected = [UIImage imageNamed:@"NavBar_02_s.png"];
    self.btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn2.frame = CGRectMake(80, 430, 80, 50);
    [btn2 setBackgroundImage:btnImage forState:UIControlStateNormal];
    [btn2 setBackgroundImage:btnImageSelected forState:UIControlStateSelected];
    [btn2 setTag:2];

    btnImage = [UIImage imageNamed:@"NavBar_03.png"];
    btnImageSelected = [UIImage imageNamed:@"NavBar_03_s.png"];
    self.btn3 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn3.frame = CGRectMake(160, 430, 80, 50);
    [btn3 setBackgroundImage:btnImage forState:UIControlStateNormal];
    [btn3 setBackgroundImage:btnImageSelected forState:UIControlStateSelected];
    [btn3 setTag:3];

    btnImage = [UIImage imageNamed:@"NavBar_04.png"];
    btnImageSelected = [UIImage imageNamed:@"NavBar_04_s.png"];
    self.btn4 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn4.frame = CGRectMake(240, 430, 80, 50);
    [btn4 setBackgroundImage:btnImage forState:UIControlStateNormal];
    [btn4 setBackgroundImage:btnImageSelected forState:UIControlStateSelected];
    [btn4 setTag:4];

    btnImage = [UIImage imageNamed:@"NavBar_05.png"];
    btnImageSelected = [UIImage imageNamed:@"NavBar_05_s.png"];
    self.btn5 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn5.frame = CGRectMake(340, 430, 80, 50);
    [btn5 setBackgroundImage:btnImage forState:UIControlStateNormal];
    [btn5 setBackgroundImage:btnImageSelected forState:UIControlStateSelected];
    [btn5 setTag:5];

    scrlview = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 430, 400, 180)];
    // set frame accordingly its random value
    scrlview.backgroundColor = [UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:1];
    scrlview.contentSize = CGSizeMake(0, 430);

    // Add my new buttons to the view
    [scrlview addSubview:btn1];
    [scrlview addSubview:btn2];
    [scrlview addSubview:btn3];
    [scrlview addSubview:btn4];
    [scrlview addSubview:btn5];
    [self.view addSubview:scrlview];
    [scrlview release];

    // Add my new buttons to the view
//  [self.view addSubview:btn1];
//  [self.view addSubview:btn2];
//  [self.view addSubview:btn3];
//  [self.view addSubview:btn4];
//  [self.view addSubview:btn5];
//    [self.view addSubview:]
//    [scrlview addSubview:];


    // Setup event handlers so that the buttonClicked method will respond to the touch up inside event.
    [btn1 addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [btn2 addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [btn3 addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [btn4 addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [btn5 addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
}

possible duplicate of [iOS custom tabbar](http://stackoverflow.com/questions/10345426/ios-custom-tabbar) — Abizern, Dec 06 '12 at 12:35

HDdeveloper · Accepted Answer · 2012-12-06T09:32:49.017

Create a custom tabbar .h

@interface CustomTabBar : UITabBarController {
    UIButton *btn1;
    UIButton *btn2;
    UIButton *btn3;
    UIButton *btn4;
   UIScrollView * scrlview;
}

-(void) hideTabBar;
-(void) addCustomElements;
@end

.m

-(void)addCustomElements
{
// initialsie scrollView and initialise contentOffset
    // Initialise our two images
    UIImage *btnImage = [UIImage imageNamed:@"NavBar_01.png"];
    UIImage *btnImageSelected = [UIImage imageNamed:@"NavBar_01_s.png"];

    btn1 = [UIButton buttonWithType:UIButtonTypeCustom]; //Setup the button
        btn1.frame = CGRectMake(0, 430, 80, 50); // Set the frame (size and position) of the button)
    [btn1 setBackgroundImage:btnImage forState:UIControlStateNormal]; // Set the image for the normal state of the button
    [btn1 setBackgroundImage:btnImageSelected forState:UIControlStateSelected]; // Set the image for the selected state of the button
    [btn1 setTag:0]; // Assign the button a "tag" so when our "click" event is called we know which button was pressed.
    [btn1 setSelected:true]; // Set this button as selected (we will select the others to false as we only want Tab 1 to be selected initially

        // Now we repeat the process for the other buttons
    btnImage = [UIImage imageNamed:@"NavBar_02.png"];
    btnImageSelected = [UIImage imageNamed:@"NavBar_02_s.png"];
    btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
        btn2.frame = CGRectMake(80, 430, 160, 50);
    [btn2 setBackgroundImage:btnImage forState:UIControlStateNormal];
    [btn2 setBackgroundImage:btnImageSelected forState:UIControlStateSelected];
    [btn2 setTag:1];

    btnImage = [UIImage imageNamed:@"NavBar_03.png"];
    btnImageSelected = [UIImage imageNamed:@"NavBar_03_s.png"];
    btn3 = [UIButton buttonWithType:UIButtonTypeCustom];
        btn3.frame = CGRectMake(160, 430, 80, 50);
    [btn3 setBackgroundImage:btnImage forState:UIControlStateNormal];
    [btn3 setBackgroundImage:btnImageSelected forState:UIControlStateSelected];
    [btn3 setTag:2];

    btnImage = [UIImage imageNamed:@"NavBar_04.png"];
    btnImageSelected = [UIImage imageNamed:@"NavBar_04_s.png"];
    btn4 = [UIButton buttonWithType:UIButtonTypeCustom];
        btn4.frame = CGRectMake(240, 430, 80, 50);
    [btn4 setBackgroundImage:btnImage forState:UIControlStateNormal];
    [btn4 setBackgroundImage:btnImageSelected forState:UIControlStateSelected];
    [btn4 setTag:3];

        // Add my new buttons to the view
    [scrlview addSubview:btn1];
    [scrlview addSubview:btn2];
    [scrlview addSubview:btn3];
    [scrlview addSubview:btn4];
    [self.view addSubView: scrlview];

        // Setup event handlers so that the buttonClicked method will respond to the touch up inside event.
    [btn1 addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [btn2 addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [btn3 addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
    [btn4 addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
}

- (void)selectTab:(int)tabID
{
    switch(tabID)
    {
        case 0:
            [btn1 setSelected:true];
            [btn2 setSelected:false];
            [btn3 setSelected:false];
            [btn4 setSelected:false];
            break;
        case 1:
            [btn1 setSelected:false];
            [btn2 setSelected:true];
            [btn3 setSelected:false];
            [btn4 setSelected:false];
            break;
        case 2:
            [btn1 setSelected:false];
            [btn2 setSelected:false];
            [btn3 setSelected:true];
            [btn4 setSelected:false];
            break;
        case 3:
            [btn1 setSelected:false];
            [btn2 setSelected:false];
            [btn3 setSelected:false];
            [btn4 setSelected:true];
            break;
    }   

    self.selectedIndex = tabID;

}
- (void)buttonClicked:(id)sender
{
    int tagNum = [sender tag];
    [self selectTab:tagNum];
}

see Link

this will not give what I wanted. When I add 5th tab, it won't scroll and I want that... I know how to create tab, however I want scrolling tabs. — Fahim Parkar, Dec 06 '12 at 10:13
`UIScrollView* scrlview = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, 320, 44)]; // set frame accordingly its random value` `scrlview.contentSize = CGSizeMake(500, 44); [self.view addSubview:scrlview];` — HDdeveloper, Dec 06 '12 at 10:32
I added `UIScrollView* scrlview = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, 400, 50)]; // set frame accordingly its random value scrlview.contentSize = CGSizeMake(500, 44); [self.view addSubview:scrlview];` after `[self.view addSubview:btn4];` and before `[btn1 addTarget:self action:@sel` — Fahim Parkar, Dec 06 '12 at 10:47
set frame accordingly and add button on scrlview not on the view [self.view addSubview:btn4]; [scrlview addSubView: but]; add [self.view addsubview:scrolview]; — HDdeveloper, Dec 06 '12 at 11:35
will check the updated code and get back to you incase of any queries. — Fahim Parkar, Dec 06 '12 at 11:48
Try to change the buttons frame (x,y,w,h) like (0,0,10, 20) and make sure you added them to scrolview.. — HDdeveloper, Dec 06 '12 at 12:12
I have asked some another question. can you take a look at [this](http://stackoverflow.com/questions/13743777/show-all-tabs-with-scrolling-option-on-screen-there-should-be-only-4-tabs) — Fahim Parkar, Dec 06 '12 at 12:35
I have posted the code that I am using in my question. Please take a look at it... — Fahim Parkar, Dec 06 '12 at 12:36
btn1.frame = CGRectMake(0, 430, 80, 50); change it to btn1.frame = CGRectMake(0, 0, 80, 50); and others too. — HDdeveloper, Dec 06 '12 at 12:47
I have brought scroll view to 0,430. `scrlview = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 430, 400, 180)];` — Fahim Parkar, Dec 06 '12 at 12:54
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/20696/discussion-between-hddeveloper-and-fahim-parkar) — HDdeveloper, Dec 06 '12 at 12:55

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

You can achieve this by subclassing the UITabBar and implementing your own custom views. Should be relatively straightforward. There's some good information you might find useful on subclassing the UITabbar here... How can I create my own UITabBar?

edited May 23 '17 at 12:14

Community

1
1

answered Dec 06 '12 at 08:49

Liam

1,028
13
24

Remove More and show all 7 tabs with scrolling option

Edit 1

2 Answers2