iOS interface-Imitation NetEase news left-hand drawer Interactive

1. Introduction

The students who used NetEase news client will find that when NetEase news slides to the left, the left navigation bar will then be dragged out, and the news content list will be pulled to the far right. Like a drawer pulled out the same. Cool. In addition to NetEase news, many applications are now using this kind of interaction.

For unfamiliar gesture recognition please refer to the previous article: detailed use of iOS gesture recognition (drag, zoom, rotate, click, gesture dependency, custom gestures)

This interactive effect mainly uses two gestures, one is pan drag, one is tap. Drag to pull the drawer out, and then push back. Click to push the drawer back.

The effect is as follows:

So how is this effect implemented?

2. Realization of ideas and steps

Ideas: from the implementation of the effect analysis, can be implemented as follows:

This interaction is composed of two view, the left navigation view is below, the view of the table of contents is above, the view of the table of contents covers the Navigation view, the view of the content list is dragged to the right, and the Navigation view is displayed.

Implementation steps:

1. Customize a view, which is the view that displays the content. Add two gestures to this view, pan drag, tap tap.
2. When dragging the view, let View.center move to the right so that you can see the content view move to the right.
3. Define a drawer open stop when the X value is: Opencenterx, this is where the content view finally stops
4. When the content view crosses an X-value in the middle right, the view automatically moves to the right to stop.
5. When the content view is in the open state, click on the content view and use the UIView animation to move the content view.center back to the middle.
6. Set the shadow effect of a content view

3. Code implementation

New CustomView Inheritance UIView

[CPP]View Plaincopy < param name= "wmode" value= "Transparent" >

1. #import <UIKit/UIKit.h>
3. @interface Customview:uiview
4. {
5. Cgpoint Openpointcenter;
6. Cgpoint Closepointcenter;
7. }
8. -(ID) Initwithview: (uiview*) Contentview Parentview: (uiview*) Parentview;
10. @property (nonatomic, strong) UIView *parentview; The parent view of the//drawer view
11. @property (nonatomic, strong) UIView *contenview; //Drawer display view of content
12. @end

Two gestures are implemented in custom and pass through the content view and parent view at initialization time.

[CPP]View Plaincopy

2. #import "CustomView.h"
6. #define OPENCENTERX 220.0
8. #define Dividwidth 70.0//opencenterx corresponds to the demarcation line confirming whether to open or close.
12. @implementation CustomView
16. -(ID) initWithFrame: (CGRect) frame
18. {
20. self = [super Initwithframe:frame];
22. if (self) {
24. //initialization code
26. }
28. return self;
30. }
34. -(ID) Initwithview: (UIView *) Contentview Parentview: (UIView *) Parentview
36. {
38. self = [Super Initwithframe:cgrectmake (0,0,contentview.frame.size.width, contentview.frame.size.height)];
42. if (self) {
44. Self.contenview = Contentview;
46. Self.parentview = Parentview;
50. [Self addsubview:contentview];
52. Uipangesturerecognizer *pangesturerecognizer = [[Uipangesturerecognizer alloc]
54. Initwithtarget:self
56. Action: @selector (Handlepan:)];
58. [Self addgesturerecognizer:pangesturerecognizer];
62. UITapGestureRecognizer *tapgesturerecognizer = [[UITapGestureRecognizer alloc]
64. Initwithtarget:self
66. Action: @selector (Handletap:)];
70. [Self addgesturerecognizer:tapgesturerecognizer];
72. Openpointcenter = Cgpointmake (self.parentview.center.x + Opencenterx,
74. SELF.PARENTVIEW.CENTER.Y);
78. NSLog (@"Openpointcenter x:%f, Openpointcenter y:%f",
80. Openpointcenter.x,
82. OPENPOINTCENTER.Y);
88. }
96. return self;
98. }
102. -(void) Handlepan: (uipangesturerecognizer*) Recognizer
104. {
106. Cgpoint translation = [recognizer TranslationInView:self.parentView];
110. float x = self.center.x + translation.x;
112. NSLog (@"translation x:%f", translation.x);
116. if (x < self.parentview.center.x) {
118. x = self.parentview.center.x;
120. }
122. Self.center = Cgpointmake (x, OPENPOINTCENTER.Y);
126. if (recognizer.state = = uigesturerecognizerstateended)
128. {
130. [UIView animatewithduration:0.75
132. delay:0.01
134. Options:uiviewanimationcurveeaseinout
136. animations:^ (void)
138. {
140. if (x > Openpointcenter.x-dividwidth) {
142. Self.center = Openpointcenter;
144. }else{
146. Self.center = Cgpointmake (Openpointcenter.x-opencenterx,
148. OPENPOINTCENTER.Y);
152. }
156. }completion:^ (BOOL isfinish) {
160. }];
162. }
166. [Recognizer Settranslation:cgpointzero InView:self.parentView];
168. }
172. -(void) Handletap: (uitapgesturerecognizer*) Recognizer
174. {
176. [UIView animatewithduration:0.75
178. delay:0.01
180. Options:uiviewanimationtransitioncurlup animations:^ (void) {
182. Self.center = Cgpointmake (Openpointcenter.x-opencenterx,
184. OPENPOINTCENTER.Y);
186. }completion:nil];
190. }
192. @end

4. Call of Viewcontroller

In order to implement the shadow of a custom view, add the need to use the Quartzcore framework. The header file is introduced after the Quartzcore framework is added to the project.

[CPP]View Plaincopy

2. -(void) Viewdidload
4. {
6. [Super Viewdidload];
10. CGRect rect = CGRectMake (0, 0,
12. Self.view.frame.size.width,
14. Self.view.frame.size.height);
16. NSLog (@"w:%f, h:%f", Rect.size.width, Rect.size.height);
18. Uiimageview *imageleft = [[Uiimageview alloc]initwithimage:[uiimage imagenamed:@"Left.png"]];
20. Imageleft.frame = rect;
22. [Self.view Addsubview:imageleft];
26. UIView *contentview = [[UIView alloc] initwithframe:rect];
30. Uiimageview *imageview = [[Uiimageview alloc]initwithimage:[uiimage imagenamed:@"Index.png"]];
32. Imageview.frame = rect;
34. [Contentview Addsubview:imageview];
38. CustomView *customview = [[CustomView alloc] Initwithview:contentview
40. ParentView:self.view];
42. [[CustomView Layer] Setshadowoffset:cgsizemake (10, 10)];
44. [[CustomView layer] setshadowradius:20];
46. [[CustomView layer] setshadowopacity:1];
48. [[CustomView layer] setshadowcolor:[uicolor Blackcolor]. Cgcolor];
52. [Self.view Addsubview:customview];
56. }

In order to look good, I made two, one is the content view, one is the view of the left navigation bar, and then as the background map in the above two view.

So do not point inside the content, can not drop, that is the picture just. This is just the effect of the demo drawer.

Finally, NetEase news this interaction can pull out from the right side of the effect, the principle is similar, may need more than one view. There are also interactive when the left column and vhts darkened, suddenly large and small effect. These later have time to realize again.

Sequel:iOS interface-Imitation NetEase news left-hand drawer interactive continuation (Add news content page and Comment page gesture)

CSDN Download: Code download

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

iOS interface-Imitation NetEase news left-hand drawer Interactive