实现侧边抽屉效果-YRSideViewController
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现侧边抽屉效果-YRSideViewController相关的知识，希望对你有一定的参考价值。
在项目当中经常用到类似抽屉效果的页面转换，下面是简单的视图切换。
1，首先声明SideViewController，用来装所有要在屏幕中显示的控制器。
2，为SideViewController添加属性和方法，每个属性的作用都有注释。代码如下：
// SliderViewController.h
//普通动画的block
typedef void(^RootViewMoveBlock) (UIView *rootView,CGRect orhinFrame,CGFloat xoffeset);
@interface SideViewController : UIViewController
@property (assign ,nonatomic) BOOL needSwipeShowMenu;//是否开启手势滑动出菜单
@property (strong ,nonatomic) UIViewController *rightViewContorller;//右边控制器
@property (strong,nonatomic) UIViewController *leftViewController;//左边控制器
@property (strong,nonatomic) UIViewController *mainViewController;//主页面控制器
@property (assign,nonatomic) CGFloat leftViewShowWidth;//左侧栏展示大小
@property (assign,nonatomic)CGFloat rightViewShowWidth;//右侧栏展示大小
@property (assign,nonatomic)NSTimeInterval animationDuration;//动画时长
@property (assign,nonatomic)BOOL showBoundsShadow;//是否显示边框阴影
@property (copy,nonatomic)RootViewMoveBlock rootViewMoveBlock;//可在此block做动画效果
//block 的setter方法
-(void)setRootViewMoveBlock:(RootViewMoveBlock)rootViewMoveBlock;
-(void)showLeftViewController:(BOOL)animated;//展示左边栏
-(void)showRightViewController:(BOOL)animated;//展示右边栏
-(void)hideSideViewController:(BOOL)animated;//回复正常位置
@end
可以根据实际情况确定是否使用leftViewController/rightViewController,但是一般情况下我们必须设置mainViewcontroller。
在.h文件中，只是提供了外部接口，让使用起来方便一些。在整个api中，侧边抽屉效果最难的应该就是对视图的缩放处理了，结合起来动画效果，工程量也是不堪小视的。
下面来看源代码：
#import "SideViewController.h"
#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
@interface SideViewController ()
{
UIView *_baseView;
UIView *_currentView;//rootViewController.view
UIPanGestureRecognizer *_panGestureRecognizer;
CGPoint _startPanPoint;
CGPoint _lastPanPoint;
BOOL _panMovingRightOrLeft;//true是右，false是左
UIButton *_coverButton;
}
@end
@implementation SideViewController
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
_leftViewShowWidth = 267;
_rightViewShowWidth = 267;
_animationDuration = 0.35;
_showBoundsShadow = true;
_panGestureRecognizer = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
_panMovingRightOrLeft = false;
_lastPanPoint = CGPointZero;
_coverButton = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
[_coverButton addTarget:self action:@selector(hideSideViewController) forControlEvents:UIControlEventTouchUpInside];
}
return self;
}
-(id)init{
return [self initWithNibName:nil bundle:nil];
}
#pragma mark - 视图进出方法
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
_baseView = self.view;
_baseView.backgroundColor = [UIColor orangeColor];
self.needSwipeShowMenu = true;
}
-(void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
if (!self.mainViewController) {
NSAssert(false, @"还没有设置mainViewCOntroller");
}
if (_currentView != _mainViewController.view) {
[_currentView removeFromSuperview];
_currentView = _mainViewController.view;
[_baseView addSubview:_currentView];
_currentView.frame = _baseView.bounds;
}
}
#pragma mark - setter方法的重写
-(void)setLeftViewController:(UIViewController *)leftViewController{
if (_leftViewController != leftViewController) {
if (_leftViewController) {
[_leftViewController removeFromParentViewController];
}
_leftViewController = leftViewController;
if (_leftViewController) {
[self addChildViewController:_leftViewController];
}
}
}
/**
* rightViewController
*/
-(void)setRightViewContorller:(UIViewController *)rightViewContorller{
if (_rightViewContorller != rightViewContorller) {
if (_rightViewContorller) {
[_rightViewContorller removeFromParentViewController];
}
_rightViewContorller = rightViewContorller;
if (_rightViewContorller) {
[self addChildViewController:_rightViewContorller];
}
}
}
/**
* needSwipeShowMenu
*/
-(void)setNeedSwipeShowMenu:(BOOL)needSwipeShowMenu{
_needSwipeShowMenu = needSwipeShowMenu;
if (needSwipeShowMenu) {
[_baseView addGestureRecognizer:_panGestureRecognizer];
}else{
[_baseView removeGestureRecognizer:_panGestureRecognizer];
}
}
-(void)showShadow:(BOOL)show{
_currentView.layer.shadowOpacity = show? .8f : .0f;
if (show) {
_currentView.layer.cornerRadius = 4.0f;
_currentView.layer.shadowOffset = CGSizeZero;
_currentView.layer.shadowRadius = 4.0f;
_currentView.layer.shadowPath = [UIBezierPath bezierPathWithRect:_currentView.bounds].CGPath;
}
}
#pragma mark - showOrHideTheView
-(void)willShowLeftViewController{
if (!_leftViewController || _leftViewController.view.superview) {
return;
}
_leftViewController.view.frame = _baseView.bounds;
[_baseView insertSubview:_leftViewController.view belowSubview:_currentView];
if (_rightViewContorller && _rightViewContorller.view.superview) {
[_rightViewContorller.view removeFromSuperview];
}
}
-(void)willShowRightViewController{
if (!_rightViewContorller || _rightViewContorller.view.superview) {
return;
}
_rightViewContorller.view.frame=_baseView.bounds;
[_baseView insertSubview:_rightViewContorller.view belowSubview:_currentView];
if (_leftViewController && _leftViewController.view.superview) {
[_leftViewController.view removeFromSuperview];
}
}
-(void)showLeftViewController:(BOOL)animated{
if (!_leftViewController) {
return;
}
[self willShowLeftViewController];
NSTimeInterval animatedTime = 0;
if (animated) {
animatedTime = ABS(_leftViewShowWidth - _currentView.frame.origin.x) / _leftViewShowWidth * _animationDuration;
}
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView animateWithDuration:animatedTime animations:^{
[self layoutCurrentViewWithOffset:_leftViewShowWidth];
[_currentView addSubview:_coverButton];
[self showShadow:_showBoundsShadow];
}];
}
-(void)showRightViewController:(BOOL)animated{
if (!_rightViewContorller) {
return;
}
[self willShowRightViewController];
NSTimeInterval animatedTime = 0;
if (animated) {
animatedTime = ABS(_rightViewShowWidth + _currentView.frame.origin.x) / _rightViewShowWidth * _animationDuration;
}
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView animateWithDuration:animatedTime animations:^{
[self layoutCurrentViewWithOffset:-_rightViewShowWidth];
[_currentView addSubview:_coverButton];
[self showShadow:_showBoundsShadow];
}];
}
-(void)hideSideViewController:(BOOL)animated{
[self showShadow:false];
NSTimeInterval animatedTime = 0;
if (animated) {
animatedTime = ABS(_currentView.frame.origin.x / (_currentView.frame.origin.x > 0 ? _leftViewShowWidth:_rightViewShowWidth))*_animationDuration;
}
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView animateWithDuration:animatedTime animations:^{
[self layoutCurrentViewWithOffset:0];
} completion:^(BOOL finished) {
[_coverButton removeFromSuperview];
[_leftViewController.view removeFromSuperview];
[_rightViewContorller.view removeFromSuperview];
}];
}
-(void)hideSideViewController{
[self hideSideViewController:true];
}
#pragma mark - UIGestureRecognizerDelegate
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
// Check for horizontal pan gesture
if (gestureRecognizer == _panGestureRecognizer) {
UIPanGestureRecognizer *panGesture = (UIPanGestureRecognizer*)gestureRecognizer;
CGPoint translation = [panGesture translationInView:_baseView];
if ([panGesture velocityInView:_baseView].x < 600 && ABS(translation.x)/ABS(translation.y)>1) {
return YES;
}
return NO;
}
return YES;
}
- (void)pan:(UIPanGestureRecognizer*)pan{
if (_panGestureRecognizer.state==UIGestureRecognizerStateBegan) {
_startPanPoint=_currentView.frame.origin;
if (_currentView.frame.origin.x==0) {
[self showShadow:_showBoundsShadow];
}
CGPoint velocity=[pan velocityInView:_baseView];
if(velocity.x>0){
if (_currentView.frame.origin.x>=0 && _leftViewController && !_leftViewController.view.superview) {
[self willShowLeftViewController];
}
}else if (velocity.x<0) {
if (_currentView.frame.origin.x<=0 && _rightViewContorller && !_rightViewContorller.view.superview) {
[self willShowRightViewController];
}
}
return;
}
CGPoint currentPostion = [pan translationInView:_baseView];
CGFloat xoffset = _startPanPoint.x + currentPostion.x;
if (xoffset>0) {//向右滑
if (_leftViewController && _leftViewController.view.superview) {
xoffset = xoffset>_leftViewShowWidth?_leftViewShowWidth:xoffset;
}else{
xoffset = 0;
}
}else if(xoffset<0){//向左滑
if (_rightViewContorller && _rightViewContorller.view.superview) {
xoffset = xoffset<-_rightViewShowWidth?-_rightViewShowWidth:xoffset;
}else{
xoffset = 0;
}
}
if (xoffset!=_currentView.frame.origin.x) {
[self layoutCurrentViewWithOffset:xoffset];
}
if (_panGestureRecognizer.state==UIGestureRecognizerStateEnded) {
if (_currentView.frame.origin.x!=0 && _currentView.frame.origin.x!=_leftViewShowWidth && _currentView.frame.origin.x!=-_rightViewShowWidth) {
if (_panMovingRightOrLeft && _currentView.frame.origin.x>20) {
[self showLeftViewController:true];
}else if(!_panMovingRightOrLeft && _currentView.frame.origin.x<-20){
[self showRightViewController:true];
}else{
[self hideSideViewController];
}
}else if (_currentView.frame.origin.x==0) {
[self showShadow:false];
}
_lastPanPoint = CGPointZero;
}else{
CGPoint velocity = [pan velocityInView:_baseView];
if (velocity.x>0) {
_panMovingRightOrLeft = true;
}else if(velocity.x<0){
_panMovingRightOrLeft = false;
}
}
}
//重写此方法可以改变动画效果,PS._currentView就是RootViewController.view
- (void)layoutCurrentViewWithOffset:(CGFloat)xoffset{
if (_showBoundsShadow) {
_currentView.layer.shadowPath = [UIBezierPath bezierPathWithRect:_currentView.bounds].CGPath;
}
if (self.rootViewMoveBlock) {//如果有自定义动画，使用自定义的效果
self.rootViewMoveBlock(_currentView,_baseView.bounds,xoffset);
return;
}
/*平移的动画
[_currentView setFrame:CGRectMake(xoffset, _baseView.bounds.origin.y, _baseView.frame.size.width, _baseView.frame.size.height)];
return;
//*/
// /*平移带缩放效果的动画
static CGFloat h2w = 0;
if (h2w==0) {
h2w = _baseView.frame.size.height/_baseView.frame.size.width;
}
CGFloat scale = ABS(600 - ABS(xoffset)) / 600;
scale = MAX(0.8, scale);
_currentView.transform = CGAffineTransformMakeScale(scale, scale);
CGFloat totalWidth=_baseView.frame.size.width;
CGFloat totalHeight=_baseView.frame.size.height;
if (UIInterfaceOrientationIsLandscape(self.interfaceOrientation)) {
totalHeight=_baseView.frame.size.width;
totalWidth=_baseView.frame.size.height;
}
if (xoffset>0) {//向右滑的
[_currentView setFrame:CGRectMake(xoffset, _baseView.bounds.origin.y + (totalHeight * (1 - scale) / 2), totalWidth * scale, totalHeight * scale)];
}else{//向左滑的
[_currentView setFrame:CGRectMake(_baseView.frame.size.width * (1 - scale) + xoffset, _baseView.bounds.origin.y + (totalHeight*(1 - scale) / 2), totalWidth * scale, totalHeight * scale)];
}
//*/
}
@end
整个.m文件是对setter方法的重写和一些动画效果，以及缩放效果的实现。
整个缩放效果的逻辑都在layoutCurrentViewWithOffset:xoffset中，在左右视图出现的时候都会调用这个方法，对控制器进行图形处理。
如果我们想使用普通的平移效果，那么只需要在用到sideViewController的地方实现回调的rootViewBlock即可:
[sideViewController setRootViewMoveBlock:^(UIView *rootView, CGRect orginFrame, CGFloat xoffset) {
//使用简单的平移动画
rootView.frame=CGRectMake(xoffset, orginFrame.origin.y, orginFrame.size.width, orginFrame.size.height);
}];
假设我们已经在其他控制器或者appdelegate里面设 以上是关于实现侧边抽屉效果-YRSideViewController的主要内容，如果未能解决你的问题，请参考以下文章 Flutter之抽屉组件drawer,设置drawer宽度——Flutter基础系列