您的当前位置:首页iOS 抽屉效果 ViewDeck

iOS 抽屉效果 ViewDeck

2024-12-12 来源:哗拓教育

ViewDeck

  • 支持左边和右边侧边栏
  • 抽屉拉出效果,带有黑色透明遮罩层
  • 侧边栏显示内容尺寸可以控制
  • 在首页跳转页面时不用设置侧边栏是否可以滑动
  • 省心省力,快速集成
  • 核心缺点:关闭时默认为点击事件
ViewDeck抽屉效果.gif
1.配置侧边栏
    UITabBarController *tarBarCtr=[[UITabBarController alloc]init];
    [tarBarCtr setViewControllers:[NSArray arrayWithObjects:centNvi,centSecNvi, nil]];
    _rootTabbarCtrV=tarBarCtr;
 //左边view 采用xib多种形式研究
    LeftSideViewController *leftView =[[LeftSideViewController alloc]initWithNibName:@"LeftSideViewController" bundle:[NSBundle mainBundle]];
    UINavigationController *leftNvi=[[UINavigationController alloc]initWithRootViewController:leftView];
    //右边
    RightSideViewController *rightView=[[RightSideViewController alloc]init];
    UINavigationController *rightNvi=[[UINavigationController alloc]initWithRootViewController:rightView];
    //初始化ViewDeck
    IIViewDeckController *viewDeckController =[[IIViewDeckController alloc]initWithCenterViewController:_rootTabbarCtrV leftViewController:leftNvi rightViewController:rightNvi];
    viewDeckController.delegate=self;
    self.window.rootViewController=viewDeckController;
2.首页点击侧边栏按钮和跳转下一页

通过openSide:(IIViewDeckSide)方法可以左、右侧边栏

typedef NS_ENUM(NSInteger, IIViewDeckSide) {
    IIViewDeckSideNone = 0, /// This identifies no side, basically meaning that neither the left nor the right side is relevant.
    IIViewDeckSideLeft, /// This identifies the left view controller of an IIViewDeckController
    IIViewDeckSideRight, /// This identifies the right view controller of an IIViewDeckController

    IIViewDeckSideUnknown = IIViewDeckSideNone, /// This has the same logic as IIViewDeckSideNone but means that the side is yet unknown.

    IIViewDeckLeftSide __deprecated_enum_msg("Use IIViewDeckSideLeft instead.") = IIViewDeckSideLeft,
    IIViewDeckRightSide __deprecated_enum_msg("Use IIViewDeckSideRight instead.") = IIViewDeckSideRight,
};

//点击打开左侧侧边栏
-(void)actionOfTapLeftEvent{
    [self.viewDeckController openSide:IIViewDeckSideLeft animated:YES];
}
//跳转下一页
-(void)actionOfTapRightEvent{
    InfoViewController *infoView=[[InfoViewController alloc]init];
    [infoView setHidesBottomBarWhenPushed:YES];
//不需要类似RESideMenu把panGestureEnabled关闭
    [self.navigationController pushViewController:infoView animated:YES];
}
3.侧边栏显示内容宽度设置和跳转

通过preferredContentSize属性设置侧边栏的内容宽度尺寸

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
   //ViewDeck默认高度始终是视图控制器本身的高度上
    self.preferredContentSize = CGSizeMake(ScreenWidth/3*2, ScreenHeight);
    self.view.backgroundColor=[UIColor whiteColor];
    
}
- (IBAction)goNextView:(UIButton *)sender {
    /**
     关闭侧边栏
     */
    [self.viewDeckController closeSide:YES];
    UINavigationController *navCtr= ((AppDelegate*)[UIApplication sharedApplication].delegate).rootTabbarCtrV.selectedViewController;
    InfoViewController *infoView=[[InfoViewController alloc]init];
    [infoView setHidesBottomBarWhenPushed:YES];
    [navCtr pushViewController:infoView animated:YES];
}
4.关闭侧边栏时,默认为点击关闭,非滑动关闭

IIViewDeckController.mm 源码文件中,decorationTapGestureRecognizer是关闭侧边栏手势,为UITapGestureRecognizer类型

- (UITapGestureRecognizer *)decorationTapGestureRecognizer {
    if (_decorationTapGestureRecognizer) {
        return _decorationTapGestureRecognizer;
    }

    let recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(closeGestureRecognized:)];
    _decorationTapGestureRecognizer = recognizer;
    return _decorationTapGestureRecognizer;
}
- (nullable UIView *)decorationViewForTransitionWithContext:(id<IIViewDeckTransitionContext>)context {
    if (let decorationView = self.currentDecorationView) {
        return decorationView;
    }

    let decorationView = [[UIView alloc] initWithFrame:self.view.bounds];
    decorationView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.75];
    [decorationView addGestureRecognizer:self.decorationTapGestureRecognizer];
    self.currentDecorationView = decorationView;
    return decorationView;
}

REFrostedViewController

  • 侧边栏显示内容尺寸可以控制
  • 抽屉拉出效果,带有黑色透明遮罩层
  • 可以侧滑关闭(重点)
  • 缺点:仅支持单边侧边栏(左边或右边)
  • 缺点:显示侧边栏时需要手动实现滑动手势,会有隐藏隐患
  • 缺点:拉出和关闭时,黑色遮罩并不完美
  • 缺点:已经停止维护了三四年了(老古董了)
1.配置侧边栏
    //侧边栏
    REFMenuViewController *menuView = [[REFMenuViewController alloc]init];
   REFrostedViewController *rostedViewController = [[REFrostedViewController alloc] initWithContentViewController:tarBarCtr menuViewController:menuView];
    rostedViewController.direction = REFrostedViewControllerDirectionLeft;
    rostedViewController.liveBlurBackgroundStyle = REFrostedViewControllerLiveBackgroundStyleDark;
    rostedViewController.liveBlur = YES;
    rostedViewController.limitMenuViewSize = YES;
    rostedViewController.backgroundFadeAmount=0.5;
    rostedViewController.delegate = self;
    rostedViewController.menuViewSize=CGSizeMake(leftSideMeunWidth, ScreenHeight);
2.首页点击侧边栏按钮和跳转下一页
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.navigationItem.title=@"首页";
    UIBarButtonItem *leftBarButton = [[UIBarButtonItem alloc]initWithTitle:@"左边栏" style:UIBarButtonItemStylePlain target:self action:@selector(actionOfTapLeftEvent:)];
    self.navigationItem.leftBarButtonItem=leftBarButton;
    UIBarButtonItem *rightBarButton=[[UIBarButtonItem alloc]initWithTitle:@"下一页" style:UIBarButtonItemStylePlain target:self action:@selector(actionOfTapRightEvent)];
    self.navigationItem.rightBarButtonItem=rightBarButton;
    /**
     如需要侧滑显示侧边栏,则要实现滑动手势
     */
    [self.view addGestureRecognizer:[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGestureRecognized:)]];
    [self creatVC];
}
//点击显示侧边栏
-(void)actionOfTapLeftEvent:(UIButton *)sender{
    [self.frostedViewController presentMenuViewController];
}
//滑动显示侧边栏
- (void)panGestureRecognized:(UIPanGestureRecognizer *)sender{
    [self.frostedViewController panGestureRecognized:sender];
}
3.侧边栏关闭和跳转
//跳转下一页
-(void)actionOfTapRightEvent{
    /**
     关闭右侧侧边栏
     */
    [self.frostedViewController hideMenuViewController];
    
    UINavigationController *navCtr= ((AppDelegate*)[UIApplication sharedApplication].delegate).rootTabbarCtrV.selectedViewController;
    REFInfoViewController *infoView=[[REFInfoViewController alloc]init];
    [infoView setHidesBottomBarWhenPushed:YES];
    [navCtr pushViewController:infoView animated:YES];
}
4.当视图内含有UIScrollView时,会导致侧滑失效,解决方案之一可以继承UIScrollView并实现如下:
/**
 *  重写手势,如果是左滑,则禁用掉scrollview自带的;右滑很少出现,此处未实现
 */
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{
    if([gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]])
    {
        UIPanGestureRecognizer *pan = (UIPanGestureRecognizer *)gestureRecognizer;
        if([pan translationInView:self].x > 0.0f && self.contentOffset.x == 0.0f)
        {
            return NO;
        }
    }
    return [super gestureRecognizerShouldBegin:gestureRecognizer];
}
显示全文