iOS to achieve left and right drag drawer effect

  • 2020-05-24 06:11:55
  • OfStack

In this paper, the example of iOS to achieve left and right drag drawer effect, the specific content is as follows

touchesMoved: triggers the appearance and disappearance of the left and right views by using the loadView method to add view to the self.view. Before the self.view is loaded, the left and right middle View are set to frame.


#import "DarwViewController.h"
@interface DarwViewController ()
@property (nonatomic, weak) UIView *leftView;
@property (nonatomic, weak) UIView *rightView;
@property (nonatomic, weak) UIView *mainView;
/**
 *  Whether the animation is going on or not 
 */
@property (nonatomic ,assign) BOOL animating;
 
@end
 
@implementation DarwViewController
- (void)viewDidLoad {
 [super viewDidLoad];
}
 
 
-(void)loadView
{
 self.view = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
 // On the left view
 UIView *leftView = [[UIView alloc]initWithFrame:self.view.frame];
 [self.view addSubview:leftView];
 leftView.backgroundColor= [UIColor redColor];
 self.leftView = leftView;
  
 // On the right View
 UIView *rightView = [[UIView alloc]initWithFrame:self.view.frame];
 [self.view addSubview:rightView];
 rightView.backgroundColor= [UIColor blueColor];
 self.rightView = rightView;
  
 // The main page 
 UIView *mainView = [[UIView alloc]initWithFrame:self.view.frame];
 [self.view addSubview:mainView];
 mainView.backgroundColor= [UIColor yellowColor];
 self.mainView = mainView;
  
  
 //KVO Listening to the 
 [self.mainView addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
}
/**
 * KVO The callback method   when mainView Frame Triggered when the value changes 
 *
 * @param keyPath <#keyPath description#>
 * @param object <#object description#>
 * @param change <#change description#>
 * @param context <#context description#>
 */
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
 if (self.animating) return; // if mainView Is the animation   Don't perform 
 if (self.mainView.frame.origin.x > 0 )
 {
  //X > 0  It's hidden to the right View  According to the left View
  self.rightView.hidden = YES;
  self.leftView.hidden = NO;
 }
 else if (self.mainView.frame.origin.x < 0)
 {
  //X < 0  Just hide to the left View  According to the right VIew
  self.leftView.hidden = YES;
  self.rightView.hidden = NO;
 }
}
#pragma mark --  Touch events 
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
 // Get a touch object 
 UITouch *touch = [touches anyObject];
  
 // Gets the current touch point 
 CGPoint currentPoint = [touch locationInView:self.view];
 // Get on 1 A touch point 
 CGPoint previousPoint = [touch previousLocationInView:self.view];
  
 // To calculate x The offset in the direction 
 CGFloat offsetX = currentPoint.x - previousPoint.x;
//  According to the x Calculate the offset y The offset 
 self.mainView.frame = [self rectWithOffsetX:offsetX];
  
}
#define screenW [UIScreen mainScreen].bounds.size.width
#define screenH [UIScreen mainScreen].bounds.size.height
/**
 *  Evaluate the main view frame
 *
 * @param offsetX x The offset 
 *
 * @return  Offset new frame
 */
- (CGRect ) rectWithOffsetX:(CGFloat )offsetX
{
 //Y The offset of the axis 
 CGFloat offsetY = (screenH *1/5) * (offsetX/screenW);
  
 // The proportion   (for width and height scaling) 
 CGFloat scale = (screenH - offsetY *2) / screenH;
 if (self.mainView.frame.origin.x < 0 )
 {
  // if x Is negative   And on the left View To display the 
  // The ratio is going to be the ratio 1 small 
  scale = 2 - scale;
 }
 // Gets the current mainView the frame
 CGRect frame = self.mainView.frame;
  
 // To reset mainView the frame value 
 frame.size.width = frame.size.width *scale >screenW ? screenW : frame.size.width *scale;
  
 frame.size.height = frame.size.height *scale >screenH ? screenH :frame.size.height *scale;
  
 frame.origin.x += offsetX;
 frame.origin.y =(screenH - frame.size.height)*0.5;
 // Returns a new offset frame
 return frame;
}
#define maxRightX (screenW *0.8)
#define maxLeftX (-screenW *0.6)
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
 CGFloat targetX = 0;
 // If you let go 1 Under the   The current mainVIew the x Larger than screen 1 And a half 
 if (self.mainView.frame.origin.x > screenW * 0.5)
 {
  // Position to the right 
  targetX = maxRightX;
 }
 // If you let go 1 Under the   The current mainVIew One of the biggest X The value is smaller than the screen 1 And a half 
 else if (CGRectGetMaxX(self.mainView.frame) < screenW *0.5)
 {
  // Position to the left 
  targetX = maxLeftX;
 }
  
 // Calculated offset 
 CGFloat offsetX = targetX -self.mainView.frame.origin.x;
  
 self.animating = YES;
  
 [UIView animateWithDuration:0.4 animations:^{
  if (targetX == 0)
  {
   // if targetX==0  reset 
   self.mainView.frame = self.view.frame;
  }
  else
  {
   // if targetX != 0  So let's go to the location 
   self.mainView.frame = [self rectWithOffsetX:offsetX];
  }
 } completion:^(BOOL finished) {
  self.animating = NO;
 }];
   
}
@end

The above is the entire content of this article, I hope to help you with your study.


Related articles: