ios抽屉效果实现原理（ios 抽屉效果）

本文实例为大家分享了ios抽屉效果开发实例，供大家参考，具体内容如下

在显示在窗口的控制器上添加三个view（如果只需要往一边滑动就只加2个view）

先声明三个view

1 2 3 4 5 6 7 #import "viewcontroller.h" @interface viewcontroller () @property(nonatomic, weak) uiview *mainv; @property(nonatomic, weak) uiview *leftv; @property(nonatomic, weak) uiview *rightv; @end

添加view到控制器view上

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 #pragma mark - 添加子控件 - (void)setupchildviews { uiview *leftv = [[uiview alloc]initwithframe:self.view.bounds]; leftv.backgroundcolor = [uicolor orangecolor]; [self.view addsubview:leftv]; _leftv = leftv; uiview *rightv = [[uiview alloc]initwithframe:self.view.bounds]; rightv.backgroundcolor = [uicolor grouptableviewbackgroundcolor]; [self.view addsubview:rightv]; _rightv = rightv; uiview *mainv = [[uiview alloc]initwithframe:self.view.bounds]; mainv.backgroundcolor = [uicolor yellowcolor]; [self.view addsubview:mainv]; _mainv = mainv; } - (void)viewdidload { [super viewdidload]; //添加子控件 [self setupchildviews]; //添加pan手势 uipangesturerecognizer *pan = [[uipangesturerecognizer alloc]initwithtarget:self action:@selector(pan:)]; [self.view addgesturerecognizer:pan]; //添加点按手势，在主视图上任意位置点击回到屏幕开始位置 uitapgesturerecognizer *tap = [[uitapgesturerecognizer alloc]initwithtarget:self action:@selector(tap)]; [self.view addgesturerecognizer:tap]; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 #pragma mark - 手势识别方法 #define targetl -230 #define targetr 200 #define screenw [uiscreen mainscreen].bounds.size.width - (void)pan:(uipangesturerecognizer *)pan { //获取手势移动的位置 cgpoint tranp = [pan translationinview:self.view]; //获取x的偏移量 cgfloat offsetx = tranp.x; //修改mainv的frame _mainv.frame = [self framewithoffsetx:offsetx]; //判断mainv的x是否大于0 [self observevalueforkeypath:nil ofobject:nil change:nil context:nil]; //复位 [pan settranslation:cgpointzero inview:self.view]; //判断当手势结束的时候，定位 if (pan.state == uigesturerecognizerstateended) { cgfloat target = 0; if (_mainv.frame.origin.x > screenw * 0.5) { //定位到右边 target = targetr; }else if(cgrectgetmaxx(_mainv.frame) < screenw * 0.5) { //定位到左边 target = targetl; } //获取x轴需要移动的偏移量 cgfloat offsetx = target - _mainv.frame.origin.x; [uiview animatewithduration:0.25 animations:^{ _mainv.frame = target == 0 ? self.view.bounds : [self framewithoffsetx:offsetx]; }]; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 - (void)tap { [uiview animatewithduration:0.25 animations:^{ _mainv.frame = self.view.bounds; }]; } #define kmaxy 80 #pragma mark - 根据offsetx计算mainv的frame - (cgrect)framewithoffsetx:(cgfloat)offsetx { //获取上一次的frame cgrect frame = _mainv.frame; //获取屏幕的高度 cgfloat screenh = [uiscreen mainscreen].bounds.size.height; //获取屏幕的宽度 //cgfloat screenw = [uiscreen mainscreen].bounds.size.width; //x轴平移一点对应y轴需要平移的距离 cgfloat offsety = offsetx * kmaxy / screenw; //获取上一次的高度 cgfloat preh = frame.size.height; //获取上一次的宽度 cgfloat prew = frame.size.width; //获取当前高度 cgfloat curh = preh - 2 * offsety; //如果是向左滑动 if(frame.origin.x < 0) { curh = preh + 2 * offsety; } //获取尺寸的缩放比例 cgfloat scale = curh / preh; //获取当前宽度 cgfloat curw = prew * scale; //获取当前x frame.origin.x += offsetx; //获取当前y cgfloat y = (screenh - curh) / 2; frame.origin.y = y; frame.size.width = curw; frame.size.height = curh; return frame; }

1 2 3 4 5 6 7 8 9 - (void)observevalueforkeypath:(nsstring *)keypath ofobject:(id)object change:(nsdictionary<nsstring *,id> *)change context:(void *)context { if(_mainv.frame.origin.x > 0) {//往右边滑动 _rightv.hidden = yes; }else if(_mainv.frame.origin.x < 0) {//往左边滑动 _rightv.hidden = no; } }

如果想要在mainv主视图中显示tableview，就新创建一个tableviewcontroller，在这里面显示tableview的数据，

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 - (nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section { return 30; } - (uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath { static nsstring *id = @"cell"; uitableviewcell *cell = [tableview dequeuereusablecellwithidentifier:id]; if(cell == nil) { cell = [[uitableviewcell alloc]initwithstyle:uitableviewcellstyledefault reuseidentifier:id]; } cell.textlabel.text = [nsstring stringwithformat:@"第%ld行", indexpath.row]; return cell; }

再创建一个在storyboard中显示的控制器xxmainviewcontroller，继承自实现了抽屉效果的viewcontroller，并且在storyboard中将class改为这个控制的类名，还要将显示tableview的控制成为他的子控制器

1 2 3 4 5 6 7 8 9 10 11 12 13 - (void)viewdidload { [super viewdidload]; xxviewcontroller *vc = [[xxviewcontroller alloc]init]; vc.view.frame = self.view.bounds; //让vc成为主视图控制器的子控制器 [self addchildviewcontroller:vc]; //主视图展示tableview [self.mainv addsubview:vc.view]; }

为了在xxmainviewcontroller中只能访问mainv而不能修改他的值，所以将子控件的view暴露在viewcontroller.h中，并添加read-only

1 2 3 4 5 6 7 #import <uikit/uikit.h> @interface viewcontroller : uiviewcontroller @property(nonatomic, weak, readonly) uiview *mainv; @property(nonatomic, weak, readonly) uiview *leftv; @property(nonatomic, weak, readonly) uiview *rightv; @end

运行效果图：

ios抽屉效果实现原理（ios 抽屉效果）