iOS-小demo–简易的抽屉效果封装

芙蓉落尽天涵水,日暮沧波起!<藤藤蛇>

效果图:

简单侧滑抽屉效果封装.gif

简单的思路说明:

想要的效果就是, 向右滑动屏幕的时候 左侧的视图(绿色)会随着拉动出现, 同时会有一个透明度的改变! 实现思路大致就是要在最开始的界面(View)上添加平移手势, 根据手势滑动的偏移量来控制左侧(绿色)视图的位置, 同时改变在蓝色上面一层的遮挡视图(红色)的透明度! 当绿色的菜单栏回去的时候隐藏遮挡的(红色)视图. 当绿色菜单在的时候, 点击红色视图,同样会收起绿色菜单!只需要在遮挡的红色视图上添加点击手势! 并执行响应的操作即可.

上代码:

定义的宏:

// 屏幕的宽 高#define kSCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height#define kSCREEN_WIDTH [UIScreen mainScreen].bounds.size.width// 菜单宽度#define MENU_WIDTH (kSCREEN_WIDTH * 1 / 3)// 遮挡视图的颜色#define MASK_COLOR [UIColor redColor]// 遮挡的最大透明度#define MASK_MAX_ALPHA 0.5

定义的相关属性

// 容纳 侧滑 的视图控制器@property (nonatomic, strong) UIViewController *containerVC;// 滑动时候 遮盖 在视图控制器上的一层 View@property (nonatomic, strong) UIView *maskView;

1: 初始化方法 这里用单例方法 一般 App 只有一个设置的侧滑视图

// 构造左侧  整体的 View 整个工程只有一个 侧滑  这里我用了 Xib 主要是容易添加一些想要的效果+ (instancetype)shareSliderMenuView{static PP_SlideMenuView *slideMenuView = nil;static dispatch_once_t onceToken;dispatch_once(&onceToken, ^{slideMenuView = [[NSBundle mainBundle] loadNibNamed:@\"PP_SlideMenuView\" owner:self options:nil].firstObject;slideMenuView.frame = CGRectMake(- MENU_WIDTH, 0, MENU_WIDTH, kSCREEN_HEIGHT);});return slideMenuView;}

2: 绑定控制器确定在哪里展示 主要是为了封装

// 绑定控制器 并进行相关的设置- (void)bindWithViewController:(UIViewController *)rootVc{__weak UIViewController *tempVc = rootVc;self.containerVC = tempVc;// 设置为视图的一个属性方便在不同地方使用self.isMenuViewHidden = YES;// 记录开始状态为 隐藏菜单视图// 创建遮挡的 Viewself.maskView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];_maskView.backgroundColor = MASK_COLOR;_maskView.hidden = YES; // 只有在滑动菜单出现时候才会  出现 MaskView 遮挡[_containerVC.view addSubview:_maskView]; // 遮挡的 加到 控制器 view 上// 使用 KVO 监控 菜单View 的位置变化  然后改变遮挡视图的 透明度[self addObserver:self forKeyPath:@\"frame\" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];// 给视图控制器上的  View 添加平移 手势 以及 遮挡的 MaskView 加点击手势[self addOurGestureRecognizer];}``````code#pragma mark ------>> 给视图控制器上的  View 添加平移 手势 以及 遮挡的 MaskView 加点击手势 <<------- (void)addOurGestureRecognizer{UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panContainViewAction:)]; // 右滑动时候  出来菜单pan.delegate = self;[_containerVC.view addGestureRecognizer:pan];UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapHiddenMenuAction:)]; // 要是菜单在  点击 MaskView 隐藏菜单[_maskView addGestureRecognizer:tap];}#pragma mark ------>> 滑动视图控制器的 View 的时候触发方法 <<------- (void)panContainViewAction:(UIPanGestureRecognizer *)pan{// 偏移量CGPoint offSet = [pan translationInView:_containerVC.view];// 平移进行时候if (pan.state == UIGestureRecognizerStateBegan || pan.state == UIGestureRecognizerStateChanged){if (offSet.x > 0)//向右滑动{if (self.frame.origin.x == 0){return;}CGFloat tempX = self.frame.origin.x + offSet.x;// 算出更新的 xif (tempX <= 0 ){// 小于 0 就随着拖动移动就好self.frame = CGRectMake(tempX, 0, MENU_WIDTH, kSCREEN_HEIGHT);}else{// 都出来之后 就让它完全展示就好  别滑到太靠右地方self.frame = CGRectMake(0, 0, MENU_WIDTH, kSCREEN_HEIGHT);}}else{// 向左滑动CGFloat tempX = self.frame.origin.x + offSet.x;// 算出更新的 xself.frame = CGRectMake(tempX, 0, MENU_WIDTH, kSCREEN_HEIGHT);}}else{// 在这里判断要 显示还是隐藏if (self.frame.origin.x >= - MENU_WIDTH * 0.5){[self inputOfSightMenuView];}else{[self outOfSightMenuView];}}// 清除偏移量[pan setTranslation:(CGPointZero) inView:_containerVC.view];//self.maskView.frame = CGRectMake(CGRectGetMaxX(self.frame), 0, kSCREEN_WIDTH, kSCREEN_HEIGHT);}// 点击遮挡  收起菜单- (void)tapHiddenMenuAction:(UITapGestureRecognizer *)tap{[self outOfSightMenuView];}#pragma mark ------>> MenuView 视图 移出 或者 移进 视线  <<------// 放到视线之外- (void)outOfSightMenuView{[UIView animateWithDuration:0.2 animations:^{self.frame = CGRectMake(- MENU_WIDTH, 0, MENU_WIDTH, kSCREEN_HEIGHT);self.isMenuViewHidden = YES;self.maskView.hidden = YES;}];}// 放到视线之内- (void)inputOfSightMenuView{[UIView animateWithDuration:0.2 animations:^{self.frame = CGRectMake(0, 0, MENU_WIDTH, kSCREEN_HEIGHT);} completion:^(BOOL finished) {self.maskView.hidden = NO;self.maskView.alpha = MASK_MAX_ALPHA;}];}#pragma mark ------>> KVO 监控 菜单View 的位置变化 <<------- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{if ([keyPath isEqualToString:@\"frame\"]){CGRect newFrame = [change[@\"new\"] CGRectValue];CGFloat newFrameX = newFrame.origin.x;// 判断是否需要改变 遮挡的透明度if (newFrameX != - MENU_WIDTH){_maskView.hidden = NO;// 出现遮挡// 改变遮挡的透明度_maskView.alpha = (newFrameX + MENU_WIDTH) / MENU_WIDTH * MASK_MAX_ALPHA;}else{_maskView.hidden = YES;}}}#pragma mark ------>> 手势冲突时候 调用的手势代理 <<------- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{if ([otherGestureRecognizer.view isKindOfClass:[UITableView class]]) {return NO;}return YES;}

最后 在控制器调用

PP_SlideMenuView *slidetView = [PP_SlideMenuView shareSliderMenuView];[slidetView bindWithViewController:self];[self.view addSubview:slidetView];

PS: 最近忙着写点小项目,哪里写错了还请见谅!