IOS_19 _ drawer effect _ imitation Netease, ios_19 drawer imitation Netease

IOS_19 _ drawer effect _ imitation Netease, ios_19 drawer imitation Netease

Finally:

MainStoryBoard:

BeyondViewController. h

//// BeyondViewController. h // 19 _ drawer effect _ imitation Netease /// Created by beyond on 14-8-1. // Copyright (c) 2014 com. beyond. all rights reserved. // # import <UIKit/UIKit. h> # import "LeftTableViewControllerDelegate. h "@ interface BeyondViewController: UIViewController // The left half side (the column list is displayed) @ property (weak, nonatomic) IBOutlet UIView * leftView; // The right half side (display the personal information setting view) @ property (weak, nonatomic) IBOutlet UIView * rightView; // the top, the largest full screen is the main view @ property (weak, nonatomic) IBOutlet UIView * mainView; // The title button in the above title status bar view (Netease Logo pictures and column names are arranged horizontally) @ property (weak, nonatomic) IBOutlet UIButton * titleBtn; // the lower part of the mainView is the view of the body, showing the view of the subtopic @ property (weak, nonatomic) IBOutlet UIView * contentView; // pan drag gesture processing-(IBAction) panGesture :( UIPanGestureRecognizer *) sender; // The left and right buttons in the top half of the mainView title status bar view-(IBAction) btnClick :( UIButton *) sender; @ end

BeyondViewController. m

//// BeyondViewController. m // 19 _ drawer effect _ imitation Netease /// Created by beyond on 14-8-1. // Copyright (c) 2014 com. beyond. all rights reserved. // # import "BeyondViewController. h "# import" LeftTableViewController. h "# import" RightViewController. h "# import" Column. h "# import <QuartzCore/QuartzCore. h> // x # define kEndX frame at the end of the gesture. origin. x // The width of the Left view # define kLeftWidth _ leftView. frame. size. width // The width of the right view # define kRightWi Dth _ rightView. frame. size. width // declare the protocol in advance @ protocol LeftTableViewControllerDelegate; @ interface BeyondViewController () <LeftTableViewControllerDelegate> {// remember to start mainView x CGFloat _ startX when you press the finger; // member variables, remember the instance LeftTableViewController * _ leftVC of the Controller on the left; // member variables, remember the instance RightViewController * _ rightVC of the Controller on the right; // dictionary, remember that all the subcontrollers that instantiate the topic do not re-create NSMutableDictionary * _ columnViewControllers;} @ end @ implementatio N BeyondViewController // hide the status bar-(BOOL) prefersStatusBarHidden {return YES;}-(void) viewDidLoad {[super viewDidLoad]; _ titleBtn. backgroundColor = [UIColor clearColor]; // 0 dictionary. Remember to create the subcontrollers of all instantiated columns to avoid re-creating _ columnViewControllers = [NSMutableDictionary dictionary]; // 0, set the background of the navigation bar to EIP/[[UINavigationBar appearance] setBackgroundImage: [UIImage imageNamed: @ "bg.png"] forBarMetrics: UIBarMetricsDefault ]; // Change the color of the status bar to the default style // [UIApplication sharedApplication]. statusBarStyle = UIStatusBarStyleDefault; // 1. Add the view on the left controller to the view on the left. _ leftVC = [[LeftTableViewController alloc] init]; // The key code is used to obtain the data model object of the corresponding topic when a row of the Controller on the left is clicked. The master controller acts as the proxy of the Controller on the left and complies with the established protocol, the method in the Protocol is implemented, and the data model object _ leftVC corresponding to the row number is clicked on the Controller on the left is obtained. delegate = self; _ leftVC. view. frame = self. leftView. bounds; [self. leftView addSubview: _ leftVC. view]; // 2. Similarly, add the v From iew to view on the right _ rightVC = [[RightViewController alloc] init]; _ rightVC. view. frame = self. rightView. bounds; [self. rightView addSubview: _ rightVC. view]; // 3. When loading for the first time, the Controller of the news subsection should be displayed to the navigation controller, and then the view of the navigation controller should be added to the mainView [self firstLoading];} // custom method. When loading for the first time, the Controller of the news subsection should be displayed to the navigation controller, and then the view of the navigation controller should be added to the mainView-(void) firstLoading {Column * column = [Column columnNamed: @ "News" imgName: @ "news.png" className: @ "News ViewController "]; // you only need to manually call the LeftViewController proxy method, leftTableViewRowClicked, and pass a news subtopic to [self leftTableViewRowClicked: column];} // pan drag gesture processing-(IBAction) panGesture :( UIPanGestureRecognizer *) sender {// if it is in the pressed status, remember that the mainView start x if (UIGestureRecognizerStateBegan = sender. state) {_ startX = self. mainView. frame. origin. x ;}// the CGPoint delta = [sender translationInView: _ mainView]; CGRect fr Ame = self. mainView. frame; // calculate the new x value and make a robust judgment on kEndX = _ startX + delta. x; // 1, limit the maximum drag range. if (kEndX> = kLeftWidth) {kEndX = kLeftWidth;} if (kEndX <=-kRightWidth) {kEndX =-kRightWidth ;} // 2. Because the Left view and right view overlap, you must hide an if (kEndX> 0) {// NSLog (@ "-- the call frequency is quite high --"); _ rightView. hidden = YES; _ leftView. hidden = NO;} else {_ rightView. hidden = NO; _ leftView. hidden = YES;} if (UIGestureRecognizerSta TeEnded = sender. state) {// when the gesture ends, you need to perform robust judgment // 2 to analyze the position x, determine the degree to which to expand/* // 2.1 If only a little bit is dragged to the right, the width of the Left view smaller than 1/2, 0 if (kEndX <0.5 * kLeftWidth & kEndX> = 0) {kEndX = 0;} else if (kEndX> = 0.5 * kLeftWidth & kEndX <= kLeftWidth) {// 2.2 If you drag more than half to the right, the width of the Left view greater than 1/2 can be considered as kEndX = kLeftWidth ;} else if (kEndX>-0.5 * kRightWidth & kEndX <= 0) {// 2.3 if you drag only a little left, the width of the right view smaller than 1/2 is 0 k EndX = 0;} else if (kEndX <=-0.5 * kRightWidth) {// 2.4 if the width of the right view is greater than 1/2, although it is not yet in place, it can be considered that it is in the kEndX =-kRightWidth;} * // 2nd judgment methods // the start is 0, delta. if (_ startX = 0 & delta. x> 0) {kEndX = kLeftWidth;} else if (_ startX = 0 & delta. x <0) {// starts with 0, delta. if the value of x is smaller than 0, kEndX =-kRightWidth;} else if (_ startX = kLeftWidth & delta. x <0) {// start with kLeftWidth, delta. if the value of x is smaller than 0, the system slides to the left, and the value of kEndX is 0. ;} Else if (_ startX =-kRightWidth & delta. x> 0) {// start with-kRightWidth, delta. if x is greater than 0, the new frame [UIView animateWithDuration: 0.2 animations: ^ {self. mainView. frame = frame ;}]; // Finally, add the shadow effect to the layer where mainView is located [self addShadowFormainViewWithEndX: kEndX];} // custom method, add a shadow effect to the layer where mainView is located (call frequency is quite high)-(void) addShadowFormainViewWithEndX :( CGFloat) endX {// 1. Click the project, add a plus sign, and import the 3rd-party framework # impo Rt <QuartzCore/QuartzCore. h> // 2. Obtain the layer of mainView and set the shadow parameter // NSLog (@ "high call frequency ---"); _ mainView. layer. shadowColor = [UIColor blackColor]. CGColor; _ mainView. layer. shadowOpacity = 0.5; if (endX> = 0) {_ mainView. layer. shadowOffset = CGSizeMake (-5, 0);} else {_ mainView. layer. shadowOffset = CGSizeMake (5, 0) ;}// click the button. You can also expand the left and right sidebar-(IBAction) btnClick :( UIButton *) sender {// define a temporary variable CGFloat startX = _ m AinView. frame. origin. x; // Add a shadow effect to the layer where mainView is located. [self addShadowFormainViewWithEndX: sender. tag = 1? 1:-1]; // defines a temporary variable CGFloat tempEndX = 0; // the button on the left is clicked if (1 = sender. tag) {// hide the right half side _ leftView. hidden = NO; _ rightView. hidden = YES; if (startX = 0) {tempEndX = kLeftWidth;} else if (startX = kLeftWidth) {tempEndX = 0 ;}} else {// click the right button, hide left half side _ leftView. hidden = YES; _ rightView. hidden = NO; if (startX = 0) {tempEndX =-kRightWidth;} else if (startX =-kRightWidth) {tempEndX = 0 ;}} // Finally, set mainView x, call the extracted public code, and set mainView x. The parameter is endX [self setmainViewX: tempEndX];} // The extracted public code, set the x of mainView. The parameter is endX-(void) setmainViewX :( CGFloat) endX {CGRect frame = self. mainView. frame; frame. origin. x = endX; [UIView animateWithDuration: 0.2 animations: ^ {self. mainView. frame = frame ;}] ;}// the most critical method is the proxy method of the Controller on the left. When a row in the Controller on the left is clicked, void is called) leftTableViewRowClicked :( id) columnSelected {Column * column = (Column *) columnSelected; // 1, close the control on the left ==============================/// call the extracted public code, set x of mainView. The parameter is endX [self setmainViewX: 0]; // 2. Change the text _ titleBtn above the title button. titleLabel. text = column. columnName; // instantiate the controller of the corresponding topic based on the class name in the topic data model, set it as the root controller of the navigation controller, and add the view of the navigation controller to mainView, the purpose is to conveniently set the navigation bar, as well as jump to/2 for each controller, from the cache dictionary. If the sub-controller dictionary has a previously created sub-controller, use UIViewController * columnVC = _ columnViewControllers [column. columnClassName]; // create a subcontroller if (columnVC = nil) {Class c = NSClassFromString (column. columnClassName); columnVC = [[c alloc] init]; // you must put it in the sub-controller dictionary and store it [_ columnViewControllers setObject: columnVC forKey: column. columnClassName];} // 4, remove the existing sub-view if (_ contentView. subviews. count> 0) {UIView * oldView = [_ contentView subviews] [0]; [oldView removeFromSuperview];} // 5. Add the view of the subcontroller to contentView, show columnVC. view. frame = _ contentView. bounds; [self. contentView addSubview: columnVC. view]; NSLog (@ "% @", self. contentView); // before adding to mainView, obtain the subcontroller of the mainView navigation controller and remove it (if any ), then add the subcontrollers corresponding to the new topic to the navigation controller container. Note that you can use the dictionary to remember all the subcontrollers that have been instantiated, in this way, you do not need to create a new subcontroller for the column in alloc every time. Instead, you only need to retrieve the subcontroller of the same column instantiated from the dictionary based on the class name.} @ end

Column data model Column. h

/// Column. h // 19 _ drawer effect _ imitation Netease /// Created by beyond on 14-8-1. // Copyright (c) 2014 com. beyond. all rights reserved. // # import <Foundation/Foundation. h> // data model indicates a topic @ interface Column: NSObject // topic name @ property (nonatomic, copy) NSString * columnName; // topic image name @ property (nonatomic, copy) NSString * columnImgName; // Class Name of the controller corresponding to the topic @ property (nonatomic, copy) NSString * columnClassName; // weak is used for the UI control, and copy is used for the string, other Objects use strong // to provide a class method, that is, the constructor, which returns the encapsulated Data Object (the returned id can also be) + (Column *) columnNamed :( NSString *) columnName imgName :( NSString *) columnImgName className :( NSString *) columnClassName; @ end

Column data model Column. m

/// Column. m // 19 _ drawer effect _ imitation Netease /// Created by beyond on 14-8-1. // Copyright (c) 2014 com. beyond. all rights reserved. // The data model represents a Column # import "Column. h "@ implementation Column // return an object instance containing the corresponding controller name of the Column + (Column *) columnNamed :( NSString *) columnName imgName :( NSString *) columnImgName className :( NSString *) columnClassName {// use self Column * column = [[self alloc] init]; column for The compatible subclass. columnName = columnName; column. columnImgName = columnImgName; column. columnClassName = columnClassName; return column;} @ end

Protocol LeftTableViewControllerDelegate. h defined by the Controller on the left

/// LeftTableViewControllerDelegate. h // 19 _ drawer effect _ imitation Netease /// Created by beyond on 14-8-1. // Copyright (c) 2014 com. beyond. all rights reserved. // # import <Foundation/Foundation. h> # import "Column. h "// The proxy/protocol defined by the Controller on the left. It passes data (to its proxy) by calling this method of its member attributes (that is, the proxy) (In fact, the master controller wants data, so when the master controller instantiates the Controller on the left, it needs to set the proxy corresponding to the Controller on the left as the master controller itself) @ protocol LeftTableViewControllerDelegate <NSObject>-(void) leftTableViewRowClicked :( Column *) columnSelected; @ end

LeftTableViewController. h

/// LeftTableViewController. h // 19 _ drawer effect _ imitation Netease /// Created by beyond on 14-8-1. // Copyright (c) 2014 com. beyond. all rights reserved. // # import <UIKit/UIKit. h> // declare the protocol in advance @ protocol LeftTableViewControllerDelegate; @ interface LeftTableViewController: UITableViewController // use weak for the proxy to prevent loop problems, which can be of any type, however, you must comply with the Protocol @ property (nonatomic, weak) id <LeftTableViewControllerDelegate> delegate; @ end

LeftTableViewController. m

/// LeftTableViewController. m // 19 _ drawer effect _ imitation Netease /// Created by beyond on 14-8-1. // Copyright (c) 2014 com. beyond. all rights reserved. // # import "LeftTableViewController. h "# import" Column. h "# import" LeftTableViewControllerDelegate. h "@ interface LeftTableViewController () {// array of columns. All columns in the left column list are saved as NSArray * _ arr;} @ end @ implementation LeftTableViewController-(void) viewDidLoad {[super viewDidLoad]; // news Column * newsColumn = [Column columnNamed: @ "news" imgName: @ "news.png" className: @ "NewsViewController"]; // Column * picColumn = [Column columnNamed: @ "image" imgName: @ "pic.png" className: @ "PicViewController"]; // picture Column * commentColumn = [Column columnNamed: @ "" imgName: @ "comment.png" className: @ "CommentViewController"]; // to add a topic in the future, you only need to change it here. // set the topic object, add all at once to the immutable array _ arr = @ [newsColumn, picCo Lumn, commentColumn];}-(NSInteger) tableView :( UITableView *) tableView numberOfRowsInSection :( NSInteger) section {return _ arr. count;}-(UITableViewCell *) tableView :( UITableView *) tableView cellForRowAtIndexPath :( NSIndexPath *) indexPath {static NSString * cellID = @ "leftVC "; // The following dequeue can only be used in storyboard or xib. // UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: cellID forIndexPath: in DexPath]; // UITableViewCell * cell = [tableView cell: cellID]; if (cell = nil) {cell = [[UITableViewCell alloc] initWithStyle: UITableViewCellStyleDefault reuseIdentifier: cellID];} // set the unique data Column * column = _ arr [indexPath. row]; cell. textLabel. text = column. columnName; cell. imageView. image = [UIImage imageNamed: column. columnImgName]; return cell;} // when you click a row, the main view in the master control must be The content of the corresponding topic is displayed. Therefore, you must instantiate the topic controller of the row to be clicked, add it to the navigation controller, and call the proxy method to pass data to the proxy, the proxy here is actually the master controller-(void) tableView :( UITableView *) tableView didSelectRowAtIndexPath :( NSIndexPath *) indexPath {// first cancel the default click highlighted color [tableView deselectRowAtIndexPath: indexPath animated: YES]; // retrieve the data model (Column) column * Column = _ arr [indexPath. row]; if ([self. delegate respondsToSelector: @ selector (leftTableViewRowClicked :)]) {// transmit data to the master controller BeyondV IewController, via proxy // key code ~ [Self. delegate leftTableViewRowClicked: column] ;}}@ end

RightViewController. xib

NewsViewController. xib

PicViewController. xib

CommentViewController. xib

How to Implement drawer interaction menus like Netease iOS clients in ios

Similar to Netease's interactive network, there is a dedicated Demo, PPRevealSideViewController

How does the ios drawer effect determine the external area of the drawer? How to remove help

You can put your drawer in a view to know the Coordinate Position of the current view in your Vc. You can judge that the current view is not available in this area to view the original post>