跟着老大做第一个外包项目,使用到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掉。当然之前我把阴影和圆角去掉了得,这样看起来就像一个中心页面在底层的扁平化效果了,下图就是修改前后的效果