現(xiàn)在基本上每一個(gè)App中左劃都會(huì)出現(xiàn)一個(gè)頁(yè)面，基本上都是只占主頁(yè)面的一部分，效果就像是一個(gè)抽屜一樣。最近在寫(xiě)項(xiàng)目時(shí)，關(guān)于如何達(dá)到抽屜效果，總結(jié)了一些東西。
先看看效果圖：

實(shí)現(xiàn)過(guò)程

首先我們需要去創(chuàng)建一個(gè)新的視圖控制器，讓它作為我們的要實(shí)現(xiàn)的抽屜的根視圖，在此視圖控制器我們要添加對(duì)應(yīng)的左視圖，要是需要右視圖也可以添加，然后設(shè)定方法：

@property (nonatomic, strong) UIViewController *rootViewController;
//左側(cè)視圖
@property (nonatomic, strong) UIViewController *leftViewController;
//菜單寬度
@property (nonatomic, assign, readonly) CGFloat menuWidth;
//留白寬度
@property (nonatomic, assign, readonly) CGFloat emptyWidth;
//是否允許滾動(dòng)
@property (nonatomic ,assign) BOOL slideEnabled;
//創(chuàng)建方法
-(instancetype)initWithRootViewController:(UIViewController*)rootViewController;
//顯示主視圖
-(void)showRootViewControllerAnimated:(BOOL)animated;
//顯示左側(cè)菜單
-(void)showLeftViewControllerAnimated:(BOOL)animated;

接著我們將定義的方法進(jìn)行實(shí)現(xiàn)：

-(instancetype)initWithRootViewController:(UIViewController*)rootViewController{
? ? if (self = [super init]) {
? ? ? ? _rootViewController = rootViewController;
? ? ? ? [self addChildViewController:_rootViewController];
? ? ? ? [self.view addSubview:_rootViewController.view];
? ? ? ? [_rootViewController didMoveToParentViewController:self];
? ? }
? ? return self;
}

- (void)showLeftViewControllerAnimated:(BOOL)animated {
? ? if (!_leftViewController) {return;}
? ? [self.view sendSubviewToBack:_rightViewController.view];
? ? _coverView.hidden = false;
? ? [_rootViewController.view bringSubviewToFront:_coverView];
? ? [UIView animateWithDuration:[self animationDurationAnimated:animated] animations:^{
? ? ? ? _rootViewController.view.center = CGPointMake(_rootViewController.view.bounds.size.width/2 + self.menuWidth, _rootViewController.view.center.y);
? ? ? ? _leftViewController.view.frame = CGRectMake(0, 0, [self menuWidth], self.view.bounds.size.height);
? ? ? ? _coverView.alpha = MaxCoverAlpha;
? ? }];
}

然后我們需要添加一個(gè)分類(lèi)，讓它向前聲明新的視圖控制器，添加一個(gè)創(chuàng)建視圖的方法使用懶加載：

- (XLSlideMenuViewController *)xl_sldeMenu {
? ? UIViewController *sldeMenu = self.parentViewController;
? ? while (sldeMenu) {
? ? ? ? if ([sldeMenu isKindOfClass:[XLSlideMenuViewController class]]) {
? ? ? ? ? ? return (XLSlideMenuViewController *)sldeMenu;
? ? ? ? } else if (sldeMenu.parentViewController && sldeMenu.parentViewController != sldeMenu) {
? ? ? ? ? ? sldeMenu = sldeMenu.parentViewController;
? ? ? ? } else {
? ? ? ? ? ? sldeMenu = nil;
? ? ? ? }
? ? }
? ? return nil;
}

然后我們?cè)谑褂贸閷系臅r(shí)候，需要西安去設(shè)置根視圖，然后將左側(cè)視圖初始化并將左視圖添加在前邊設(shè)置好的左視圖屬性上：

UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:tabBarControllerTest];
? ? nav.modalPresentationStyle = UIModalPresentationFullScreen;
? ??
? ? LeftViewController *leftVC = [[LeftViewController alloc] init];
? ? XLSlideMenuViewController *slideMenu = [[XLSlideMenuViewController alloc] initWithRootViewController:nav];
? ? slideMenu.leftViewController = leftVC;
? ? self.window.rootViewController = slideMenu;
? ? slideMenu.modalPresentationStyle = UIModalPresentationFullScreen;
? ? [self presentViewController:slideMenu animated:NO completion:nil];

最后在我們還可以添加點(diǎn)擊事件，并且添加拖拽方法，使操作更加簡(jiǎn)單：

-(void)panChanged:(UIPanGestureRecognizer*)pan{
? ? //拖拽的距離
? ? CGPoint translation = [pan translationInView:self.view];
? ? //移動(dòng)主控制器
? ? _rootViewController.view.center = CGPointMake(_originalPoint.x + translation.x, _originalPoint.y);
? ? //判斷是否設(shè)置了左右菜單
? ? if (!_rightViewController && CGRectGetMinX(_rootViewController.view.frame) <= 0 ) {
? ? ? ? _rootViewController.view.frame = self.view.bounds;
? ? }
? ? if (!_leftViewController && CGRectGetMinX(_rootViewController.view.frame) >= 0) {
? ? ? ? _rootViewController.view.frame = self.view.bounds;
? ? }
? ? //滑動(dòng)到邊緣位置后不可以繼續(xù)滑動(dòng)
? ? if (CGRectGetMinX(_rootViewController.view.frame) > self.menuWidth) {
? ? ? ? _rootViewController.view.center = CGPointMake(_rootViewController.view.bounds.size.width/2 + self.menuWidth, _rootViewController.view.center.y);
? ? }
? ? if (CGRectGetMaxX(_rootViewController.view.frame) < self.emptyWidth) {
? ? ? ? _rootViewController.view.center = CGPointMake(_rootViewController.view.bounds.size.width/2 - self.menuWidth, _rootViewController.view.center.y);
? ? }
? ? //判斷顯示左菜單還是右菜單
? ? if (CGRectGetMinX(_rootViewController.view.frame) > 0) {
? ? ? ? //顯示左菜單
? ? ? ? [self.view sendSubviewToBack:_rightViewController.view];
? ? ? ? //更新左菜單位置
? ? ? ? [self updateLeftMenuFrame];
? ? ? ? //更新遮罩層的透明度
? ? ? ? _coverView.hidden = false;
? ? ? ? [_rootViewController.view bringSubviewToFront:_coverView];
? ? ? ? _coverView.alpha = CGRectGetMinX(_rootViewController.view.frame)/self.menuWidth * MaxCoverAlpha;
? ? }else if (CGRectGetMinX(_rootViewController.view.frame) < 0){
? ? ? ??
? ? ? ? //更新遮罩層的透明度
? ? ? ? _coverView.hidden = false;
? ? ? ? [_rootViewController.view bringSubviewToFront:_coverView];
? ? ? ? _coverView.alpha = (CGRectGetMaxX(self.view.frame) - CGRectGetMaxX(_rootViewController.view.frame))/self.menuWidth * MaxCoverAlpha;
? ? }
}

然后左視圖中的具體內(nèi)容我們就可以自己去設(shè)置了，這樣就達(dá)到了一個(gè)“抽屜”的效果。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: