多功能UITableViewCell菜单

先上效果图

Mou icon

github地址

https://github.com/kingundertree/MultiFunctionCell

功能

  1. 支持定制UITableViewCell菜单,通过滑动UITableViewCell显示左右侧菜单选项
  2. 支持cell的重用,以及单个cell的菜单定制

实现机制

  1. 定制UITableViewCell,在UITableViewCell.contentView上添加UIScrollView作为主视图,并绑定UIPanGestureRecognizer手势
  2. 定义左右菜单视图,置于UIScrollView之下
  3. 通过UIPanGestureRecognizer的事件控制UIScrollView的frame实现菜单的显示和隐藏
  4. 定制UITableView,通过OverLayViewDelegate控制罩层的显示和隐藏

使用方法

UITableView

继承MultiFunctionTableView

self.tableList = [[MultiFunctionTableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
self.tableList.delegate = self;
self.tableList.dataSource = self;
self.tableList.rowHeight = 80;
[self.view addSubview:self.tableList];

Datasource的cellForRow方法中实现
HomeViewCell继承MultiFunctionCell即可,并设置cell.cellActionDelegate = self.tableList即可。其他都不用care了

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellIdentify = @"cell";
    HomeViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentify];
    if (!cell) {
        cell = [[HomeViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                   reuseIdentifier:cellIdentify
                               containingTableView:tableView
                                leftUtilityButtons:@[@"left1"]
                               rightUtilityButtons:@[@"right1",@"right2"]];
        cell.cellActionDelegate = self.tableList;
        [cell configCell:nil index:indexPath];
    }


    return cell;
}

XXMenuDemo,三栏式滑动菜单结构

先上效果图

Mou icon

github地址

https://github.com/kingundertree/XXMenuDemo

说明

左右滑动,显示左侧菜单。这种交互在2014年比较火,我最喜欢的实现效果是华住app。不过后台他也改成tab结构。

这个Demo实在左侧菜单的基础上,增加为支持左右侧菜单。并且支持主视图缩放效果。

后面还附上swift版本github项目。

主要基于手势控制,以及缩放动画实现。再以及工程的设计思路。

并且添加的手势滑动返回功能,见:http://kingundertree.github.io/2015/04/24/手势滑动返回/

功能

  1. 支持右滑,显示左侧菜单
  2. 支持左滑,显示右侧菜单
  3. 支持左右侧菜单滑动切换
  4. 支持手势滑动返回
  5. 支持滑动时,主视图平滑缩放效果

实现机制

  1. XXMenuVC基于viewController,add initWithRootViewController生成的PushBackNavigationController视图
  2. 赋予XXMenuVC给 self.window.rootViewController
  3. 在XXMenuVC add 左右菜单视图,并添加UITapGestureRecognizer、UIPanGestureRecognizer手势控制。
  4. XXMenuVC视图的移动控制KVO实现
  5. 基于手势控制调整主视图的frame和缩放。
  6. 通过XXMenuVC控制视图切换和左右菜单的交互

使用方法

目前,所有功能都已经集成到XXMenuViewController中,需要定制XXLeftMenuView、XXRightMenuView。

1.初始化

在AppDelegate中add主视图XXMenuVC,并设置XXMenuVC为变量

XXMainViewController *mainVC = [[XXMainViewController alloc] init];
PushBackNavigationController *nav = [[PushBackNavigationController alloc] initWithRootViewController:mainVC];
if (SYSTEM_VERSION_LESS_THAN(@"7.0")) {
    [[UIApplication sharedApplication] setStatusBarHidden:TRUE];
}
XXMenuVC = [[XXMenuViewController alloc] initWithRootVC:nav];
if (SYSTEM_VERSION_LESS_THAN(@"7.0")) {
    [[UIApplication sharedApplication] setStatusBarHidden:NO];
}

self.window.rootViewController = XXMenuVC;

2.设置左右菜单view

 leftMenuView = [[XXLeftMenuView alloc] initWithFrame:frame];
 rightMenuView = [[XXRightMenuView alloc] initWithFrame:frame];

3.显示隐藏左右菜单

- (void)showMenu:(BOOL)isLeftMenu;

4.设置初始化主视图

- (id)initWithRootVC:(UIViewController *)controller

5.左右菜单的操作事件,替换主视图

- (void)replaceRootVC:(UIViewController *)replaceVC isFromLeft:

6.XXMenuVC

主视图的所有交互通过XXMenuVC实现

[XXAppDelegate sharedAppDelegate].XXMenuVC

swift版本

github地址

xcode6.3 编译正常通过

只实现主要功能,包括手势控制和左右菜单显示和隐藏

https://github.com/kingundertree/XXMenuBySwiftDemo

手势滑动返回,多种实现方案

OC实现手势滑动控制viewCotroller 返回功能

先上效果图

Mou icon

github地址

https://github.com/kingundertree/pushBackDemo

主要功能

  1. 支持iOS5~8,滑动viewController,实现页面返回
  2. 支持背景缩放和视差平滑2种模式
  3. 支持单个页面和多个页面pop,支持页面返回后通知
  4. 单个viewController禁用手势

设计思路

  1. 继承UINavgationController,继承pushViewController方法。push的时候,依次调用[self capture],截取上一个viewController并保存
  2. UINavgationController的view上add GestureRecognizer,监听手势动作
  3. 手指右滑开始,将最新截图insertSubview: belowSubview:到当前view,并通过滑动距离,控制belowSubview的效果
  4. popViewControllerAnimated或者popToViewController: animated:后,移除对应的截图

使用方法

1.继承PushBackNavgationController

PushBackNavigationController *nav = [[PushBackNavigationController alloc] initWithRootViewController:MVC];
self.window.rootViewController = nav;

2.设置手势滑动效果,支持背景缩放和平滑

typedef enum {
    CaptureTypeWithView = 0,
    CaptureTypeWithWindow
}CaptureType; //截图区域选择

3.禁用某个页面手势

在需要控制的viewController,引入pushBackLock
[pushBackLock setDisableGestureForBack:self.navgationgationController disable:YES]
如果禁用所有手势,则不继承PushBackNavgationController即可

拦截iOS7 滑动返回手势

效果图

见iOS7 系统自带原生手势滑动返回,但是控制区域在左侧10px位置,本demo支持viewController全部区域
Mou icon

github地址

https://github.com/kingundertree/ExtensionNavGesForiOS7

主要功能

  1. 模拟iOS手势滑动返回效果
  2. 只支持iOS7 及以上版本
  3. 此方法比较简单,而且系统提供的手势滑动效果更加细腻。但是采用NSRunloop截取系统事件,使用需谨慎。

实现思路

  1. iOS7 开始,系统提供手势滑动返回功能,但是操作区域有限
  2. 设法截取系统手势事件,UINavgationController的interactivePopGestureRecognizer
  3. 自定义UIPanGestureRecognizer并add到UINavgationController的view上
  4. 截取interactivePopGestureRecognizer的target和action
  5. 把interactivePopGestureRecognizer的target和action,赋给自定义的手势上即可

使用方法

  1. 继承ExtensionNav即可

效果图

见iOS7 系统自带原生手势滑动返回,但是控制区域在左侧10px位置,本demo支持viewController全部区域
Mou icon

github地址

https://github.com/kingundertree/TransitionPopForiOS7-

主要功能

  1. 模拟iOS手势滑动返回效果
  2. 只支持iOS7 及以上版本

实现思路

  1. 设法截取系统手势事件,UINavgationController的interactivePopGestureRecognizer
  2. 通过ISO7提供的转场动画事件NavigationInteractiveTransition,创建新的action
  3. 在action中计算progress,分别实现updateInteractiveTransition、finishInteractiveTransition、cancelInteractiveTransition事件即可

使用方法

  1. 继承ExtensionNav即可

swift 语言实现手势滑动返回效果

github地址

效果同上,采用swift语言重新实现。

https://github.com/kingundertree/PushBackBySwiftDemo