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.