iOS開發(fā)實現(xiàn)抽屜效果

更新時間：2022年08月08日 10:40:53 作者：Yeppppppppp

這篇文章主要為大家詳細介紹了iOS開發(fā)實現(xiàn)抽屜效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

iOS開發(fā)之如何實現(xiàn)“抽屜”效果，供大家參考，具體內(nèi)容如下

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

實現(xiàn)過程

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

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

接著我們將定義的方法進行實現(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;
? ? }];
}

然后我們需要添加一個分類，讓它向前聲明新的視圖控制器，添加一個創(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;
}

然后我們在使用抽屜的時候，需要西安去設(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];

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

-(void)panChanged:(UIPanGestureRecognizer*)pan{
? ? //拖拽的距離
? ? CGPoint translation = [pan translationInView:self.view];
? ? //移動主控制器
? ? _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;
? ? }
? ? //滑動到邊緣位置后不可以繼續(xù)滑動
? ? 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è)置了，這樣就達到了一個“抽屜”的效果。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: