IOS Imitation side drawer effect implementation code _ios

Source: Internet
Author: User

The effect chart is as follows


Code implementation and the following analysis of ideas:
Code to create a navigation controller
In APPDELEGATE.M

#import "AppDelegate.h"
#import "ViewController.h"
@interface appdelegate ()

@end

@implementation Appdelegate


-(BOOL) Application: (UIApplication *) application didfinishlaunchingwithoptions: (NSDictionary *) launchoptions {

  Self.window = [[UIWindow alloc] Initwithframe:[uiscreen mainscreen].bounds];
  Viewcontroller * VC = [[Viewcontroller alloc] init];
You must initialize the navigation controller's root controller
  Uinavigationcontroller * nav = [[Uinavigationcontroller alloc] INITWITHROOTVIEWCONTROLLER:VC] ;
  Self.window.rootViewController = nav;
  [Self.window makekeyandvisible];
  Return YES
}

In VIEWCONTROLLER.M


//VIEWCONTROLLER.M
//Pbsliedmenu////
Created by
Pepopo on 16/4/21.
COPYRIGHT©2016 year Pepopo. All rights reserved.

#import "ViewController.h"
#define KSCREENH [uiscreen mainscreen].bounds.size.height
#define Kscreenw [UIScreen mainscreen].bounds.size.width
#define KNAVW
@interface Viewcontroller () < Uitableviewdelegate,uitableviewdatasource>

@property (nonatomic, strong) UITableView *tableview;
/** record whether the sidebar is open
/@property (nonatomic, assign) BOOL openslide;
/** Sidebar button * *
@property (nonatomic, strong) Uibarbuttonitem *btnleft;

@end

Use a bool value to record whether the left view is open or closed. Change the value of the record TableView state on each click
Use properties to save sidebar buttons that are disabled when the left side of the tableview is ejected or retracted during animation.

@implementation Viewcontroller #pragma mark-Select a Cell agent Method-(void) TableView: (UITableView *) TableView Didselectrowatindexpath: (Nsindexpath *) indexpath{UITableViewCell * cell = [TableView Cellforrowatindexpath:indexpath
  ];
  NSLog (@ "%@", Cell.textLabel.text);
Uncheck the cell immediately after selecting [TableView deselectrowatindexpath:indexpath animated:yes]; #pragma mark-tableview Data Source-(Nsinteger) TableView: (UITableView *) TableView numberofrowsinsection: (nsinteger) Section

{return 20;} -(UITableViewCell *) TableView: (UITableView *) TableView Cellforrowatindexpath: (Nsindexpath *) indexPath{static
  NSString * ID = @ "Cell";
  UITableViewCell * cell = [TableView dequeuereusablecellwithidentifier:id Forindexpath:indexpath];
  Cell.textLabel.text = [NSString stringwithformat:@ "I am%zd", Indexpath.row];
  Cell.backgroundcolor = [Uicolor Orangecolor];
return cell;
  }-(void) viewdidload {[Super viewdidload];
  Self.view.backgroundColor = [Uicolor Whitecolor];
  [Self Initleftbarbutton];
 Register cell [Self.tableview Registerclass:[uitableviewcell class] forcellreuseidentifier:@ "cell"];

 }

Note: The call to Self.tableview while registering the cell calls lazy loading, at which point TableView has been created. You must create it first, otherwise a small bug is that when TableView first pops up from the screen (0,0) point, Instead of the entire tableview pops up from the left.

#pragma mark-Initialize the sidebar button-(void) initleftbarbutton{UIButton * Btnleft = [[UIButton alloc] init];
  Btnleft.frame = CGRectMake (0, 0, 90, 40);
  [Btnleft settitle:@ "side column" Forstate:uicontrolstatenormal];
  [Btnleft Settitlecolor:[uicolor Blackcolor] forstate:uicontrolstatenormal];
  [Btnleft addtarget:self Action: @selector (DIDLEFTBTN) forcontrolevents:uicontroleventtouchupinside];
  Self.navigationItem.leftBarButtonItem = [[Uibarbuttonitem alloc] initwithcustomview:btnleft];
Self.btnleft = Self.navigationItem.leftBarButtonItem; #pragma mark-Lazy load TableView-(UITableView *) tableview{if (_tableview = = nil) {_tableview = [[UITableView All
    OC] init];
    _tableview.delegate = self;
    _tableview.datasource = self;
    _tableview.backgroundcolor = [Uicolor Orangecolor];
    First click TableView from the top left corner pop-up, optimization scheme-first create a tableview cgfloat hight = kscreenh;
    CGFloat x = 0;
    CGFloat y = knavw;
    CGFloat width = 0;
    _tableview.frame = CGRectMake (x, y, width, hight); Suppress Vertical rollMoving bar _tableview.showsverticalscrollindicator = NO;
return _tableview;

 }

Lazy load when the direct creation of TableView, so that its width = 0 can be.

#pragma mark-click on the sidebar button to eject TableView
-(void) didleftbtn{
  
  //disable button wait for animation to finish before enabling button
  self.btnLeft.enabled = NO;
  CGFloat hight = kscreenh;
  CGFloat x = 0;
  CGFloat y = knavw;
  if (!self.openslide) {
    //Add animation
    [UIView animatewithduration:0.3 animations:^{
      cgfloat width = kscreenw/3;< C11/>self.tableview.frame = CGRectMake (x, y, width, hight);
    [Self.view AddSubview:self.tableView];
  } else {
    [uiview animatewithduration:0.3 animations:^{
      cgfloat width = 0;
      Self.tableView.frame = CGRectMake (x, y, width, hight);}
    ];
  Finished animation suppresses button
  [self performselector: @selector (setbtnleftenabled) Withobject:nil afterdelay:0.3];
  Monitor if the sidebar opens if
  (self.openslide = yes) {
    self.openslide = NO;
  } else {
    self.openslide = yes;
  }
}

Click on the sidebar button to eject the TableView, the process of animation to perform, will not appear blunt. TableView width from 0---> screen width of One-third
Records the status of the TableView open.
The side bar button is disabled during animation, because the execution time of the code is completed, the animation time is 0.3s, then the delay 0.3s suppresses the sidebar button.

Do not repeatedly create TableView
//#pragma mark-Remove TableView
//-(void) removesliedview{
/  //// Self.tableview Removefromsuperview];  self.btnLeft.enabled = YES;
#pragma mark-animation finishes enabling the sidebar button
-(void) setbtnleftenabled{
  
  self.btnLeft.enabled = YES;
  Animation finished let the first cell appear at the top
  self.tableView.contentOffset = cgpointmake (0, 0);
}


-(void) didreceivememorywarning {
  [super didreceivememorywarning];
  Dispose of any of the can is recreated.
}

@end

A previous mistake was to click the Sidebar button to create TableView, and then click Destroy TableView, which is more performance-intensive. Create TableView by lazy loading, and take back the tableview when it's width = 0.
As shown in the illustration above, when sliding TableView, click again to TableView or slide the position, will not revert to the beginning of the cell labeled 0 as the most displayed cell. Optimization scheme: Let the TableView offset Contentoffset equals 0. The code cannot be written in an animated code that pops up TableView and reclaims TableView, because it can be seen. Written in the code after the animation has finished executing.

Source code Address: Https://git.oschina.net/alexpei/PBSliedMenu.git

The above is the entire content of this article, I hope to help you learn.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.