IOS Development Road--imitation netease drawer effect _ios

Final Effect Diagram:

Mainstoryboard schematic:

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
//left half (shown is column list)
@property (weak, nonatomic) Iboutlet UIView *LEFTVI ew;
The right half (the display is the personal Information settings view)
@property (weak, nonatomic) Iboutlet UIView *rightview;
At the top, the largest full-screen is the main view
@property (weak, nonatomic) Iboutlet UIView *mainview;



Above the title Status bar view in the title button (NetEase logo picture and column name horizontal arrangement)
@property (weak, nonatomic) Iboutlet UIButton *titlebtn;

The lower part of the Mainview is the view of the text, showing the view
@property (weak, nonatomic) Iboutlet UIView *contentview of the sub columns;



Pan-drag gesture processing
-(ibaction) Pangesture: (Uipangesturerecognizer *) sender;

The left and right button in the upper part of the title status bar view of the Mainview
-(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>//gesture at the end of the X #define KENDX frame.origin.x//Left View width #define Kleftwidth _ The width of the leftView.frame.size.width//Right view is #define KRIGHTWIDTH _rightview.frame.size.width//The Advance declaration of the agreement @protocol Lefttablev

Iewcontrollerdelegate; @interface Beyondviewcontroller () <LeftTableViewControllerDelegate> {//fingers pressed, remember that Mainview's starting x cgfloat _start
  
  X
  Member variables, remember the example of the left controller Lefttableviewcontroller *_LEFTVC;
  
  
  Member variable, remember the instance of the right controller Rightviewcontroller *_RIGHTVC;
  
Dictionary, remember all the instances of the sub-controller, to avoid the creation of nsmutabledictionary *_columnviewcontrollers each time; @end @implementation Beyondviewcontroller//Hidden status bar-(BOOL) Prefersstatusbarhidden {return YES}-(void) Viewdidloa
  
d {[Super viewdidload];  _titlebtn.backgroundcolor = [Uicolor Clearcolor];
  
  0 dictionary, remember all the instances of the sub-controller, avoid each time to re-create _columnviewcontrollers = [Nsmutabledictionary dictionary]; 0, set the navigation bar bar background for NetEase Red//[[uinavigationbar appearance] setbackgroundimage:[uiimage imagenamed:@ "Bg.png"] forbarmetrics
  : Uibarmetricsdefault];
  
  Change the status bar color to the default style//[uiapplication Sharedapplication].statusbarstyle = Uistatusbarstyledefault;
  1, add the left controller's view to the left view inside _LEFTVC = [[Lefttableviewcontroller alloc]init]; Key code in order to get to the left of a row of the controller is clicked, the corresponding column data model object, the main controller to become the left controller agent, adhere to its fixed protocol, the implementation of the Protocol method, so that the left controller is clicked line number corresponding to the data model object _
  Leftvc.delegate = self;
  
  _leftvc.view.frame = Self.leftView.bounds;
  
  [Self.leftview Addsubview:_leftvc.view];
  
  2, by the same token, add the right controller view to the right view inside _RIGHTVC = [[Rightviewcontroller alloc]init];
  
  _rightvc.view.frame = Self.rightView.bounds;

  [Self.rightview Addsubview:_rightvc.view];
  
  
3, the first load time, it should show the news sub-column controller to the navigation controller, and then add the navigation controller view inside the Mainview [self firstloading]; ///Custom method, first time loading, you should display the controller of the news sub-column to the navigation controller, and then add the navigation controller's view to the Mainview-(void) firstloading {column * column = [column columnnamed:@ "News" I
  
  mgname:@ "News.png" classname:@ "Newsviewcontroller"];
Only need to manually invoke a Leftviewcontroller proxy method, lefttableviewrowclicked, pass a news sub column can [self lefttableviewrowclicked:column]; //pan-drag gesture processing-(ibaction) Pangesture: (Uipangesturerecognizer *) Sender {//If the state is just pressed, remember that the Mainview start x if (uigest
  Urerecognizerstatebegan = = sender.state) {_startx = self.mainview.frame.origin.x;
  
  }//Pan-drag distance cgpoint delta = [Sender Translationinview:_mainview];
  
  CGRect frame = self.mainView.frame;
  
  Calculate the new X value and do robustness judgment 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, hide one of the if (Kendx > 0) {//NSLog (@ "--the invocation is quite high--");
    _rightview.hidden = YES;
  _leftview.hidden = NO; else {_rightview.hidden = NO;
  _leftview.hidden = YES; if (uigesturerecognizerstateended = = sender.state) {//gesture at the end of the time, you need to make robust judgment//2, analyze the position
      X, decide how far to expand///2.1 If you just drag a little to the right and the width of the left view less than 1/2, then 0 if (Kendx < 0.5*kleftwidth && kendx >= 0) {
    kendx = 0; }else if (kendx >= 0.5*kleftwidth && kendx <=) {//2.2 If you drag the right kleftwidth, the width of the left view greater than 1/2, though not yet in place, is
    Can be considered to be in place kendx = Kleftwidth; }else if (Kendx >-0.5*krightwidth && kendx <= 0) {//2.3 If you just drag a little to the left, the width of the right view less than 1/2 is 0 kend
    X = 0; }else if (kendx <=-0.5*krightwidth) {//2.4 If you drag the half to the left, the width of the right view greater than 1/2, although not yet in place, can also be considered to be in place kendx =-Kright
    Width;  ///The 2nd Method///starting for 0,delta.x greater than 0 represents right sliding if (_startx = 0 && delta.x >0) {kendx =
    Kleftwidth;
    }else if (_startx = = 0 && delta.x < 0) {//starting at 0,delta.x less than 0 representing left sliding kendx =-krightwidth; }else if (_startx= = Kleftwidth && delta.x < 0 {//starting for kleftwidth,delta.x is less than 0 representing left sliding kendx = 0; }else if (_startx = =-Krightwidth && delta.x > 0) {//Starting with-krightwidth,delta.x greater than 0 representing right sliding kendx = 0
    ; }//Finally, set the Mainview new frame [UIView animatewithduration:0.2 animations:^{Self.mainView.fram
  E=frame;
  
  
  
  }];
  
Finally, add a shadow effect to the layer where the Mainview resides [self addshadowformainviewwithendx:kendx]; ///custom method to add a shadow effect to the layer on which the Mainview is located (a very high frequency of invocation)-(void) Addshadowformainviewwithendx: (cgfloat) EndX {//1, click Engineering, plus sign, import 3rd party frame #i
  Mport <QuartzCore/QuartzCore.h>//2, get Mainview on the layer, set the shadow Parameters//NSLog (@ "call very high 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 aA temporary variable cgfloat startx = _mainview.frame.origin.x;
  
  
  Add a shadow effect to the layer where Mainview is located [self AddShadowFormainViewWithEndX:sender.tag = = 1?1:-1];
  Define a temporary variable cgfloat tempendx = 0;
    The left button is clicked if (1 = sender.tag) {//Hide right half _leftview.hidden = NO;
    
    _rightview.hidden = YES;
    if (StartX = = 0) {tempendx = Kleftwidth;
    }else if (startx = = kleftwidth) {tempendx = 0;
    } else {/Click the right button to hide the left half _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, set Mainview x, parameter is endx [self setmainviewx:tempendx];
  }//Extracted public code, set Mainview x, 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, the proxy method of the left controller, is invoked when a line in the left controller is clicked- (void) lefttableviewrowclicked: (ID) columnselected {column *column = (column *) columnselected;
  
  
  
  1, close the left control =======================//Invoke the extracted public code, set the Mainview x, the parameter is EndX [self setmainviewx:0];
  
  2, change the caption button above the text _titlebtn.titlelabel.text = Column.columnname; According to the class name in the column data model, the controller of the corresponding column is instantiated, and it is set as the root controller of the navigation controller, and the view of the navigation controller is added to the Mainview in order to conveniently set the navigation bar, and the Jump//2 of each controller is taken from the cached dictionary, if the sub controller
  The dictionary has been created by the child controller, directly removed to use uiviewcontroller *COLUMNVC = _columnviewcontrollers[column.columnclassname];
    If the controller for the column is not saved in the child controller dictionary, then the Child controller if (COLUMNVC = = nil) {Class c = nsclassfromstring (Column.columnclassname) is created;
    COLUMNVC = [[C Alloc]init];
  And be sure to put it in the Child controller dictionary, Save up [_columnviewcontrollers SETOBJECT:COLUMNVC forKey:column.columnClassName]; //4, remove the displayed old child view if (_contentview.subviews.count > 0) {uiview *oldview = [_contentview in Contentview]
    SUBVIEWS][0];
  [Oldview Removefromsuperview]; //5, and finally add the view of the child controller to Contentview, showing columnVC.view.frame =_contentview.bounds;
  [Self.contentview AddSubview:columnVC.view];
  NSLog (@ "%@", Self.contentview); Before you add to Mainview, get the mainview of the navigation controller and remove it (if any) before adding the new column's sub controller to the Navigation Controller container, and note that you can use the dictionary to remember all the instances of the column controller,
 This avoids every time alloc create a new column controller, but only according to the class name, from the dictionary out of the first instantiated the same column of the child controller can be} @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 represents a column
@interface column:nsobject
//Column name
@property (nonatomic,copy) nsstring *columnname;
Column Picture name
@property (nonatomic,copy) nsstring *columnimgname;
column corresponding to the controller class name
@property (nonatomic,copy) nsstring *columnclassname;

UI controls are weak, strings are copy, and other objects use strong

//Provide a class method, a constructor, that returns the object that encapsulates the data (the return ID can also)
+ (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

//Returns an object instance containing the name of the column's corresponding controller
+ (column *) Columnnamed: (NSString *) columnName imgname: (NSString *) columnimgname className: (NSString *) Columnclassname
{
  //To use Self
  for compatible subclasses Column *column = [[self alloc]init];
  Column.columnname = ColumnName;
  Column.columnimgname = Columnimgname;
  Column.columnclassname = Columnclassname;
  return column;
}

@end

Left-side controller defined protocol LeftTableViewControllerDelegate.h

//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 the proxy/protocol defined by the "Column.h"
//Left controller, which by calling its own member property (that is, the proxy), Pass the data out (to its agents) (in fact, the main controller wants data, so the main controller in the instance of the left controller, the left controller to set the agent for the main 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>
//Advance declaration of the agreement
@protocol lefttableviewcontrollerdelegate;


@interface Lefttableviewcontroller:uitableviewcontroller
//agents use weak to prevent cyclic problems, can be any type, but 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 ()
{
Column array, save the left column in the list of all the column objects
Nsarray *_arr;
}

@end

@implementation Lefttableviewcontroller

-(void) viewdidload
{
[Super Viewdidload];
News section
Column *newscolumn = [Column columnnamed:@ "News" imgname:@ "News.png" classname:@ "Newsviewcontroller"];
Picture column
Column *piccolumn = [column columnnamed:@ "Picture" imgname:@ "Pic.png" classname:@ "Picviewcontroller"];
Picture column
Column *commentcolumn = [column columnnamed:@ "thread" imgname:@ "Comment.png" classname:@ "Commentviewcontroller"];
Later to add columns, as long as the change here is OK


Add a Column object, all at once, to an immutable group
_arr = @[newscolumn,piccolumn,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:indexpath];
//
UITableViewCell *cell = [TableView dequeuereusablecellwithidentifier:cellid];

if (cell = = nil) {
cell = [[UITableViewCell alloc]initwithstyle:uitableviewcellstyledefault reuseidentifier:cellid];
}

Set unique data
Column *column = _arr[indexpath.row];
Cell.textLabel.text = Column.columnname;
Cell.imageView.image = [UIImage imageNamed:column.columnImgName];
return cell;
}

Click on a line, the main view of the master must display the contents of the corresponding columns, so you must instantiate the corresponding click of the column controller, and add to the navigation controller, invoke the proxy method to pass data to the agent to use, the agent is in fact the main controller
-(void) TableView: (UITableView *) TableView Didselectrowatindexpath: (Nsindexpath *) Indexpath
{
First remove the default click Highlight Color
[TableView Deselectrowatindexpath:indexpath Animated:yes];
Take out the data model of the corresponding row (column)
Column *column = _arr[indexpath.row];

if ([Self.delegate respondstoselector: @selector (lefttableviewrowclicked:)]) {

Pass data to the main controller Beyondviewcontroller, via proxy
Key Code ~
[Self.delegate Lefttableviewrowclicked:column];
}


}
@end

Rightviewcontroller.xib

Newsviewcontroller.xib

Picviewcontroller.xib

Commentviewcontroller.xib