Creation of a Horizontal Infinite Scrolling Menu Bar in iOS

Question

I am interested in creating a menu bar like this:

Menu Bar Example

From what I have been reading, I should be doing a UIScrollView. Are there any examples online that do this with infinite scrolling (wrapping around the menu bar) and the ability to have touch control? (i.e. swipe and it changes the menu bar).

Thanks!

UIScrollMenu isn't a class inherent to iOS... I assume you mean UIScrollView. — Lyndsey Scott, Nov 09 '14 at 18:41
And as a basic recommendation, to accomplish this, I recommend tripling the content (ex. Handball All Football Handball All Football Handball All Football) then as the user is about to reach one end or the other as detected in scrollViewDidScroll, reset the content offset to the opposite end. — Lyndsey Scott, Nov 09 '14 at 18:50
Check this http://stackoverflow.com/questions/1493950/uiscrollview-any-thoughts-on-implementing-infinite-scroll-zoom or http://stackoverflow.com/questions/24594653/how-to-move-one-direction-in-uiscrollview-when-scrolling — Kumar, Jun 17 '15 at 12:10

score 6 · Answer 1 · answered Jun 04 '16 at 12:24

6

Your request is very similar to mine. But I cannot find a good enough solution too. So I decide to create something to do that by myself.

The ACTabScrollView supports some different gestures. And the tabs and pages will always scroll synchronously.

Swipe pages normally
Drag tabs can quickly move pages
Click a tab to change to that page

demo1 demo2 demo3

The Infinite Scrolling feature is not ready yet, but I will keep to implement.

I use the similar UI as examples in this project. I don't know what the app is, but if using it as an example bother anyone. Contact me and I will immediately remove that.

Feel free to give me any suggestion to improve it :)

answered Jun 04 '16 at 12:24

Azure Chen

859
1
12
21

is it possible to seperate page swiping from tab scrolling? When you have data retrieved from server for every tab, it is probably more convenient – Ahmed M Jun 28 '17 at 17:41
how could you create content pages before you load tabs from the server? If the data of contents and tabs will be received in the same time, you can use `reloadData` to update the dataSource just like `UITableView` – Azure Chen Jul 01 '17 at 17:51
i mean tabs are static and known. The content of each page related to each tab will be fetched from server. So when i select tab1, a call to the server will be done to retrieve the page content related to tab1 etc. – Ahmed M Jul 02 '17 at 20:34
1

ok, I see. If you have 5 tabs, you can create 5 empty view controllers and load data from the server at `viewWillAppear` of each view controller. You just need to assign a key or identifier to every view controllers to make them can fetch data from server by these keys – Azure Chen Jul 04 '17 at 14:40

score 4 · Answer 2 · answered Jul 21 '15 at 09:41

I hope this code will work for you.

- (void)viewDidLoad
{
 [super viewDidLoad];
 [self createHorizontalScroll];
}

- (void)createHorizontalScroll
{
   UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 80, self.view.frame.size.width, 80)];

   int buttonX = 0;
   for (int i = 0; i < 5; i++)
   {
     UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(buttonX, 0, 100, 60)];
    [button setTitle:[NSString stringWithFormat:@"Button %d", i] forState:UIControlStateNormal];
    [scrollView addSubview:button];
    buttonX = buttonX+button.frame.size.width;
    [button addTarget:self
               action:@selector(changeView:)
     forControlEvents:UIControlEventTouchUpInside];

   }

scrollView.contentSize = CGSizeMake(buttonX, scrollView.frame.size.height);
scrollView.backgroundColor = [UIColor greenColor];
[self.view addSubview:scrollView];

}

 -(void)changeView:(UIButton*)sender
 {
   NSLog(@"I Clicked a button %ld",(long)sender.tag);
 }

You can set scroll content as much you want and menu buttons.Change the view according to the button click. Here the screen shot of the above code

enter image description here

score 0 · Answer 3 · answered Jan 17 '18 at 13:18

I hope this might help you. This doesn't have more animation but works as you expected.

You can make use of CollectionView in this to scroll Horizontally with menu options as CollectionView Cell. For achieving the left and right swiping we can use UISwapeGuestureRecognizers and can scroll between pages.

Here is how i have implemented it using CollectionView for ScrollableMenu as tabs in the top of the screen and the Pages in the bottom of the menu using Container View.

You can download this project and check for getting idea about the implementation form the below link.

Horizontal Scrollable Menu

Hope this might help you. This is implemented with lates Swift 4.0 and X-Code 9.2

Happy Coding..

score 0 · Answer 4 · answered Aug 31 '21 at 06:59

I edited example of @Shrikant K so it fits swift 5:

func createVerticalScroll() {
        menuScrollView.frame =  CGRect(x: 0, y: 0, width: 80, height: self.view.frame.size.height)
        var buttonY: CGFloat = 0
        for i in 0..<menuButtons.count {
            menuButtons[i].frame = CGRect(x: 0, y: buttonY, width: 100, height: 60)
            menuButtons[i].setTitle("Button "+String(i), for: .normal)
            menuButtons[i].tag = i
            menuScrollView.addSubview(menuButtons[i])
            buttonY += menuButtons[i].frame.size.width
            menuButtons[i].addTarget(self, action: #selector(menuButtonClicked), for: .touchUpInside)

       }
        menuScrollView.contentSize = CGSize(width: menuScrollView.frame.size.width, height: buttonY)
        menuScrollView.backgroundColor = .green
        menuScrollView.alpha = 0.5
        view.addSubview(menuScrollView)
    }
    
    @IBAction func menuButtonClicked(_ sender: UIButton) {
        print("I Clicked a button \(sender.tag)")
     }

Creation of a Horizontal Infinite Scrolling Menu Bar in iOS

4 Answers4