iOS achieves simple drawer effect and bilateral drawer effect

This article example for you to share iOS to achieve the drawer effect of all the code, for your reference, the specific content is as follows

iOS simple drawer effect, code:

@interface ViewController () {
 UIView* _leftView;
}
 
@end
 
@implementation ViewController
 
- (void)viewDidLoad {
 [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a nib.
 
 _leftView = [[UIView alloc] init];
 // Take the left-hand side view To hide 
 _leftView.frame = CGRectMake(-200, 0, 200, self.view.frame.size.height);
 _leftView.backgroundColor = [UIColor greenColor];
 [self.view addSubview:_leftView];
 
 UIPanGestureRecognizer* pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
 [self.view addGestureRecognizer:pan];
}
 
- (void)handlePan:(UIPanGestureRecognizer*) recognizer {
 CGPoint translation = [recognizer translationInView:self.view];
 // After the increment of x coordinates 
 CGFloat Xresult = translation.x + _leftView.frame.origin.x;
 
 // To the right 
 if (translation.x >= 0) {
 //leftView All pulled out, you can no longer turn to the right 
 if (_leftView.frame.origin.x >= 0 || Xresult >= 0) {
  _leftView.frame = CGRectMake(0, 0, 200, self.view.frame.size.height);
  
  return;
 }
 } else if (translation.x < 0) {// To the left 
 //leftView If it has been withdrawn completely, it cannot go to the left 
 if (_leftView.frame.origin.x <= -200 || Xresult <= -200) {
  _leftView.frame = CGRectMake(-200, 0, 200, self.view.frame.size.height);
  return;
 }
 }
 
 CGRect frame = _leftView.frame;
 frame.origin.x += translation.x;
 _leftView.frame = frame;
 
 // Clear the distance you moved. That's the key 
 [recognizer setTranslation:CGPointZero inView:recognizer.view];
 
 // Do the bounce effect, with the central axis as the limit 
 if (recognizer.state == UIGestureRecognizerStateEnded) {
 if (_leftView.frame.origin.x > -100) {
  [self closeView:NO];
 } else {
  [self closeView:YES];
 }
 }
}
 
- (void)closeView:(BOOL)close {
 if (close) {
 [self moveView:CGRectMake(-200, 0, 200, self.view.frame.size.height)];
 } else {
 [self moveView:CGRectMake(0, 0, 200, self.view.frame.size.height)];
 }
}
 
- (void)moveView:(CGRect)frame {
 [UIView animateWithDuration:0.3 animations:^{
 _leftView.frame = frame;
 } completion:^(BOOL finished) {
  
 }];
}

iOS achieves the effect of bilateral drawer, code:

#import "PathView.h"
#import "UIView+Additions.h"
 
@implementation PathView
 
- (instancetype)init {
 self = [super init];
 if (self) {
 [self setupGestureRecognizer];
 }
 return self;
}
 
- (void)setupGestureRecognizer {
 UIPanGestureRecognizer* pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
 [self addGestureRecognizer:pan];
}
 
- (void)handlePan:(UIPanGestureRecognizer*)recognizer {
 CGPoint translation = [recognizer translationInView:self];
 
 CGFloat Xresult = translation.x + self.left;
 
 if (translation.x >= 0) {// To the right 
 if (self.left >= _leftWidth || Xresult >= _leftWidth) {
  self.frame = CGRectMake(_leftWidth, 0, self.width, self.height);
  return;
 }
 }
 else if (translation.x < 0) {// To the left 
 if (self.left <= -_rightWidth || Xresult <= -_rightWidth) {
  self.frame = CGRectMake(-_rightWidth, 0, self.width, self.height);
  return;
 }
 }
 
 self.left += translation.x;
 
 if (recognizer.state == UIGestureRecognizerStateEnded) {
 if (self.left > _leftWidth / 2) {
  [self openLeft:YES openRight:NO];
 }
  
 else if (self.left < -(_rightWidth / 2)) {
  [self openLeft:NO openRight:YES];
 }
  
 else {
  [self openLeft:NO openRight:NO];
 }
 }
 
 // Clear the distance you moved 
 [recognizer setTranslation:CGPointZero inView:recognizer.view];
}
 
- (void)openLeft:(BOOL)left openRight:(BOOL)right {
 if (!left && !right) {
 [self moveView:CGRectMake(0, 0, self.width, self.height)];
  
 } else if (!left && right) {
 [self moveView:CGRectMake(-_rightWidth, 0, self.width, self.height)];
  
 } else if (left && !right) {
 [self moveView:CGRectMake(_leftWidth, 0, self.width, self.height)];
  
 }
}
 
- (void)moveView:(CGRect)frame {
 [UIView animateWithDuration:0.3 animations:^{
 self.frame = frame;
 } completion:^(BOOL finished) {
  
 }];
}

The above is the details of the implementation, so I don't comment much, just move the gesture inside view and let view change its own frame; Another is to add two properties to specify the width of each drawer on the left and on the right. One side is not needed, just set it to 0.

The above is the entire content of this article, I hope to help you successfully achieve the iOS drawer effect.