左右侧滑动-----第三方库JASidePanelController使用介绍

跟着老大做第一个外包项目，使用到JASidePanelController，为了实现自己需要的功能阅读了源码，也改了小部分。

 

let viewController = JASidePanelController.init()
viewController.shouldDelegateAutorotateToVisiblePanel = false
viewController.leftPanel = LeftViewController()
viewController.rightPanel = rightViewController()
viewController.centerPanel = UINavigationController(rootViewController: MainViewController())
self.window?.rootViewController = viewController   
初始化一个JASidePanelController对象，设置左右Panel中心Panel，滑动即可，简直不能再简单了
//属性

UIViewController *leftPanel;   // optional左边栏
UIViewController *centerPanel; // required中心栏（必须设置）
UIViewController *rightPanel;  // optional右边栏
UIView *leftPanelContainer;   //左边栏的view
UIView *rightPanelContainer;  //右边栏的view
UIView *centerPanelContainer; //中心栏的view

viewController.shouldDelegateAutorotateToVisiblePanel //自动生成一个左右上方的按钮，点击可以打开左右侧页面
style //样式 
typedef enum _JASidePanelStyle {
   JASidePanelSingleActive = 0, //滑动后，在之前的界面反方向滑动，可以滑动回来
   JASidePanelMultipleActive //反之
} JASidePanelStyle;
pushesSidePanels //当设置为false的时候，在侧边栏出现后，向拖动侧边栏出现的方向，拖动中心页面，你会方向侧边栏跟着一起抖动；true反之
leftGapPercentag 、 rightGapPercentage //顾名思义，左右侧边栏占整个屏幕的百分比
leftFixedWidth 、 rightFixedWidth  //用数值直接设置左右侧边栏的大小
leftVisibleWidth 、 rightVisibleWidth //只读属性，可以查看左右栏所占大小

minimumMovePercentage //打开侧边栏时必须滑动的大小（屏幕大小的百分比）
maximumAnimationDuration //恢复中心页面时，最大耗时
bounceDuration //弹跳时间
bouncePercentage //弹跳距离（屏幕大小百分比）
bounceOnSidePanelOpen //中心页面弹跳，当开打侧边栏的时候，默认true
bounceOnSidePanelClose //中心页面弹跳，当关闭侧边栏的时候，默认false
bounceOnCenterPanelChange //改变中心页面的时候，中心页面弹跳，默认true
recognizesPanGesture //true支持手势，false只支持按钮打开侧边栏
panningLimitedToTopViewController //true 让手势只在UINavigationController/UITabBarController最上层有效，false反之

defaultImage //按钮默认图片
leftButtonForCenterPanel //中心页面左侧按钮
state //状态，并且用KVO控制的
typedef enum _JASidePanelState {
    JASidePanelCenterVisible = 1,
    JASidePanelLeftVisible,
    JASidePanelRightVisible
} JASidePanelState;
centerPanelHidden//当侧边栏出现的时候，是否隐藏中心页面，默认false，其实默认的效果才是侧边栏，不然还不如一个普通的Pages切换页面
visiblePanel //现在显示的界面
allowLeftSwipe、allowRightSwipe //是否允许左右滑动，默认true
allowRightOverpan、allowLeftOverpan //是否允许中心栏可以叠加到侧边栏不可以看到的区域上，默认true
canUnloadRightPanel、canUnloadLeftPanel //当左右栏页面不可以看到的时候，是否把Panel.view RemoveFormSuperView （为了节约内存么？哈哈我也不清楚，猜想是这样的）默认False
shouldResizeRightPanel、shouldResizeLeftPanel //到左右栏出现的时候，时候根据可视大小调整Panel.views的大小
//方法

// 显示panel的方法
- (void)showLeftPanelAnimated:(BOOL)animated;
- (void)showRightPanelAnimated:(BOOL)animated;
- (void)showCenterPanelAnimated:(BOOL)animated;
// 切换左右Panel的显示状态
- (void)toggleLeftPanel:(id)sender;
- (void)toggleRightPanel:(id)sender;
// 设置中心页面是否隐藏，以及不隐藏时，滑动的动画
- (void)setCenterPanelHidden:(BOOL)centerPanelHidden animated:(BOOL)animated duration:(NSTimeInterval) duration;
//默认设置阴影效果，即给centerPanel设置个layer.Shadow，可以修改这个方法，让其呈现扁平化的效果。我们所做的外包也是在这里直接修改了源码，让整个阴影消失的
- (void)styleContainer:(UIView *)container animate:(BOOL)animate duration:(NSTimeInterval)duration;
//设置某个Panel为圆角，其实现在用的更多的不是圆角了，所以可以在方法中注释掉圆角的设置，或者通过修改重写，来定制我们需要的显示效果
- (void)stylePanel:(UIView *)panel;

恩，是这样的，大部分的方法和属性介绍完毕了，再说下这次外包项目中还有一个改动的地方

 <pre name="code" class="plain">   - (void)_showLeftPanel:(BOOL)animated bounce:(BOOL)shouldBounce {
    self.state = JASidePanelLeftVisible;
    [self _loadLeftPanel];
    
    [self _adjustCenterFrame];
    
    //-------修改源码部分
     if ([self.centerPanelContainer viewWithTag:123] == nil)
{
    UIView *view = [[UIView alloc]init];
    view.tag = 123;
    view.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5];
    view.frame = CGRectMake(0,0 , 1000, 1000);
    [self.centerPanelContainer addSubview:view];
}
    //-----------
    if (animated) {
        [self _animateCenterPanel:shouldBounce completion:nil];
    } else {
        self.centerPanelContainer.frame = _centerPanelRestingFrame;	
        [self styleContainer:self.centerPanelContainer animate:NO duration:0.0f];
        if (self.style == JASidePanelMultipleActive || self.pushesSidePanels) {
            [self _layoutSideContainers:NO duration:0.0f];
        }
    }
  
    
    if (self.style == JASidePanelSingleActive) {
        self.tapView = [[UIView alloc] init];
    }
    [self _toggleScrollsToTopForCenter:NO left:YES right:NO];    
}
 - (void)_showLeftPanel:(BOOL)animated bounce:(BOOL)shouldBounce {
    self.state = JASidePanelLeftVisible;
    [self _loadLeftPanel];
    
    [self _adjustCenterFrame];
    
    //-------修改源码部分

我需要一个左侧栏开打，中心栏有蒙板mask的状态，所以在右边栏出现动画之前，给centerPanel添加了一个view

- (void)_showCenterPanel:(BOOL)animated bounce:(BOOL)shouldBounce {
    self.state = JASidePanelCenterVisible;
    
    [self _adjustCenterFrame];
    //源码修改部分
    UIView *maskView = [self.centerPanelContainer viewWithTag:123];
    if( maskView != nil){
        maskView.removeFromSuperview;
    }
    
    if (animated) {
        [self _animateCenterPanel:shouldBounce completion:^(__unused BOOL finished) {
            self.leftPanelContainer.hidden = YES;
            self.rightPanelContainer.hidden = YES;
            [self _unloadPanels];
        }];
    } else {
        self.centerPanelContainer.frame = _centerPanelRestingFrame;	
        [self styleContainer:self.centerPanelContainer animate:NO duration:0.0f];
        if (self.style == JASidePanelMultipleActive || self.pushesSidePanels) {
            [self _layoutSideContainers:NO duration:0.0f];
        }
        self.leftPanelContainer.hidden = YES;
        self.rightPanelContainer.hidden = YES;
        [self _unloadPanels];
    }
    
    self.tapView = nil;
    [self _toggleScrollsToTopForCenter:YES left:NO right:NO];
}

然后再中心页面出现动画之前，将那个view Remove掉。当然之前我把阴影和圆角去掉了得，这样看起来就像一个中心页面在底层的扁平化效果了，下图就是修改前后的效果