iOS实现简单抽屉效果

抽屉效果

所谓抽屉效果就是三个视图，向右拖拽显示左边的视图，向左拖拽显示右边的视图，当拖拽大于屏幕的一半时最上面的视图会自动定位到一边，当点击左边或右边视图时会最上面视图会自动复位。

效果如图：三个视图（左边：浅灰色视图、右边：品红视图、主视图：黑色视图）

封装代码

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 添加子视图，并将每天控制器作为当前控制器的子控制器

#import "viewcontroller.h"
#import "leftviewcontroller.h"
#import "rightviewcontroller.h"
#import "mainviewcontroller.h"

@implementation viewcontroller

- (void)viewdidload {
 [super viewdidload];

 // main
 mainviewcontroller *mainviewcontroller = [[mainviewcontroller alloc] init];
 mainviewcontroller.view.frame = self.view.bounds;
 mainviewcontroller.view.backgroundcolor = [uicolor browncolor];
 [self.mainview addsubview:mainviewcontroller.view];
 [self addchildviewcontroller:mainviewcontroller];

 // left
 leftviewcontroller *leftviewcontroller = [[leftviewcontroller alloc] init];
 leftviewcontroller.view.frame = self.view.bounds;
 leftviewcontroller.view.backgroundcolor = [uicolor purplecolor];
 [self.leftview addsubview:leftviewcontroller.view];
 [self addchildviewcontroller:leftviewcontroller];

 // right
 rightviewcontroller *rightviewcontroller = [[rightviewcontroller alloc] init];
 rightviewcontroller.view.frame = self.view.bounds;
 rightviewcontroller.view.backgroundcolor = [uicolor cyancolor];
 [self.rightview addsubview:rightviewcontroller.view];
 [self addchildviewcontroller:rightviewcontroller];
}
@end

实现效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。