iOS开发不借助第三方控件实现侧边栏效果

2021-09-03 05:44:37

最近在研究iOS程序的侧边栏，因为发现渐渐的iOS的程序也开始走侧边栏的风格了，QQ，今日头条，Path(Path算最早出现侧边栏的app了，所以也把侧边栏效果说成是Path效果)，所以就研究了下。

然后发现Git Hub上有很多侧边栏的控件，这些控件效果也都挺玄的，但是我想找到不用第三方控件自己实现侧边栏呢？后来参照这篇blog，然后自己搞了下，算搞清楚了。下面详细介绍一下吧。

首先我们需要在storyboard里面新建3个view controlle，这里也可以是navigation controller，但是我还是习惯直接用view controller就可以了，跳转都自己来实现。

接下来需要新建3个类，

ContainerViewController是一个容器类的VC，作用是放置MainVC和SideVC，就好比TabbarViewController一样，它只是一个容器，真正调整页面的是在其他VC中。

先不用管这3个ViewController如何实现，我们转到storyboard中，分别把设置3个ViewController的identifier，像这个样子

ContainerViewController可以不设置storyboard，但是mainVC和sideVC一定要设置好storyboard ID，然后你还可以自己编辑一下Main VC和sideVC，这样可以更清晰地看到侧边栏的效果。

最终的StoryBoard是这样的：

最上面是ContainerViewController，接下来从右到左分别是MainViewController和SideViewController。

好了，接下来我们就开始coding把。我这里想要做的效果是滑屏或者点击mainVC左上角的按钮都可以打开侧边栏，然后当侧边栏显示的时候，滑屏或者点击右侧的mainVC，都能隐藏侧边栏。

我们一步一步来分析代码吧：

其实主要是ContainerViewController

ContainerViewController.h

//  这个相当于是容器的VC，里面存放主界面和侧边栏

#import <UIKit/UIKit.h>
#import "MainViewController.h"
#import "SideViewController.h"

@interface ContainerViewController : UIViewController<UIGestureRecognizerDelegate>{}

@property(nonatomic, strong) MainViewController *centerController;
@property(nonatomic, strong) SideViewController *leftController;

- (void)showSideView;
- (void)hideSideView;

@end

我们import了mainVC和sideVC，然后定义了两个property和两个method

ContainerViewController.m

//

#import "ContainerViewController.h"

@interface ContainerViewController ()

@end

@implementation ContainerViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
    
    _centerController = (MainViewController *)[storyboard instantiateViewControllerWithIdentifier:@"MainViewController"];
    _centerController.fatherViewController = self;
    
    _leftController = (SideViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"];
    
    [self.view addSubview:_centerController.view];
    [_centerController.view setTag:1];
    [_centerController.view setFrame:self.view.bounds];
    
    [self.view addSubview:_leftController.view];
    [_leftController.view setTag:2];
    [_leftController.view setFrame:self.view.bounds];
    
    [self.view bringSubviewToFront:_centerController.view];
    
    //add swipe gesture
    UISwipeGestureRecognizer *swipeGestureRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
    [swipeGestureRight setDirection:UISwipeGestureRecognizerDirectionRight];
    [_centerController.view addGestureRecognizer:swipeGestureRight];
    
    UISwipeGestureRecognizer *swipeGestureLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGesture:)];
    [swipeGestureLeft setDirection:UISwipeGestureRecognizerDirectionLeft];
    [_centerController.view addGestureRecognizer:swipeGestureLeft];
}

-(void) swipeGesture:(UISwipeGestureRecognizer *)swipeGestureRecognizer {
    
    CALayer *layer = [_centerController.view layer];
    layer.shadowColor = [UIColor blackColor].CGColor;
    layer.shadowOffset = CGSizeMake(1, 1);
    layer.shadowOpacity = 1;
    layer.shadowRadius = 20.0;
    if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionRight) {
        [self showSideView];
    }
    if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionLeft) {
        [self hideSideView];
    }
}

// 显示侧边栏，单独写成一个函数，供mainVC点击头像时调用
- (void)showSideView{
    [_leftController.view setHidden:NO];
    
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == -200) {
        [_centerController.view setFrame:CGRectMake(_centerController.view.frame.origin.x+200, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];
    }
    
    [UIView commitAnimations];
}

- (void)hideSideView{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
    if ( _centerController.view.frame.origin.x == 200) {
        [_centerController.view setFrame:CGRectMake(_centerController.view.frame.origin.x-200, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];
    }
    [UIView commitAnimations];
    // 最后调用防止出现白底
    [_leftController.view setHidden:YES];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end

在viewDidload方法里面，我们从storyboard中获取到两个ViewController，注意我的sideviewcontroller起的名字是LeftViewController，也就是在storyboard ID里面要写成这个名字。

然后添加进去了滑屏手势，分别是向左滑和向右滑

接下里在滑屏的代理里面定义了滑屏的动作。这里为什么要把显示/隐藏sideview单独做成两个method呢？因为一会我们要实现在mainVC里面点击头像的时候能够调用ContainerVC里的这两个函数！

接下来看看MainVC如何实现吧

MainViewController.h

#import <UIKit/UIKit.h>

@class ContainerViewController;

@interface MainViewController : UIViewController

- (IBAction)showSideView:(id)sender;
@property (nonatomic, strong) ContainerViewController* fatherViewController;

@end

注意这里用@class来引入ContainerVC，不在头文件里面#import是为了防止循环引用。

然后我们定义一个property，fatherViewController，它是一个ContainerViewController的实例。

showSideView的IBAction是头像那个button的点击动作。

MainViewController.m

#import "MainViewController.h"
#import "ContainerViewController.h"

@interface MainViewController ()

@end

@implementation MainViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

- (IBAction)showSideView:(id)sender {
    [self.fatherViewController showSideView];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    [self.fatherViewController hideSideView];
}
@end

这样在mainViewController的点击头像button的动作就能调用fatherViewController，也就是ContainerViewController里面的showSideView动作了。

touchesBegan是当点击mainViewController的时候，隐藏侧边栏的。

以为SideViewController都是在storyboard里面拖入控件完成的，所以不需要写什么代码。

当然，这里仅仅是左侧的侧边栏，想要看两侧的侧边栏方法，查阅这里。

码农公寓

相关文章