时间:2021-05-19
抽屉效果
所谓抽屉效果就是三个视图,向右拖拽显示左边的视图,向左拖拽显示右边的视图,当拖拽大于屏幕的一半时最上面的视图会自动定位到一边,当点击左边或右边视图时会最上面视图会自动复位。
效果如图:三个视图(左边:浅灰色视图、右边:品红视图、主视图:黑色视图)
封装代码
DrawerViewController
#import <UIKit/UIKit.h>@interface DrawerViewController : UIViewController@property (weak, nonatomic, readonly) UIView *leftView;@property (weak, nonatomic, readonly) UIView *rightView;@property (weak, nonatomic, readonly) UIView *mainView;@end// -------------------------------------------------------#import "DrawerViewController.h"#define ScreenWidth [UIScreen mainScreen].bounds.size.width#define ScreenHeight [UIScreen mainScreen].bounds.size.height#define MaxOffsetY 100#define MaxOffsetX ([UIScreen mainScreen].bounds.size.width - 100)@implementation DrawerViewController- (void)viewDidLoad { [super viewDidLoad]; // 1. 初始化视图 [self setup]; // 2. 给mainView添加拖动手势 UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGesture:)]; [self.mainView addGestureRecognizer:panGestureRecognizer]; // 3. 给self.view添加一个单击手势 UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapGesture:)]; [self.view addGestureRecognizer:tap];}- (void)tapGesture:(UITapGestureRecognizer *)tap { // mainView复位 [UIView animateWithDuration:0.2 animations:^{ self.mainView.frame = self.view.bounds; }];}- (void)panGesture:(UIPanGestureRecognizer *)pan { CGPoint offsetPoint = [pan translationInView:self.view]; self.mainView.frame = [self frameWithOffset:offsetPoint.x]; if (self.mainView.frame.origin.x > 0) { // → 右移(显示leftView) self.rightView.hidden = YES; } else if (self.mainView.frame.origin.x < 0) { // ← 左移(显示rightView) self.rightView.hidden = NO; } // 如果拖拽结束,自动定位 CGFloat targetOffsetX = 0; if (pan.state == UIGestureRecognizerStateEnded) { if (self.mainView.frame.origin.x >= ScreenWidth * 0.5) { // 右侧 targetOffsetX = MaxOffsetX; } else if (CGRectGetMaxX(self.mainView.frame) < ScreenWidth * 0.5){ // 左侧 targetOffsetX = -MaxOffsetX; } // 计算出当前位置距离目标位置所需要的偏移距离 CGFloat offsetX = targetOffsetX - self.mainView.frame.origin.x; // 滑动不到屏幕一般时仍然显示mainView(self.view.bounds) 否则自动定位到左侧或右侧 CGRect mainFrame = targetOffsetX == 0 ? self.view.bounds : [self frameWithOffset:offsetX]; [UIView animateWithDuration:0.2 animations:^{ self.mainView.frame = mainFrame; }]; } [pan setTranslation:CGPointZero inView:self.view];}- (CGRect)frameWithOffset:(CGFloat)offsetX { CGRect newFrame = self.mainView.frame; newFrame.origin.x += offsetX; // x CGFloat offsetY = self.mainView.frame.origin.x * MaxOffsetY / ScreenWidth; newFrame.origin.y = fabs(offsetY); // y CGFloat offsetHeight = ScreenHeight - (newFrame.origin.y * 2); newFrame.size.height = offsetHeight; // height return newFrame;}- (void)setup { UIView *leftView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds]; //leftView.backgroundColor = [UIColor lightGrayColor]; _leftView = leftView; [self.view addSubview:leftView]; UIView *rightView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds]; //rightView.backgroundColor = [UIColor magentaColor]; _rightView = rightView; [self.view addSubview:rightView]; UIView *mainView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds]; //mainView.backgroundColor = [UIColor blackColor]; _mainView = mainView; [self.view addSubview:mainView];}@end使用封装
1.将DrawerViewController类拖入到工程中,并继承该类
2.分别创建LeftViewController、RightViewController、MainViewController
3.将每个视图对应的view添加到对应的视图上,并成为当前控制器的子控制器
第一步:继承DrawerViewController
#import <UIKit/UIKit.h>#import "DrawerViewController.h"@interface ViewController : DrawerViewController@end第二步:分别创建LeftViewController、RightViewController、MainViewController
第三步:为leftView、rightView、mainView 添加子视图,并将每天控制器作为当前控制器的子控制器
实现效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了iOS实现抽屉效果的全部代码,供大家参考,具体内容如下iOS实现简易抽屉效果,代码:@interfaceViewController(){U
导读简单用swift写了一个抽屉效果,可以直接使用并且简单;很多软件都运了抽屉效果,比如qq的左抽屉,英雄联盟,滴滴打车,和uber等等都运用了抽屉;效果ios
前言iOS中抽屉效果的简单实现现在很多应用中都使用到了,网上也有很多了例子,本文主要是通过简单的一些代码来实现的,有需要的可以一起学习学习。下面是效果图示例代码
本文实例介绍了iOS实现侧拉栏抽屉效果的相关代码,分享给大家供大家参考,具体内容如下需要导入第三方的类库如下:抽屉效果所需第三方类库下载效果:既可以两侧都实现抽
最近,看到好多Android上的抽屉效果,也忍不住想要自己写一个。在Android里面可以用SlidingDrawer,很方便的实现。IOS上面就只有自己写了。