Custom Split View with Animation

Hi All,

Hope you guys are doing well. In our last tutorial Custom Split View , we have discussed about creating a custom split view controller which will show both Master and Detail views at a time. I hope all of you guys have enjoyed that tutorial.

In this tutorial, we will add some UIView animations to the Custom Split View which we have created last week. If user applies a left gesture on the split view, it will hide the "Master View", if user applies a right gesture, it will show the "Master View".

Okay, lets start. Please open the Custom Split View class MLKSplitViewController class we have created. Create two gesture recognizers(one for left and other one for right) and a BOOL property to keep track the status of Master View. 

@property(nonatomic,retain) UISwipeGestureRecognizer *leftSwipeGestureRecognizer;

@property(nonatomic,retain) UISwipeGestureRecognizer *rightSwipeGestureRecognizer;

@property(nonatomic,assign) BOOL isMasterViewHidden;

Synthesize newly created properties :

@synthesize leftSwipeGestureRecognizer;

@synthesize rightSwipeGestureRecognizer;

@synthesize isMasterViewHidden;

In - (void)viewDidLoad method add the code to create gesture recognizers and hooking up with appropriate action methods :

    // Add left gesture recognizer

    self.leftSwipeGestureRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(hideMasterView:)];

    [self.leftSwipeGestureRecognizer setDirection:UISwipeGestureRecognizerDirectionLeft];

    [self.view addGestureRecognizer:leftSwipeGestureRecognizer];

    // Add right gesture recognizer

    self.rightSwipeGestureRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(showMasterView:)];

    [self.rightSwipeGestureRecognizer setDirection:UISwipeGestureRecognizerDirectionRight];

    [self.view addGestureRecognizer:rightSwipeGestureRecognizer];

Now, implement the two actions for gesture recognizers and corresponding utility method :

#pragma mark -

#pragma mark - Gestures

- (IBAction)hideMasterView:(id)sender

{

    if( !isMasterViewHidden )

    {

        [UIView animateWithDuration:1.0 animations:^{

        

            [self setMasterViewFrame: CGRectMake(-MASTER_VIEW_WIDTH,0, MASTER_VIEW_WIDTH, self.view.bounds.size.height) detailViewFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];

        }];

        

        isMasterViewHidden = YES;

    }

    

}

- (IBAction)showMasterView:(id)sender

{

    if( isMasterViewHidden )

    {

        [UIView animateWithDuration:1.0 animations:^{

                        

            [self setMasterViewFrame:CGRectMake(0,0, MASTER_VIEW_WIDTH, self.view.bounds.size.height) detailViewFrame:CGRectMake(MASTER_VIEW_WIDTH + SPLIT_GAP, 0, self.view.bounds.size.width - MASTER_VIEW_WIDTH - SPLIT_GAP, self.view.bounds.size.height)];

        }];

        

        isMasterViewHidden = NO;

    }

}

- (void)setMasterViewFrame:(CGRect)masterViewFrame detailViewFrame:(CGRect)detailViewFrame

{

    UIViewController *masterViewController = [self.viewControllers objectAtIndex:0];

    UIViewController *detailViewController = [self.viewControllers objectAtIndex:1];

    

    masterViewController.view.frame = masterViewFrame;

    detailViewController.view.frame = detailViewFrame;

}

Change the implementation of the - (void)layoutSubviews method according to the newly added utility method - (void)setMasterViewFrame:(CGRect)masterViewFrame detailViewFrame:(CGRect)detailViewFrame :

- (void)layoutSubviews

{

    if( !isMasterViewHidden )

    {

        [self setMasterViewFrame:CGRectMake(0,0, MASTER_VIEW_WIDTH, self.view.bounds.size.height) detailViewFrame:CGRectMake(MASTER_VIEW_WIDTH + SPLIT_GAP, 0, self.view.bounds.size.width - MASTER_VIEW_WIDTH - SPLIT_GAP, self.view.bounds.size.height)];

    }

}

We are done with the coding, lets see how output looks :

 Now apply a left swipe. See the output. "Master View" is hidden!!!!!!!!!!.

 Apply a right swipe. See the output. "Master View" is shown!!!!!!!!!!.

 Apply left and right swipes in landscape mode. Results are same as portrait!!!!!!

Hope you guys have enjoyed this tutorial about Custom Split View with Animation. Please feel free to add your comments and suggestions.

You can find source code here Source Code .