The realization of drawer effect

Drawer effect

Add a child view

* Simple sliding effect

* Monitoring Controller Handles event methods

* Get x-axis offset

* Change the frame of the main view

* Use KVO to do view switching

Move left, show right, hide left

Move right, show left, hide right

* Complex sliding effect, PPT commentary (according to the finger each move a little, the x-axis offset acreage out of the current view of the frame)

Assuming that x moves to 320, Y moves to 60, and the infestation moves a little x, moving how many y

OffsetY = OffsetX * 60/320 Fingers each move a little, x-axis offset how much, y offset how much

In order to look good, X moves to 320, the height from top to bottom needs to be consistent, and a certain proportion to scale his size.

Based on the previous frame, figure out the current frame,touchmove can only get the previous frame.

Current height = Previous Height * This ratio

Scale: Current height/Previous height (screenH-2 * offsetY)/screenh

The current width is also the same as the request.

Y value, the calculation is special, not directly with the previous Y, plus offsety, to the left, the main view should go down, but the offsetx is negative, resulting in the main view will go up.

y = (screenh-current height) * 0.5

Getcurrentframewithoffsetx

* Positioning (move to target point when sliding to release the finger)

Moves to the left and right target points, depending on the offset = The x of the current target point-the X of the previous view, the frame that is moved to the target point

Restore: Restores the main view when it is not moved to the target point.

* Reset (when the main view is not in the original location, tap the screen to restore the original position)

Determine if the finger is moving, move it automatically, and do not need a manual reset.

Code implementation:

viewcontroller.m//Drawer effect////Created by WTW on 15/7/20.//Copyright (c) 2015 WTW. All rights reserved.//#import "ViewController.h" @interface Viewcontroller () @property (nonatomic,weak) UIView * Leftview; @property (nonatomic,weak) UIView *rightview; @property (nonatomic,weak) UIView *mainview;//Reset, The @property (nonatomic,assign) BOOL isdraging is reset after the location is clicked, @end @implementation viewcontroller-(void) viewdidload {[Super VI        Ewdidload];        Add child controls [self addchildview]; Always listen to the change of the main view frame/** * If you need to listen to a change in an object's properties, use KVO * To add an observer to Mainview * Addobserver: Viewer * Forkeypat H: Required Listening Properties * Options: Monitor New value change */[Self.mainview addobserver:self forkeypath:@ "Frame" options:nskeyvalueobserving    Optionnew Context:nil];} As long as the listening property is changed, it is called-(void) Observevalueforkeypath: (NSString *) KeyPath Ofobject: (ID) object change: (Nsdictionary *)        Change context: (void *) context{//nslog (@ "%@", Nsstringfromcgrect (Self.mainView.frame)); if (Self.mainview.frame.origin.x < 0) {//Show Right, hide left Self.rightView.hidden = NO;    Self.leftView.hidden = YES;        }else if (self.mainview.frame.origin.x >0) {//show Left, hide right self.leftView.hidden = NO;    Self.rightView.hidden = YES;    }}-(void) Addchildview {//left UIView *leftview = [[UIView alloc]initwithframe:self.view.bounds];    Leftview.backgroundcolor = [Uicolor Greencolor];    [Self.view Addsubview:leftview];        _leftview = Leftview;    Right UIView *rightview = [[UIView alloc]initwithframe:self.view.bounds];    Rightview.backgroundcolor = [Uicolor Yellowcolor];    [Self.view Addsubview:rightview];        Self.rightview = Rightview;    Main UIView *mainview = [[UIView alloc]initwithframe:self.view.bounds];    Mainview.backgroundcolor = [Uicolor Redcolor];    [Self.view Addsubview:mainview];    Self.mainview = MainView;        }-(void) touchesmoved: (Nsset *) touches withevent: (uievent *) event{//Get finger uitouch *touch = [touches anyobject];    Current PointCgpoint curp = [Touch LocationInView:self.view];        Previous point Cgpoint PreP = [Touch PreviousLocationInView:self.view];        Get the finger every move, the x-axis offset CGFloat OffsetX = curp.x-prep.x;        Sets the current view of frame self.mainView.frame = [self framewithoffsetx:offsetx]; The record is currently being dragged self.isdraging = YES;} # pragma mark-y reverse maximum offset # define Maxy 60-(CGRect) Framewithoffsetx: (cgfloat) OffsetX {cgfloat screenw = [UIScreen m    Ainscreen].bounds.size.width;    CGFloat screenh = [UIScreen mainscreen].bounds.size.height;        CGFloat OffsetY = OffsetX * MAXY/SCREENW;        Get zoom CGFloat scale = (screenH-2 * offsetY)/screenh;    Scaling if (self.mainview.frame.origin.x < 0) {scale = (screenh + 2 * offsetY)/screenh on the right side of the movement;    } CGRect frame = Self.mainView.frame;    Frame.origin.x + = OffsetX;    Frame.size.height = frame.size.height * scale;    Frame.size.width = frame.size.width * scale;        FRAME.ORIGIN.Y = (screenh-frame.size.height) * 0.5; RetUrn frame;} #pragma mark-positioning function # Targetrx 300#define targetlx-250-(void) touchesended: (Nsset *) touches withevent: (uievent *) EV ent{if (_isdraging = = NO && _mainview.frame.origin.x! = 0) {//reset [UIView animatewithduration:0.        animations:^{self.mainView.frame = self.view.bounds;        }];    The following does not need to locate return;        }//positioning function CGFloat screenw = [UIScreen mainscreen].bounds.size.width;        Gets the current main view of frame cgrect frame = self.mainView.frame;        CGFloat target = 0;    if (frame.origin.x > Screenw * 0.5) {//When the primary view's X is larger than half the screen, navigate to the right target = Targetrx;    }else if (Cgrectgetmaxx (self.mainView.frame) < SCREENW * 0.5) {//positioning to the left target = TARGETLX; } if (target = = 0) {//restore [UIView animatewithduration:0.25 animations:^{Self.mainView.fram        e = self.view.bounds;    }]; }else {[UIView animatewithduration:0.25 animations:^{//Get x-axis offset cgfloat ofFsetx = target-frame.origin.x;    Self.mainView.frame = [self framewithoffsetx:offsetx];            }];    }//record is currently being dragged self.isdraging = NO; } @end

The realization of drawer effect