PageMenu——灵活可定制的分页菜单控制器

⚠️ 该库已不再维护！

🎉 🎉 🎉 Surprise ！ I'm back！ 本期给大家带来的第三方框架是一个分页菜单控制器——PageMenu。该框架同时支持 Swift 和 Objective-C，使用起来也是极其方便，下面一起来跟我看看吧!

描述

一个完全可定制、非常灵活的分页菜单控制器，由位于滚动视图内的其他视图控制器构建，允许用户在任何类型的视图控制器之间切换，触发方式类似于Spotify，Windows Phone 和 Instagram 的中的轻击或滑动手势效果。

Similar to Spotify

PageMenuScreen2

Similar to Windows Phone

PageMenuScreen2

Similar to Instagram segmented control

PageMenuDemoScreen6

安装

CocoaPods

PageMenu 支持通过 CocoaPods 安装，⚠️ 此方式仅支持 Swift 语言。

将以下代码添加到你的 Podfile 文件中即可安装:

pod 'PageMenu'

Carthage

PageMenu 也支持通过 Carthage 安装。 添加以下代码到 Cartfile 并且按照 该指示 执行.

github "uacaps/PageMenu"

手动安装

用于 PageMenu 所需的类文件位于此项目根目录的 Classes 目录下：

  • CAPSPageMenu.swift

如何使用 PageMenu

首先，你必须创建一个视图控制器，该控件要作为页面菜单的容器。 该视图控制器可以是一个有独立 xib 文件、并将其 xib 文件放在 Storyboard 中的视图控制器。 在此之后，您将通过下面列出的几个简单的步骤，以便让所有的功能正常运行。

1. 将安装部分中列出的文件添加到项目中

2. 在容器视图控制器中添加 CAPSPageMenu 属性

Swift

var pageMenu : CAPSPageMenu?

Objective-C

@property (nonatomic) CAPSPageMenu *pagemenu;

3. 在视图控制器的 viewDidLoad 方法中添加初始化代码

Swift

// Array to keep track of controllers in page menu
var controllerArray : [UIViewController] = []

// Create variables for all view controllers you want to put in the 
// page menu, initialize them, and add each to the controller array. 
// (Can be any UIViewController subclass)
// Make sure the title property of all view controllers is set
// Example:
var controller : UIViewController = UIViewController(nibName: "controllerNibName", bundle: nil)
controller.title = "SAMPLE TITLE"
controllerArray.append(controller)

// Customize page menu to your liking (optional) or use default settings by sending nil for 'options' in the init
// Example:
var parameters: [CAPSPageMenuOption] = [
    .MenuItemSeparatorWidth(4.3), 
    .UseMenuLikeSegmentedControl(true), 
    .MenuItemSeparatorPercentageHeight(0.1)
]

// Initialize page menu with controller array, frame, and optional parameters
pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: CGRectMake(0.0, 0.0, self.view.frame.width, self.view.frame.height), pageMenuOptions: parameters)

// Lastly add page menu as subview of base view controller view
// or use pageMenu controller in you view hierachy as desired
self.view.addSubview(pageMenu!.view)

Objective-C

// 1. 该数组用于存放 PageMenu 所有需要包含的视图控制器
NSMutableArray *controllerArray = [NSMutableArray array];

// 2. 创建并初始化你想要放进 PageMenu 中的所有视图控制器的实例对象，并将其添加到控制器数组中。
//（可以是任何 UIViewController 的子类对象）
// 请确保设置所有视图控制器的标题属性。
// 示例代码:
UIViewController *controller = [UIViewController alloc] initWithNibname:@"controllerNibnName" bundle:nil];
controller.title = @"SAMPLE TITLE";
[controllerArray addObject:controller];

// 3. PageMenu 偏好设置，将所有参数封装到一个 NSDictionary 字典中
// 根据你的喜好（可选）自定义页面菜单，或在初始化时通过发送 nil 给 'options' 选项使用默认设置
// 示例代码:
NSDictionary *parameters = @{CAPSPageMenuOptionMenuItemSeparatorWidth: @(4.3),
                             CAPSPageMenuOptionUseMenuLikeSegmentedControl: @(YES),
                             CAPSPageMenuOptionMenuItemSeparatorPercentageHeight: @(0.1)
                             };

// 4. 通过控制器数组、尺寸和可选参数初始化 PageMenu
_pageMenu = [[CAPSPageMenu alloc] initWithViewControllers:controllerArray frame:CGRectMake(0.0, 0.0, self.view.frame.size.width, self.view.frame.size.height) options:parameters];

// 5. 最后，将 PageMenu 作为容器视图控制器的子视图添加进来
// 或根据需要将 pageMenu 控制器添加到视图的层次结构中，
[self.view addSubview:_pageMenu.view];

4. 可选 - 协议方法

如果需要使用委托方法，首先将 PageMenu 的委托设置为父视图控制器（就是让容器视图控制器遵守并实现 PageMenu 的委托协议 ）。

Swift

// Optional delegate 
pageMenu!.delegate = self

Objective-C

// 可选委托协议 
_pageMenu.delegate = self;

之后，你就可以在父视图控制器中实现以下委托方法：

Swift

func willMoveToPage(controller: UIViewController, index: Int){}

func didMoveToPage(controller: UIViewController, index: Int){}

Objective-C

// 可选委托协议 
- (void)willMoveToPage:(UIViewController *)controller index:(NSInteger)index {}

- (void)didMoveToPage:(UIViewController *)controller index:(NSInteger)index {}

5. 🎉 你现在应该已经会使用 PageMenu 了!!

自定义设置

你可以按照需求用各种方法来自定义 PageMenu。并且在不久的将来，更多的定制方法也会被实现以确保 PageMenu 适应你的 APP 设计。这些都将是 CAPSPageMenu 在你的容器视图控制器中可修改的属性。

以下是每个类别提供的属性：

1) 颜色

  • Page Menu 滚动视图后面的背景色可融合到视图控制器背景中（Scroller View 的背景色） 
    viewBackgroundColor (UIColor)
  • 滚动菜单背景颜色。默认值：[UIColor blackColor] 
    scrollMenuBackgroundColor (UIColor)
  • 选择指示器的颜色。默认值：[UIColor whiteColor] 
    selectionIndicatorColor (UIColor)
  • 当前选中的菜单项的标签颜色。默认值：[UIColor whiteColor] 
    selectedMenuItemLabelColor (UIColor)
  • 未选中的菜单项标签颜色。默认为 [UIColor lightGrayColor] 
    unselectedMenuItemLabelColor (UIColor)
  • 菜单项分隔符颜色（用于分段控件样式）。默认为 [UIColor lightGrayColor] 🚫 测了半天也没看见分隔符在哪 😂 
    menuItemSeparatorColor (UIColor)
  • 菜单底部分割线颜色（页面菜单与视图之间的水平分割线）。默认值：[UIColor whiteColor] 
    bottomMenuHairlineColor (UIColor)

2. Dimensions（尺寸）

  • 滚动菜单高度，默认值：34.0 
    menuHeight (CGFloat)
  • 滚动菜单边距（第一个菜单项之前的距离，以及最后一个菜单项之后的距离以及菜单项之间的距离）默认值：15.0 
    menuMargin (CGFloat)
  • 滚动菜单项宽度，默认值：111.0
menuItemWidth (CGFloat)
  • 选择指示器高度，默认值：3.0
selectionIndicatorHeight (CGFloat)

3. Segmented Control（分段控制器）

  • 将 PageMenu 作为分段控件使用。默认值：NO 
    useMenuLikeSegmentedControl (Bool)
  • 菜单项分隔符宽度（以像素为单位） 
    menuItemSeparatorWidth (CGFloat)
  • 菜单项分隔符高度，以菜单高度的百分比表示。默认值：0.5 
    menuItemSeparatorPercentageHeight (CGFloat)
  • 菜单项分隔符设置圆角。默认值：NO 
    menuItemSeparatorRoundEdges (Bool)

4. 其他设置

  • 菜单项标题文本字体：默认值：[UIFont systemFontOfSize:15.0] 
    menuItemFont (UIFont)
  • 添加菜单底部分割线。默认值：YES 
    addBottomMenuHairline (Bool)
  • 菜单项宽度基于标题文字宽度（标题有多宽，菜单项就有多宽）。默认值：NO 
    menuItemWidthBasedOnTitleTextWidth (Bool)
  • 禁用/启用滚动视图控制器的水平反弹。默认值：YES 
    enableHorizontalBounce (Bool)
  • 隐藏/取消隐藏顶部页面菜单栏。默认值：NO 
    hideTopMenuBar (Bool)
  • 如果菜单中的菜单项不跨越整个宽度就居中（目前不支持菜单项宽度基于标题）。默认值：NO 
    centerMenuItems (Bool)
  • 在菜单项目中滚动动画持续时间，以毫秒为单位，默认值：500（即0.5秒） 
    scrollAnimationDurationOnMenuItemTap (Int)

使用 PageMenu 的 APP

Please let me know if your app in the AppStore uses this library so I can add your app to the list of apps featuring PageMenu.

Future Work

  • Screen rotation support
  • Objective-C version
  • Infinite scroll option / Wrap items
  • Carthage support
  • More customization options

Demo

示例一

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIViewController *viewController1 = [[UIViewController alloc] init];
    viewController1.title = @"蔬菜";
    viewController1.view.backgroundColor = [UIColor robinEggColor];
    
    UIViewController *viewController2 = [[UIViewController alloc] init];
    viewController2.title = @"水果";
    viewController2.view.backgroundColor = [UIColor easterPinkColor];
    
    NSArray *controllerArray = @[viewController1, viewController2];
    
    NSDictionary *parameters = @{
                                
             // 【1.0】颜色
             // 【1.1】Scroller View 的背景色
//             CAPSPageMenuOptionViewBackgroundColor:[UIColor whiteColor],
             // 【1.2】设置滚动菜单背景颜色
             CAPSPageMenuOptionScrollMenuBackgroundColor:[UIColor beigeColor],
             // 【1.3】选择指示器颜色（底部菜单线颜色）
             CAPSPageMenuOptionSelectionIndicatorColor:[UIColor turquoiseColor],
             // 【1.4】所选菜单项标签文本颜色
             CAPSPageMenuOptionSelectedMenuItemLabelColor:[UIColor turquoiseColor],
             // 【1.5】未选择的菜单项标签文本颜色
             CAPSPageMenuOptionUnselectedMenuItemLabelColor:[UIColor lightGrayColor],
             // 【1.6】菜单项分隔符颜色（用于分段控件样式）
             CAPSPageMenuOptionMenuItemSeparatorColor:[UIColor grapefruitColor],
             // 【1.7】底部菜单线颜色
//             CAPSPageMenuOptionBottomMenuHairlineColor:[UIColor coralColor],
             
             // 【2.0】尺寸
             // 【2.1】滚动菜单高度，默认值：34.0
//             CAPSPageMenuOptionMenuHeight: @(40.0),
             // 【2.2】滚动菜单边距,默认值：15.0
//             CAPSPageMenuOptionMenuMargin:@(10),
             // 【2.3】滚动菜单项宽度，默认值：111.0
//             CAPSPageMenuOptionMenuItemWidth:@(150),
             // 【2.4】选择指示器高度，默认值：3.0
//             CAPSPageMenuOptionSelectionIndicatorHeight:@(5),
             
             // 【3.0】Segmented Control
             // 【3.1】将 PageMenu 作为分段控件使用
             CAPSPageMenuOptionUseMenuLikeSegmentedControl:@(YES),
             // 【3.2】菜单项分隔符宽度（以像素为单位）
//             CAPSPageMenuOptionMenuItemSeparatorWidth:@(5.0),
             // 【3.3】菜单项分隔符高度，以菜单高度的百分比表示
//             CAPSPageMenuOptionMenuItemSeparatorPercentageHeight:@(0.5),
             // 【3.4】菜单项分隔符具有圆形边
//             CAPSPageMenuOptionMenuItemSeparatorRoundEdges:@(YES),
//
             
             // 【4.0】其他
             // 【4.1】菜单项标题文本字体
//             CAPSPageMenuOptionMenuItemFont:[UIFont systemFontOfSize:17.0f],
             // 【4.2】添加菜单底部分割线
             CAPSPageMenuOptionAddBottomMenuHairline:@(NO),
//             // 【4.3】菜单项宽度基于标题文字宽度
//             CAPSPageMenuOptionMenuItemWidthBasedOnTitleTextWidth:@(YES)
             // 【4.4】禁用/启用滚动视图控制器的水平反弹
             CAPSPageMenuOptionEnableHorizontalBounce:@(NO),
//             // 【4.5】隐藏/取消隐藏顶部菜单栏
//             CAPSPageMenuOptionHideTopMenuBar:@(YES)
             // 【4.6】菜单中的菜单项如果不跨越整个宽度就居中
//             CAPSPageMenuOptionCenterMenuItems:@(YES)
             
                                 };
    
    CGRect pageMenuRect = CGRectMake(0.0,
                                     0.0,
                                     self.view.frame.size.width,
                                     self.view.frame.size.height);
    _pageMenu = [[CAPSPageMenu alloc] initWithViewControllers:controllerArray
                                                        frame:pageMenuRect
                                                      options:parameters];
    
    [self.view addSubview:_pageMenu.view];
    
}

运行效果：

示例二

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.PageContainerView addSubview:self.pageMenu.view];
}

#pragma mark - Custom Accessors 

// 缴费明细列表
- (HQLInsurancePaymentListViewController *)leftListViewController {
    if (!_leftListViewController) {
        _leftListViewController = [[HQLInsurancePaymentListViewController alloc] initWithNibName:NSStringFromClass([HQLInsurancePaymentListViewController class]) bundle:nil];
        _leftListViewController.title = @"缴费明细";
        _leftListViewController.delegate = self;
    }
    return _leftListViewController;
}

// 支出明细列表
- (HQLInsurancePaymentListViewController *)rightListViewController {
    if (!_rightListViewController) {
        _rightListViewController = [[HQLInsurancePaymentListViewController alloc] initWithNibName:NSStringFromClass([HQLInsurancePaymentListViewController class]) bundle:nil];
        _rightListViewController.title = @"支出明细";
    }
    return _rightListViewController;
}

// 分页菜单控制器
- (CAPSPageMenu *)pageMenu {
    if (!_pageMenu) {
        NSArray *controllerArray = @[ self.leftListViewController,
                                      self.rightListViewController ];
        
        NSDictionary *parameters = @{
                                     
             // 【1.2】设置滚动菜单背景颜色
             CAPSPageMenuOptionScrollMenuBackgroundColor:[UIColor whiteColor],
             // 【1.3】选择指示器颜色（底部菜单线颜色）
             CAPSPageMenuOptionSelectionIndicatorColor:HQLThemeColor,
             // 【1.4】所选菜单项标签文本颜色
             CAPSPageMenuOptionSelectedMenuItemLabelColor:HQLThemeColor,
    
             // 【2.0】尺寸
             // 【2.1】滚动菜单高度，默认值：34.0
             CAPSPageMenuOptionMenuHeight: @(40.0),
             // 【2.2】滚动菜单边距,默认值：15.0
//             CAPSPageMenuOptionMenuMargin:@(10),
             // 【2.3】滚动菜单项宽度，默认值：111.0
//             CAPSPageMenuOptionMenuItemWidth:@(150),
             // 【2.4】选择指示器高度，默认值：3.0
//             CAPSPageMenuOptionSelectionIndicatorHeight:@(5),
             
             // 【3.0】Segmented Control
             // 【3.1】将 PageMenu 作为分段控件使用
             CAPSPageMenuOptionUseMenuLikeSegmentedControl:@(YES),

             
             // 【4.0】其他
             // 【4.1】菜单项标题文本字体
//             CAPSPageMenuOptionMenuItemFont:[UIFont systemFontOfSize:17.0f],
             // 【4.2】添加菜单底部分割线
             CAPSPageMenuOptionAddBottomMenuHairline:@(NO),
             //             // 【4.3】菜单项宽度基于标题文字宽度
//             CAPSPageMenuOptionMenuItemWidthBasedOnTitleTextWidth:@(YES)
             // 【4.4】禁用/启用滚动视图控制器的水平反弹
             CAPSPageMenuOptionEnableHorizontalBounce:@(NO),
                                     };
        
        CGRect pageMenuRect = self.PageContainerView.bounds;
        _pageMenu = [[CAPSPageMenu alloc] initWithViewControllers:controllerArray
                                                            frame:pageMenuRect
                                                          options:parameters];
    }
    return _pageMenu;
}

参照运行效果：

其他框架

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,902评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,037评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,978评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,867评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,763评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,104评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,565评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,236评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,379评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,034评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,637评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2赞 341

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,982评论 4赞 60
  • 现在治疗静脉曲张的有效方式是什么？
    静脉曲张是目前老少的一大难题，随着静脉曲张的发病率逐渐年轻化，很多的上班族以及在校学生也都遭到了静脉曲张的毒手。那...
    侠名_b9ed阅读 221评论 0赞 0
  • 靠谱的不会是运气，只能是实力
    你的好运气一定离不开你的实力，就如果子还没成熟前离开大树，必然会是有型无实，空有其表最后只能看着它一点点腐烂。 我...
    风妍浅浅阅读 463评论 0赞 1
  • 64 不是攒够时间就能成事
    有一天，畅销书《异类》的作者格拉德威尔告诉你：“人们眼中的天才之所以卓越非凡，并非天资超人一等，而是付出了持续不断...
    TS小西阅读 144评论 1赞 0