IOS interface-drawer interaction on the left side of Netease news

1. Introduction

Anyone who has used the Netease news client will find that when Netease news slides to the left, the navigation bar on the left will be dragged out, and the news content list will be pulled to the rightmost. It's like pulling a drawer out. Cool. In addition to Netease news, many applications now adopt such interactions.

If you are not familiar with Gesture Recognition, refer to the previous article: detailed use of iOS Gesture Recognition (drag, zoom, rotate, click, gesture dependency, custom gesture)

The interaction effect mainly uses two gestures: pan drag and drop, and tap click. Drag the drawer and push it back. Click to push the drawer back.

 

The effect is as follows:

How can this effect be achieved?

2. Implementation ideas and steps

Ideas:From the analysis of the implementation results, we can achieve this:

This interaction is composed of two views. The View in the left-side navigation bar is shown below, and the View in the content list is displayed above. The View in the content list overwrites the navigation View and drags the View in the content list to the right, in this case, the navigation View is displayed.

Steps:

 

1. Define a View as the View of the displayed content. Add two gestures to this View. Drag the pan icon and click "tap.
2. When you drag the View, move view. center to the right, so that you can see that the View is moved to the right.
3. Defines the x value when a drawer is opened and stopped as: OPENCENTERX, which is the final stop position of the content View.
4. When the content View goes beyond an x value in the middle to the right, the view automatically moves to the right position and stops.
5. When the content View is open, click the content View and use the UIView animation to move the content View. center back to the center.
6. Set the shadow effect of the content View

 

3. Code Implementation

New mmview inherits UIView

 

# Import <UIKit/UIKit. h> @ interface CustomView: UIView {CGPoint openPointCenter; CGPoint closePointCenter;}-(id) initWithView :( UIView *) contentview parentView :( UIView *) parentview; @ property (nonatomic, strong) UIView * parentView; // The parent view of the drawer view @ property (nonatomic, strong) UIView * contenView; // The View of the drawer display content @ end

 

The two gestures are implemented in Custom, and the content View and parent View are imported during initialization.

# Import "CustomView. h" # define OPENCENTERX 220.0 # define DIVIDWIDTH 70.0 // OPENCENTERX indicates whether to enable or disable the line. @ Implementation CustomView-(id) initWithFrame :( CGRect) frame {self = [super initWithFrame: frame]; if (self) {// Initialization code} return self;}-(id) initWithView :( UIView *) contentview parentView :( UIView *) parentview {self = [super initWithFrame: CGRectMake (0, 0, contentview. frame. size. width, contentview. frame. size. height)]; if (self) {self. contenView = contentview; self. parentView = parentview; [self addSubview: contentview]; using * panGestureRecognizer = [[using alloc] initWithTarget: self action: @ selector (handlePan :)]; [self resume: Allow]; optional * centers = [[financialloc] initWithTarget: self action: @ selector (handleTap :)]; [self addGestureRecognizer: tapGestureRecognizer]; openPointCenter = CGPointMake (self. parentView. center. x + OPENCENTERX, self. parentView. center. y); NSLog (@ "openPointCenter x: % f, openPointCenter y: % f", openPointCenter. x, openPointCenter. y);} return self;}-(void) handlePan :( UIPanGestureRecognizer *) recognizer {CGPoint translation = [recognizer translationInView: self. parentView]; float x = self. center. x + translation. x; NSLog (@ "translation x: % f", translation. x); if (x <self. parentView. center. x) {x = self. parentView. center. x;} self. center = CGPointMake (x, openPointCenter. y); if (recognizer. state = UIGestureRecognizerStateEnded) {[UIView animateWithDuration: 0.75 delay: 0.01 options: UIViewAnimationCurveEaseInOut animations: ^ (void) {if (x> openPointCenter. x-DIVIDWIDTH) {self. center = openPointCenter;} else {self. center = CGPointMake (openPointCenter. x-OPENCENTERX, openPointCenter. y) ;}} completion: ^ (BOOL isFinish) {}];} [recognizer setTranslation: CGPointZero inView: self. parentView];}-(void) handleTap :( handle *) recognizer {[UIView animateWithDuration: 0.75 delay: 0.01 options: UIViewAnimationTransitionCurlUp animations: ^ (void) {self. center = CGPointMake (openPointCenter. x-OPENCENTERX, openPointCenter. y);} completion: nil];} @ end

4. Call viewController

To implement the shadow of a custom view, you must use the QuartzCore framework. Add the QuartzCore framework to the project and then introduce the header file.

 

- (void)viewDidLoad{    [super viewDidLoad];        CGRect rect = CGRectMake(0, 0,                             self.view.frame.size.width,                             self.view.frame.size.height);    NSLog(@"w:%f, h:%f", rect.size.width, rect.size.height);    UIImageView *imageleft = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"left.png"]];    imageleft.frame = rect;    [self.view addSubview:imageleft];        UIView *contentView = [[UIView alloc] initWithFrame:rect];        UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"index.png"]];    imageView.frame = rect;    [contentView addSubview:imageView];    CustomView *customView = [[CustomView alloc] initWithView:contentView                                                   parentView:self.view];    [[customView layer] setShadowOffset:CGSizeMake(10, 10)];    [[customView layer] setShadowRadius:20];    [[customView layer] setShadowOpacity:1];    [[customView layer] setShadowColor:[UIColor blackColor].CGColor];        [self.view addSubview:customView];}

 

In order to look good, I made two images. One is the content view, the other is the view in the left navigation bar, and then put it as the background image in the two views above.

So don't click the content in it. You can't click it. It's just an image. Here is just a demonstration of the drawer effect.

Finally, the interaction of Netease news can be pulled from the right side. The principle is almost the same, and an additional view may be required. In addition, the left pane of the Interaction page also shows the effects of dimming and flickering. These will be implemented later.

CSDN download: Code download

Github: https://github.com/schelling/NeteaseNews