简单的仿Path风格菜单的实现
2012-10-09 16:38
274 查看
刚开始只是在顶部导航栏添加两个按钮,用来控制主屏的左右移动。
并且是通过点击按钮修改button的tag来记录当前屏幕展示的状态,有点挫。
后来整理了下,设置一个状态变量:
通过屏幕状态变量来控制屏幕的左右滑动:
当完成这样的功能后,我在模拟器上跑了下,觉得还行。不过在真机跑的时候,我习惯用拇指来滑动,而不是用导航栏的按钮。
当修改为可以通过手指滑屏后,又发现太容易滑了,有点影响用户体验,所以在移动过程先尝试检测下用户是否真的想滑屏:
![](http://img.my.csdn.net/uploads/201210/09/1349772274_8512.png)
![](http://img.my.csdn.net/uploads/201210/09/1349772283_5862.png)
![](http://img.my.csdn.net/uploads/201210/09/1349772291_9132.png)
完整的代码参见:https://gist.github.com/3857426
- (void)setupNavBar { _navBar = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.middleView.frame.size.width, 44)]; self.navBar.backgroundColor = [UIColor blueColor]; [self.middleView addSubview:self.navBar]; UIButton *leftNavBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; leftNavBtn.frame = CGRectMake(10, 0, 44, 44); [self.navBar addSubview:leftNavBtn]; [leftNavBtn setTitle:@"Left" forState:UIControlStateNormal]; [leftNavBtn addTarget:self action:@selector(leftNavBtnDidClick:) forControlEvents:UIControlEventTouchUpInside]; UIButton *rightNavBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; rightNavBtn.frame = CGRectMake(self.navBar.frame.size.width - 10 - 44, 0, 44, 44); [self.navBar addSubview:rightNavBtn]; [rightNavBtn setTitle:@"Right" forState:UIControlStateNormal]; [rightNavBtn addTarget:self action:@selector(rightNavBtnDidClick:) forControlEvents:UIControlEventTouchUpInside]; }
并且是通过点击按钮修改button的tag来记录当前屏幕展示的状态,有点挫。
后来整理了下,设置一个状态变量:
typedef enum _screenStateType { kNormalState = 0, kLeftState, // Show the left-view kRightState, // Show the right-view kDriftingState // Drifting } ScreenStateType;
通过屏幕状态变量来控制屏幕的左右滑动:
#pragma mark - Slide to Left or Right #define LEFT_SLIDE_OFFSET 260.0f #define RIGHT_SLIDE_OFFSET (-260.0f) - (void)leftNavBtnDidClick:(UIButton *)btn { if (kNormalState == self.screenState) { [self slideFromeState:self.screenState toState:kLeftState]; } else { [self slideFromeState:self.screenState toState:kNormalState]; } } - (void)rightNavBtnDidClick:(UIButton *)btn { if (kNormalState == self.screenState) { [self slideFromeState:self.screenState toState:kRightState]; } else { [self slideFromeState:self.screenState toState:kNormalState]; } } - (void)slideFromeState:(ScreenStateType)oState toState:(ScreenStateType)dState { if (self.isSliding) return ; self.isSliding = YES; __block CGRect rect = self.middleView.frame; rect.origin.x = 0.0f; id completionBlk = nil; switch (oState) { case kNormalState: if (kLeftState == dState) { self.rightView.hidden = YES; rect.origin.x = LEFT_SLIDE_OFFSET; } else if (kRightState == dState) { self.leftView.hidden = YES; rect.origin.x = RIGHT_SLIDE_OFFSET; } break; case kLeftState: case kRightState: if (kNormalState == dState) { completionBlk = ^(BOOL finished) { self.leftView.hidden = NO; self.rightView.hidden = NO; }; } break; case kDriftingState: if (kLeftState == dState) { rect.origin.x = LEFT_SLIDE_OFFSET; } else if (kRightState == dState) { rect.origin.x = RIGHT_SLIDE_OFFSET; } else if (kNormalState == dState) { completionBlk = ^(BOOL finished) { self.leftView.hidden = NO; self.rightView.hidden = NO; }; } break; default: break; } id animationBlk = ^{ self.middleView.frame = rect; }; [UIView animateWithDuration:0.3f animations:animationBlk completion:completionBlk]; self.screenState = dState; self.isSliding = NO; }
当完成这样的功能后,我在模拟器上跑了下,觉得还行。不过在真机跑的时候,我习惯用拇指来滑动,而不是用导航栏的按钮。
当修改为可以通过手指滑屏后,又发现太容易滑了,有点影响用户体验,所以在移动过程先尝试检测下用户是否真的想滑屏:
#pragma mark - Finger Touch - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; CGPoint fingerPoint = [touch locationInView:self.middleView]; if ([self.middleView pointInside:fingerPoint withEvent:nil]) { fingerPoint = [touch locationInView:self.view]; self.lastFingerX = fingerPoint.x; } } - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; CGPoint fingerPoint = [touch locationInView:self.view]; // The user really wants to move the screen ? if (!self.canDrag && abs(fingerPoint.x - self.lastFingerX) > 30) { self.canDrag = YES ; self.lastFingerX = fingerPoint.x; } if (!self.canDrag) return ; CGRect rect = self.middleView.frame; rect.origin.x += (fingerPoint.x - self.lastFingerX); rect.origin.x = (rect.origin.x > LEFT_SLIDE_OFFSET) ? LEFT_SLIDE_OFFSET : rect.origin.x; rect.origin.x = (rect.origin.x < RIGHT_SLIDE_OFFSET) ? RIGHT_SLIDE_OFFSET : rect.origin.x; self.middleView.frame = rect; if (rect.origin.x > 0) { self.rightView.hidden = YES; self.leftView.hidden = NO; } else if (rect.origin.x < 0) { self.leftView.hidden = YES; self.rightView.hidden = NO; } else { self.leftView.hidden = self.rightView.hidden = NO; } self.lastFingerX = fingerPoint.x; } - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { self.canDrag = NO; CGFloat boundary = 50.0f; CGRect rect = self.middleView.frame; ScreenStateType lastScreenState = self.screenState; self.screenState = kDriftingState; switch (lastScreenState) { case kNormalState: if (rect.origin.x < (0 - boundary)) { [self slideFromeState:self.screenState toState:kRightState]; } else if (rect.origin.x > (0 + boundary)) { [self slideFromeState:self.screenState toState:kLeftState]; } else { [self slideFromeState:self.screenState toState:kNormalState]; } break; case kLeftState: if (rect.origin.x < LEFT_SLIDE_OFFSET - boundary) { [self slideFromeState:self.screenState toState:kNormalState]; } else { [self slideFromeState:self.screenState toState:kLeftState]; } break; case kRightState: if (rect.origin.x > RIGHT_SLIDE_OFFSET + boundary) { [self slideFromeState:self.screenState toState:kNormalState]; } else { [self slideFromeState:self.screenState toState:kRightState]; } break; default: [self slideFromeState:self.screenState toState:kNormalState]; break; } }
![](http://img.my.csdn.net/uploads/201210/09/1349772274_8512.png)
![](http://img.my.csdn.net/uploads/201210/09/1349772283_5862.png)
![](http://img.my.csdn.net/uploads/201210/09/1349772291_9132.png)
完整的代码参见:https://gist.github.com/3857426
相关文章推荐
- jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单
- jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单
- Android 实现Path2.0中绚丽的的旋转菜单
- JS实现仿Windows7风格的网页右键菜单效果代码
- 两种简单实现菜单高亮显示的JS类代码
- jQuery实现简单的列表式导航菜单效果代码
- JS+css滑动菜单简单实现
- 一个简单的实现不同权限的用户登录后看到不同的菜单设计的数据库表清单
- Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换
- JS简单实现多级Select联动菜单效果代码
- 基于JQuery的简单实现折叠菜单代码
- 网页设计,本页面内左侧菜单导航右侧显示内容简单实现方法
- Android简单实现列表菜单--PopupMenu的简单使用。
- 用php实现简单的滑动菜单
- iOS实现简单的二级菜单效果
- 简单源生JS实现自定义右键菜单效果
- DrawerLayout简单使用之实现侧滑菜单(来自于support V4包)
- jQuery实现带幻灯的tab滑动切换风格菜单代码
- MaterialDesign设计风格之自定义toolbar的简单实现
- ajax的简单实现:级联菜单