IOS two methods to achieve sliding left and right sides of the side menu bar slide View

Currently, slide view is available in many apps. sliding left and right shows the function of the side menu bar, which is available in weico.

There are many third-party class libraries on the Internet to achieve this effect. In fact, writing your own code is also very simple. Below I will introduce two methods to achieve slide view. ---- One is to use the third-party class library iiviewdeckcontroller. This class library achieves better results than others, and the other is to implement this effect in your own code, and the effect is still OK.

Implementation Method 1 (using a third-party library iiviewdeckcontroller ):

Https://github.com/Inferis/ViewDeck This is a class library, there is a detailed description of how to use. But most of them are not implemented using storyboard, so here I will introduce how to implement it using storyboard.

 (1) method ①

First, you must import the relevant header file and link
TheQuartzCore.framework

Then, add three navigation views to the storyboard, which represent the middle, left, and right views respectively, and create the corresponding controller.

My processing is to initialize an iiviewdeckcontroller instance and add it to the leftmost view as a sub-view, and use the three navigation views on the right as the iiviewdeckcontroller
The initial parameters of the Instance Object.

Note that,You must add identifier to the three navigation views respectively. Note that the identifier is added to the view corresponding to the navigation controller (that is, the first view ).

Let's take a look at the Code:

- (void)viewDidLoad{    [super viewDidLoad];// Do any additional setup after loading the view, typically from a nib.        UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];        CenterViewController *centerController = (CenterViewController *)[storyboard instantiateViewControllerWithIdentifier:@"CenterViewController"];        LeftViewController *leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"];        RightViewController *rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"];        self.containerController = [[IIViewDeckController alloc] initWithCenterViewController:centerController leftViewController:leftController rightViewController:rightController];        self.containerController.leftSize = 100;    self.containerController.rightSize = 200;        self.containerController.view.frame = self.view.bounds;        [self.view addSubview:self.containerController.view];    }

Create an iiviewdeckcontroller instance and add the view of this instance object to this view as a subview. This will jump to the iiviewdeckcontroller we need, let's create the iiviewdeckcontroller instance to process the tasks that slide left and right and appear in the sidebar.

(2) method ②

Here we will introduce an implementation method: Let the leftmost view inherit from IiviewdeckcontrollerThen add this method to the implementation file:

- (id)initWithCoder:(NSCoder *)aDecoder{    self = [super initWithCoder:aDecoder];    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];    self = [super initWithCenterViewController:[storyboard instantiateViewControllerWithIdentifier:@"CenterViewController"]                            leftViewController:[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"]                            rightViewController:[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"]];    if (self) {        // Add any extra init code here    }    return self;}

The implementation result is:

Method 2 ):

Next, let's talk about how this slide occurs in the sidebar. Obviously, this is a view stack. to simplify it, add several views to a view, and then add the swipe gesture, in response to event processing, the position of the top view changes in event processing, that is, the view is moved, so that the following view can be displayed, which can be roughly solved.

Storyboard is also used here. In addition, the content in the storyboard is the same as above (in fact, the solution draws on the above method ① ).

First, create the corresponding controller (tableview Controller) in the middle, left, and right views ).

Then create three corresponding properties

@property(nonatomic, strong) MainViewController *centerController;@property(nonatomic, strong) RightViewController *rightController;@property(nonatomic, strong) LeftViewController *leftController;

Add the subview to the view and add the swipe gesture. The Code is as follows:

- (void)viewDidLoad{    [super viewDidLoad];// Do any additional setup after loading the view.        UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];        _centerController = (MainViewController *)[storyboard instantiateViewControllerWithIdentifier:@"MainViewController"];        _leftController = (LeftViewController *)[storyboard instantiateViewControllerWithIdentifier:@"LeftViewController"];        _rightController = (RightViewController *)[storyboard instantiateViewControllerWithIdentifier:@"RightViewController"];            [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 addSubview:_rightController.view];    [_rightController.view setTag:3];    [_rightController.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) {        [_leftController.view setHidden:NO];        [_rightController.view setHidden:YES];                [UIView beginAnimations:nil context:nil];        [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];        if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == -100) {            [_centerController.view setFrame:CGRectMake(_centerController.view.frame.origin.x+100, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];        }                [UIView commitAnimations];    }    if (swipeGestureRecognizer.direction == UISwipeGestureRecognizerDirectionLeft) {        [_rightController.view setHidden:NO];        [_leftController.view setHidden:YES];                [UIView beginAnimations:nil context:nil];        [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];        if (_centerController.view.frame.origin.x == self.view.frame.origin.x || _centerController.view.frame.origin.x == 100) {            [_centerController.view setFrame:CGRectMake(_centerController.view.frame.origin.x-100, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];        }                [UIView commitAnimations];    }}

The following describes how to handle the swipe gesture event:

① Add a shadow border for the center View

② Here, the swipe gesture responds to the left and right sliding, and the left view appears when the right sliding occurs, so you need to hide the right view and know how to handle the left sliding.

③ An animation is added when the cente view is moved.

Note: I can still achieve this effect in this way. The following is an example of my application in Sina Weibo Demo:

Not bad!

Below is a little bit of supplement: The above implementation is to achieve the left and right side shift by swiping the top view of swipe, so this is too limited, how can we move the upper view by clicking the left button in the view below? In fact, it is also very simple. Here I use notification notifications, that is, to send a notification to the button and listen to the view at the upper layer. Of course, you can also use delegate and KVO, but this... If you haven't studied it for the moment, forget it. If you have time, try again.

Add the following code:

Add this method to the Controller of the view layer below:

- (IBAction)BackButton:(id)sender {    NSString *myString = @"back";    [[NSNotificationCenter defaultCenter] postNotificationName: @"back" object:myString userInfo: nil];}

Add the following code to the Controller of the view on the layer above:

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(BackFunc:) name: @"back" object:nil];-(void) BackFunc:(NSNotification*) notification  {    NSString *get = [notification object];    if ([get isEqualToString:@"back"]) {                [UIView beginAnimations:nil context:nil];        [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];        [_centerController.view setFrame:CGRectMake(0, _centerController.view.frame.origin.y, _centerController.view.frame.size.width, _centerController.view.frame.size.height)];        [UIView commitAnimations];    }}

This is OK!