Xcode 5 - Swipe switch view with constant background

Question

I understand how to implement UISwipeGestureRecognizer, but I do not understand how to use multiple views properly in collaboration with it.

My ultimate goal is to provide a sleek interface where buttons or swiping may be used to change views. I am hoping for a constant background rather than a background image show it is transferring to the exact same image again. I am using storyboarding currently where each view has its own controller, and I would like (if possible) to keep it as close to this format for visual clarity of what is going on.

I have read that subviews may be my best hope for this sort of scenario (keeping them to the right until a swipe is called), but that would break up the current storyboarding structure I am using, and most certainly ruin any visual clarity.

Does anyone have any suggestions?

Answer 1

I did same programmatically, but you can achieve same using storyboard

1. You need base view which will keep same background

2. Add 3 Views (or 2 depending on ur requirement) Left, Middle, Right with transparent backgrounds as follows in viewDidLoad of base view controller

[self addChildViewController:myChildViewController];

[myChildViewController view].frame = CGMakeRect(x,y,width,height);//Left one will have x = -320, y=0 ,Middle x= 0, y= 0, Right x = 32O etc.

 /* Add new view to source view */
 [self.view addSubview:[myChildViewController view]];

 /* Inform 'didMoveToParentViewController' to newly added view controller */
 [myChildViewController didMoveToParentViewController:self];

3. In handle Swipe method change frames of view with animation which will make it look like swiping page e.g

//swipe left, get right view in middle
 [UIView animateWithDuration:0.2 animations:^{

            CGRect frame = rightViewController.view.frame;
            frame.origin.x = 0;
            frame.origin.y = 0;
            rightViewController.view.frame = frame;

            CGRect middleViewFrame = middleViewController.view.frame;
            middleViewFrame.origin.x = -320;
            middleViewController.view.frame = middleViewFrame;

  }];

Answer 2

You could use a navigation to do this. If you don't want the navigation bar, you can hide it. You can connect the left swipe gesture recognizer to a segue to the next controller, and connect the right swipe gesture recognizer to an unwind segue (or call popViewControllerAnimated: from its action method). If you want a constant background, then you need to add that to the navigation controller's view (as a background color), and have the child view controller's views be transparent (or partially so). This code in the navigation controller's root view controller will add the background:

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationController.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"img.tiff"]];
}

Answer 3

I know exactly what you're talking about and I'm actually doing the same with my current project.

I accomplished this by using Interface Builder and a single view controller. Basically I placed a UIImageView in the view and set it to the background you wish, then I put a transparent UIScrollView on top of it. Inside that scroll view I put the two views I want to scroll horizontally through.

Don't forget to enable UIScrollView paging. In my case, I had two table views. Starting from the first one, if you swiped from right to left it would scroll to the next table view, and if you swiped left to right it would scroll back to the first.