MCCSframework教程(三): ScrollMenu

MCCSframework 除了提供 BaseVC、SubController、BaseController、NavBarVC 等核心类外，还提供了大量工具类、分类、宏和实用函数，在前面的教程中，我们已经使用过其中一些了。今天要介绍的是一个和 UI 相关的组件 ScrollMenu。

ScrollMenu 有点像 TabBar，允许用户通过点击按钮在多个 ViewController 之间切换，并自带转换动画。接下来，让我们演示如何实现类似这样的效果：

ScrollMenu 不能直接使用，因为它没有界面。要使用它，需要你对它进行子类化，并提供必要的 UI。下面我们演示如何对 ScrollMenu 进行子类化，并通过 xib 为它提供 UI。

创建自定义 UIView

首先 New File，新建一个 UIView 子类 RecipeTabBar。New File -> View，新建一个 xib 文件 RecipeTabBar.xib。

打开 xib 文件，设置 File’s Owner 为 RecipeTabBar。在 Outline 窗口中选中 View，设置 Size 为 freedom。然后在尺寸面板中，设置大小为 414*60。

拖入一个 button，设置 Pin 约束为:

注意这几个约束都是相对于 superview，而不能相对于 Safe Area。否则自动布局无法正确计算按钮 frame。

然后设置其宽度为 superView 的一半，文字设置为“今日”，颜色设置为橘红色。效果如下图所示：

然后在 button 下方放入一个 UIView，设置其宽度等于 80，高度等于 2，顶部对齐 button 的底部，水平中对齐 Button ：

效果如下所示：

重复同样的步骤，设置“本周”按钮，最终效果如下：

打开助手编辑器，创建对应的 IBOutlet 如下：

@property (weak, nonatomic) IBOutlet UIButton *btToday;
@property (weak, nonatomic) IBOutlet UIView *todayDashLine;
@property (weak, nonatomic) IBOutlet UIButton *btThisWeek;
@property (weak, nonatomic) IBOutlet UIView *thisWeekDashLine;

然后为创建一个 IBAction，并关联到两个按钮 TouchUpInside 事件：

- (IBAction)onButton:(id)sender {
}

继承 ScrollMenu

打开 RecipeTabBar.h，继承 ScrollMenu:

#import <MCCSframework/ScrollMenu.h>

@interface RecipeTabBar : ScrollMenu

打开 RecipeTabBar.m，添加两个方法：

- (NSArray<UIButton*>*)buttons {
    
    return @[_btToday,_btThisWeek];
}
-(NSArray<UIView*>*)dashlines{
    return @[_todayDashLine,_btThisWeek];
}

这两个方法实际上覆盖了父类 ScrollMenu 中的方法。第一个方法返回一个数组，用于包含所有按钮；第二个方法也返回一个数组，用于包含所有按钮下面的短线。

然后这样实现 onButton 方法：

- (IBAction)onButton:(UIButton*)sender {
	[self switchTo:[self.buttons indexOfObject:sender]];
}

switchTo 方法来自于父类 ScrollMenu。我们向 switchTo 方法传递了按钮在 buttons 数组中的索引。

使用 RecipeTabBar

新建 ViewController，勾上 Also create XIB file。在画布中，拖入一个 UIView，在 Identity 面板中将 Class 设置为 ViewController。然后为它创建一个 IBOutlet：

@property (weak, nonatomic) IBOutlet RecipeTabBar *menuBar;

别忘记导入我们的 RecipeTabBar 类：

#import "RecipeTabBar.h"

让 ViewController 实现 ScrollMenuDelegate 协议：

@interface CanteenRecipeVC ()<ScrollMenuDelegate>

然后在 viewDidLoad 方法中：

_menuBar.delegate = self;
[_menuBar switchTo:0];

ScrollMenuDelegate 协议有两个方法需要实现：

// MARK: - ScrollMenuDelegate
-(UIView*)containerViewInScrollMenu:(ScrollMenu *)menu{
    return self.contentView;
}
-(UIViewController*)scrollMenu:(ScrollMenu *)menu controllerAtIndex:(NSInteger)index{
    switch (index) {
        case 0:{
            UIViewController* vc = [UIViewController new];
            vc.view.backgroundColor = [UIColor blueColor];
            return vc;
        }
        default:{
            UIViewController* vc = [UIViewController new];
            vc.view.backgroundColor = [UIColor blackColor];
            return vc;
        }
    }
}

这时候报错，contentView 属性未定义。我们需要定义这个属性。打开 ViewController.xib，拖入一个 UIView，将它布局到 RecipeTabBar 下方，占据剩余的空间。

创建一个 IBOutlet 属性并将它绑定到这个属性：

@property (weak, nonatomic) IBOutlet UIView *contentView;

当 RecipeTabBar 上的按钮被点击，scrollMenu 方法被调用，根据 index 参数，我们知道是 buttons 数组中的第几个按钮被点击，从而显示不同颜色的UIViewController。

containerViewInScrollMenu 方法返回的 UIView 将作为 UIViewController 的容器，不同颜色的 UIViewController 将在这个 UIView 上显示。

运行程序，点击“今日”或“本周”按钮，contentView 中会显示蓝色或黑色控制器的内容，并自带一个左右切换的动画效果：

此外，ScrollMenu 也支持手势，你可以用滑动手势代替按钮操作。