ios仿側(cè)邊抽屜效果實(shí)現(xiàn)代碼
本文實(shí)例為大家分享了ios仿側(cè)邊抽屜效果的具體代碼,供大家參考,具體內(nèi)容如下
效果圖如下
代碼實(shí)現(xiàn)以及思路下面分析:
代碼創(chuàng)建導(dǎo)航控制器
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]; //必須要初始化導(dǎo)航控制器的根控制器 UINavigationController * nav = [[UINavigationController alloc] initWithRootViewController:vc]; self.window.rootViewController = nav; [self.window makeKeyAndVisible]; return YES; }
viewcontroller.m中
// // ViewController.m // PBSliedMenu // // Created by 裴波波 on 16/4/21. // Copyright © 2016年 裴波波. All rights reserved. // #import "ViewController.h" #define kScreenH [UIScreen mainScreen].bounds.size.height #define kScreenW [UIScreen mainScreen].bounds.size.width #define kNavW 64 @interface ViewController ()<UITableViewDelegate,UITableViewDataSource> @property (nonatomic, strong) UITableView *tableView; /** 記錄是否打開側(cè)邊欄 */ @property (nonatomic, assign) BOOL openSlide; /** 側(cè)欄按鈕 */ @property (nonatomic, strong) UIBarButtonItem *btnLeft; @end
用一個(gè)bool值來記錄左側(cè)view是打開還是關(guān)閉狀態(tài).每次點(diǎn)擊都要改變記錄tableView狀態(tài)的值
用屬性保存 側(cè)欄 按鈕,用來當(dāng)左側(cè)tableView正在彈出或者收回執(zhí)行動畫過程中禁用.
@implementation ViewController #pragma mark - 選中某個(gè)cell代理方法 -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ UITableViewCell * cell = [tableView cellForRowAtIndexPath:indexPath]; NSLog(@"%@",cell.textLabel.text); //選中cell后立即取消選中 [tableView deselectRowAtIndexPath:indexPath animated:YES]; } #pragma mark - tableView數(shù)據(jù)源 -(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:@"我是%zd",indexPath.row]; cell.backgroundColor = [UIColor orangeColor]; return cell; } - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; [self initLeftBarButton]; //注冊cell [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"]; }
注意:注冊cell的同時(shí)調(diào)用了 self.tableView 則調(diào)用了懶加載,此時(shí)tableView已經(jīng)創(chuàng)建了.必須要先創(chuàng)建,否則有一個(gè)小bug就是,當(dāng)tableView第一次彈出的時(shí)候會從屏幕的(0,0)點(diǎn)彈出,而不是整個(gè)tableView從左側(cè)彈出.
#pragma mark - 初始化側(cè)欄按鈕 -(void)initLeftBarButton{ UIButton * btnLeft = [[UIButton alloc] init]; btnLeft.frame = CGRectMake(0, 0, 90, 40); [btnLeft setTitle:@"側(cè)欄" 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 - 懶加載tableView -(UITableView *)tableView{ if (_tableView == nil) { _tableView = [[UITableView alloc] init]; _tableView.delegate = self; _tableView.dataSource = self; _tableView.backgroundColor = [UIColor orangeColor]; //第一次點(diǎn)擊tableView從左上角彈出,優(yōu)化方案--先創(chuàng)建出tableView CGFloat hight = kScreenH; CGFloat x = 0; CGFloat y = kNavW; CGFloat width = 0; _tableView.frame = CGRectMake(x, y, width, hight); //取消顯示豎直滾動條 _tableView.showsVerticalScrollIndicator = NO; } return _tableView; }
懶加載的時(shí)候直接創(chuàng)建tableView,讓其寬度 == 0 即可.
#pragma mark - 點(diǎn)擊側(cè)欄按鈕彈出tableView -(void)didLeftBtn{ //禁用button等待動畫執(zhí)行完畢再啟用button self.btnLeft.enabled = NO; CGFloat hight = kScreenH; CGFloat x = 0; CGFloat y = kNavW; if (!self.openSlide) { //添加動畫 [UIView animateWithDuration:0.3 animations:^{ CGFloat width = kScreenW / 3; 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); }]; } //執(zhí)行完畢動畫 取消禁用button [self performSelector:@selector(setBtnLeftEnabled) withObject:nil afterDelay:0.3]; //監(jiān)視側(cè)欄是否打開 if (self.openSlide == YES) { self.openSlide = NO; } else { self.openSlide = YES; } }
點(diǎn)擊 側(cè)欄 按鈕彈出tableView,此過程中讓其動畫執(zhí)行,不會顯得生硬.讓tableView的寬度從0---> 屏幕寬度的三分之一
記錄tableView打開的狀態(tài).
執(zhí)行動畫的過程中禁用 側(cè)欄 按鈕,由于代碼執(zhí)行時(shí)間的瞬間完成的,動畫執(zhí)行時(shí)間是0.3s,則延遲0.3s取消禁用 側(cè)欄 按鈕.
//不用反復(fù)創(chuàng)建tableView //#pragma mark - 移除tableView //-(void)removeSliedView{ // // [self.tableView removeFromSuperview]; // self.btnLeft.enabled = YES; //} #pragma mark - 動畫執(zhí)行完畢啟用"側(cè)欄"按鈕 -(void)setBtnLeftEnabled{ self.btnLeft.enabled = YES; //動畫執(zhí)行完畢讓第一個(gè)cell顯示在最頂端 self.tableView.contentOffset = CGPointMake(0, 0); } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end
之前犯過一個(gè)錯(cuò)誤就是點(diǎn)擊 側(cè)欄 按鈕創(chuàng)建tableView,再點(diǎn)擊 銷毀 tableView,這樣比較耗性能.通過懶加載先創(chuàng)建tableView,收回tableView的時(shí)候讓其寬度 == 0 即可.
上圖演示的可以看出,當(dāng)滑動tableView的時(shí)候,再次點(diǎn)擊進(jìn)去tableView還是滑動的位置,不會恢復(fù)到開始 下標(biāo)為 0 的cell為最上面顯示的cell.優(yōu)化方案:讓tableView的偏移contentOffset等于 0即可.代碼不能寫在 彈出tableView 與 收回 tableView的動畫代碼中,因?yàn)檫@樣會讓人看出來.寫在動畫執(zhí)行完畢后的代碼中.
源代碼地址:https://git.oschina.net/alexpei/PBSliedMenu.git
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
iOS開發(fā)中UIWebView的加載本地?cái)?shù)據(jù)的三種方式
這篇文章主要介紹了iOS開發(fā)中UIWebView的加載本地?cái)?shù)據(jù)的三種方式,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09iOS開發(fā)教程之識別圖片中二維碼功能的實(shí)現(xiàn)
長按識別二維碼這個(gè)功能相信對大家來說都不陌生,最近工作中就遇到了這個(gè)需求,所以下面這篇文章主要給大家介紹了關(guān)于利用iOS識別圖片中二維碼的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-07-07iOS中詳解Block作為property屬性實(shí)現(xiàn)頁面之間傳值
這篇文章主要介紹了iOS中Block作為property屬性實(shí)現(xiàn)頁面之間傳值的相關(guān)知識點(diǎn),以及代碼分享,一起學(xué)習(xí)下吧。2018-02-02針對iOS開發(fā)的一些Xcode使用技巧小結(jié)
這篇文章主要介紹了針對iOS開發(fā)的一些Xcode使用技巧小結(jié),Xcode是Mac上編寫iOS應(yīng)用的開發(fā)環(huán)境,需要的朋友可以參考下2015-12-12IOS property屬性詳細(xì)介紹使用注意事項(xiàng)
這篇文章主要介紹了IOS property屬性詳細(xì)介紹使用注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2017-02-02iOS中幾種定時(shí)器的實(shí)現(xiàn)小結(jié)
這篇文章主要介紹了iOS中幾種定時(shí)器的實(shí)現(xiàn)小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01