在 iOS 中创建水平无限滚动菜单栏答案

【问题标题】：Creation of a Horizontal Infinite Scrolling Menu Bar in iOS在 iOS 中创建水平无限滚动菜单栏
【发布时间】：2015-01-06 00:58:04
【问题描述】：

我有兴趣创建这样的菜单栏：

根据我一直在阅读的内容，我应该做一个 UIScrollView。在线是否有任何示例可以通过无限滚动（环绕菜单栏）和触摸控制来做到这一点？（即滑动它会改变菜单栏）。

谢谢！

【问题讨论】：

UIScrollMenu 不是 iOS 固有的类...我假设您的意思是 UIScrollView。
哈哈，是的，过失。
作为一项基本建议，为了实现这一点，我建议将内容增加三倍（例如 Handball All Football Handball All Football Handball All Football），然后当用户即将到达一端或另一端时在scrollViewDidScroll中检测到，将内容偏移重置到另一端。
查看stackoverflow.com/questions/1493950/… 或stackoverflow.com/questions/24594653/…

标签： ios objective-c xcode user-interface

【解决方案1】：

您的要求与我的非常相似。但我也找不到足够好的解决方案。所以我决定自己创造一些东西来做到这一点。

ACTabScrollView 支持一些不同的手势。而tabs 和pages 将始终同步滚动。

Swipe 页面正常
Drag标签可以快速移动页面
Click 切换到该页面的标签

Infinite Scrolling 功能尚未准备好，但我会继续实施。

我在这个项目中使用类似的 UI 作为示例。我不知道该应用程序是什么，但如果以它为例会打扰任何人。联系我，我会立即删除。

请随时给我任何改进它的建议:)

【讨论】：

是否可以将页面滑动与标签滚动分开？当您从服务器为每个选项卡检索数据时，可能会更方便
如何在从服务器加载标签之前创建内容页面？如果同时接收到contents和tabs的数据，可以像UITableView一样使用reloadData更新dataSource
我的意思是标签是静态的并且是已知的。与每个选项卡相关的每个页面的内容将从服务器获取。因此，当我选择 tab1 时，将调用服务器以检索与 tab1 等相关的页面内容。
好的，我明白了。如果您有 5 个选项卡，则可以创建 5 个空视图控制器并在每个视图控制器的 viewWillAppear 处从服务器加载数据。您只需为每个视图控制器分配一个键或标识符，以使它们可以通过这些键从服务器获取数据

【解决方案2】：

我希望这段代码对你有用。

- (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);
 }

您可以根据需要设置滚动内容和菜单按钮。根据按钮单击更改视图。这里是上面代码的截图

【讨论】：

【解决方案3】：

我希望这对你有帮助。这没有更多的动画，但可以按预期工作。

您可以在此使用 CollectionView 水平滚动菜单选项作为 CollectionView 单元格。为了实现左右滑动，我们可以使用 UISwapeGuestureRecognizers 并且可以在页面之间滚动。

以下是我使用 ScrollableMenu 的 CollectionView 作为屏幕顶部的选项卡和使用 Container View 的菜单底部的页面来实现它的方法。

您可以下载此项目并通过以下链接查看有关实施的想法。

Horizontal Scrollable Menu

希望这对您有所帮助。这是用最新的 Swift 4.0 和 X-Code 9.2 实现的

快乐编码..

【讨论】：

【解决方案4】：

我编辑了@Shrikant K 的示例，使其适合 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)")
     }

【讨论】：