項目中根據需求用到了一個界面框架:ViewDeck。項目需要用到左側右側各有一個抽屜視圖,而這個類庫可以極其簡單的實現這個功能,不單單是左右各一個,它可以隨意設置上下左右的抽屜視圖,簡直是360度想怎么抽怎么抽,這里記錄一下使用方法。
先看一下效果圖:
首先是主視圖,也就是中間的視圖:
上方是Navbar,左邊有一個按鈕用來開啟左邊視圖,當然左右視圖都是可以通過左右滑動來開啟的,中間的Label顯示這是哪里的界面,左側有個Button用來測試中間界面是否可以點擊,這些都先不管。
再看左側界面出現的樣子:
可以看到,左邊界面會出現并占據左邊的部分界面,同時保留原中間視圖的一部分,另一部分被擠出去了,當然左邊界面也沒有顯示完全。
再看把右邊視圖滑出來時也是一樣:
現在看看怎么實現,同時也說說ViewDeck常用的方法。
ViewDeck只是一個框架,具體的界面當然還是自己自定義的,因此這里先自定義三個視圖控制器用來放在中間、左邊和右邊的視圖中,然后就可以用這三個視圖來初始化ViewDeck并將其作為根視圖:
//.h文件
@property (strong, nonatomic) IIViewDeckController *deckController;
//.m文件
//中間視圖
CenterViewController *centerView = [[CenterViewController alloc] initWithNibName:@"CenterViewController" bundle:nil];
//左、右視圖
LeftViewController *leftView = [[LeftViewController alloc] initWithNibName:@"LeftViewController" bundle:nil];
RightViewController *rightView = [[RightViewController alloc] initWithNibName:@"RightViewController" bundle:nil];
//初始化ViewDeck
self.deckController = [[IIViewDeckController alloc]initWithCenterViewController:centerView leftViewController:leftView rightViewController:rightView];
//設為根視圖
self.window.rootViewController = self.deckController;
這樣就是一個最簡單的ViewDeck了,擁有左右抽屜,可以滑動出現,再滑回到中間視圖。
如果除了滑動還想實現按鈕來喚出左右視圖呢?就像QQ、知乎之類的效果一樣,也很簡單,為了方便,這里我們將中間視圖包裝成Nav導航視圖,然后以換出左視圖為例,在導航欄上左側添加一個按鈕,在按鈕響應中實現喚出左側視圖:
//.h文件
@property (strong, nonatomic) IIViewDeckController *deckController;
//.m文件
//中間視圖
CenterViewController *centerView = [[CenterViewController alloc] initWithNibName:@"CenterViewController" bundle:nil];
//包裝成Nav
UINavigationController *centerNav = [[UINavigationController alloc]initWithRootViewController:centerView];
//添加Nav左側按鈕
centerView.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithTitle:@"左側" style:UIBarButtonItemStyleDone target:self action:@selector(toLeft)];
//左、右視圖
LeftViewController *leftView = [[LeftViewController alloc] initWithNibName:@"LeftViewController" bundle:nil];
RightViewController *rightView = [[RightViewController alloc] initWithNibName:@"RightViewController" bundle:nil];
//初始化ViewDeck,以Nav作為中間視圖
self.deckController = [[IIViewDeckController alloc]initWithCenterViewController:centerNav leftViewController:leftView rightViewController:rightView];
//設為根視圖
self.window.rootViewController = self.deckController;
//中間導航欄左側按鈕的響應
- (void)toLeft {
//直接打開左側頁面
[self.deckController toggleLeftViewAnimated:YES];
}
當然如果要喚出右側界面也是類似的,這里按鈕可以打開,如果想要按鈕可以返回中間界面呢?更改按鈕響應方法如下:
//中間導航欄左側按鈕的響應
- (void)toLeft {
//判斷是否打開,做出不同響應
if ([self.deckController isSideOpen:IIViewDeckLeftSide]) {//已經打開
[self.deckController closeLeftView];//則關閉左視圖
}
else {//未打開
[self.deckController openLeftView];//則打開左視圖
}
}
應用到右視圖也是類似,其實這里的判斷是否打開以及打開左右視圖的方法很多地方都可以實用,發動腦洞吧。
現在可以通過滑動開啟、關閉左右視圖,那還有沒有別的方法呢?可不可以在打開左右視圖后,隨便點擊一下中間視圖部分就可以回來呢?這是很常見的用戶習慣。還有,既然上面實現了再次點擊按鈕返回中間界面,說明中間界面的控件是可以響應的,那用戶不小心點擊到了不該點的怎么辦,可不可以在打開左右視圖后,禁止中間界面控件的響應呢?當然是可以的。對ViewDeck控制器設置一個值就可以了:
//設置當滑動到左右邊時,中間視圖對點擊的響應
//1.默認設置,點擊中間界面不會返回中間界面,中間界面控件有響應
// self.deckController.centerhiddenInteractivity = IIViewDeckCenterHiddenUserInteractive;
//2.點擊中間界面任何地方無作用,中間界面控件不響應
// self.deckController.centerhiddenInteractivity = IIViewDeckCenterHiddenNotUserInteractive;
//3.點擊中間任何地方可返回中間界面,中間界面控件不響應
self.deckController.centerhiddenInteractivity = IIViewDeckCenterHiddenNotUserInteractiveWithTapToClose;
//4.點擊中間界面任何地方可彈回中間界面,中間界面控件不響應
// self.deckController.centerhiddenInteractivity = IIViewDeckCenterHiddenNotUserInteractiveWithTapToCloseBouncing;
這里對這個值有四種設定方式,分別對應了不同的效果,我覺得最常用的還是第三種,也就是上面說的,禁止對控件響應,并且隨意點擊返回中間界面。圖中的那個Button就是為了測試是否對點擊事件進行響應而設置的。
好像還漏了一個事情,從上面的圖可以看出,左邊和右邊視圖出現時占據屏幕的寬度是不一樣的,在實際的項目中,往往也是根據需要占據不同的寬度,那么怎么設置呢?如下:
//設置左邊視圖顯示時的寬度
self.deckController.leftSize = self.window.frame.size.width - (250);
對右側的設置也是一樣。
基本常用的方法就這些了,不得不說這是一個異常簡單但特別實用的類庫,感謝創作者,github項目原地址為:https://github.com/Inferis/ViewDeck
可以到github下載我的工程:https://github.com/Cloudox/ViewDeckTest