A comprehensive guide on how to create, in a few simple steps, a fully functional vertical swipe view similar to the iOS Control Center.
It can be used for your application settings or any other panel you want to be easily accessible. The vertical swipe view well integrates with your exiting projects.
The following example has been tested using Xcode 5.1.1 on iOS 7.1.1 (iPhone version only). But it may likely works fine on other versions as well. Your comments or ideas on how to simplify this further are more than welcome!
Prepare the swipe (sub) view
Add a new view controller file with the name of “SubViewController” as a subclass of UIViewController and check the option to create a XIB file as well.
Also create a new scroll view class file, named “ScrollView” as a subclass of UIScrollView:
In your own view controller header (from now on called: Main View Controller), the one that would hold the vertical swipe sub view, import the above created files:
#import "SubViewController.h"
#import "ScrollView.h"
and then add the following two properties in the implementation file:
@property (nonatomic, strong) SubViewController *mySubView;
@property (nonatomic, strong) ScrollView *myScrollView;
Then in the header of the ScrollView define the following convenient macros:
#define SUBVIEW_OFFSET 50
#define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height
#define SCROLL_HEIGHT (SCREEN_HEIGHT - SUBVIEW_OFFSET)
You can change the value of the offset based on your peferences.
ViewDidLoad: where all the magic happens
Add the following code in the ViewDidLoad of your Main View Controller. The comments will give you more detail insights on how it works.
// Set the size and position of the visible portion of the scroll view:
self.myScrollView = [[ScrollView alloc] initWithFrame:CGRectMake(0, SUBVIEW_OFFSET, self.view.frame.size.width, SCREEN_HEIGHT - SUBVIEW_OFFSET)];
// Set the content size of the maximum scroll area:
self.myScrollView.contentSize = CGSizeMake(self.view.frame.size.width, (SCROLL_HEIGHT * 2) - SUBVIEW_OFFSET);
// Scroll view properties
self.myScrollView.backgroundColor = [UIColor clearColor]; // Transparent view
self.myScrollView.showsVerticalScrollIndicator = NO;
self.myScrollView.bounces = YES;
self.myScrollView.pagingEnabled = YES; // automatically move subview to top or bottom
// Set the Sub View controller
self.mySubView = [[SubViewController alloc] init];
// Use a different transparent background color than the one on the main view
self.mySubView.view.backgroundColor = [UIColor colorWithRed:0.8 green:0.8 blue:0.8 alpha:0.8];
// Set the position of the sub view at the bottom of the scroll area
self.mySubView.view.frame = CGRectMake(0, SCROLL_HEIGHT - SUBVIEW_OFFSET, self.view.frame.size.width, SCROLL_HEIGHT);
// Add the subview to the scroll view
[self.myScrollView addSubview:self.mySubView.view];
// Add the scroll view to the main view
[self.view addSubview:self.myScrollView];
By running the program now, you should see the top part of the sub view just at the bottom of the screen. By dragging the sub view you should be able to scroll it up and down:
As you may have already noticed all controls on your main view are not working anymore.
That’s because the scroll view lying above your main view will actually intercept all input touches.
To solve this we should implement the pointInside method on the scroll view so to specify exactly when the scroll view will receive the input and when it will need to pass to the main view.
By simply adding the following method to the ScrollView controller, your view would get back control of the input:
-(BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
if ((point.y > (SCREEN_HEIGHT - (SUBVIEW_OFFSET * 2))) ){
return YES;
}
return NO;
}
The final touch
It would be nice to have a touch gesture that could automatically open and close our sub view without having the need to drag it up and down.
To achieve this we can simply add a button to the sub view and delegate the action to the main view controller so that it can adjust the content position on the scroll view.
Let’s then first add a protocol to the header of the SubViewController.h:
@protocol SubViewControllerDelegate
@optional
- (void)openCloseButtonPressed;
@end
@interface SubViewController : UIViewController
@property (nonatomic, assign) id
@end
Then in the implementation of the SubViewController.m you should add the following IBAction implementation and connect it to a button on the top of the sub view.
- (IBAction)openCloseButton:(UIButton *)sender {
if ( self.delegate &&
[self.delegate respondsToSelector:@selector(openCloseButtonPressed)]) {
[self.delegate openCloseButtonPressed];
}
}
Your main view controller should conform to the SubViewControllerDelegate:
@interface MainViewController : UIViewController <SubViewControllerDelegate>
And set itself as the delegate of the SubViewControllerDelegate (in ViewDidLoad):
self.mySubView.delegate = self;
Now you can implement the method so that the subview will fully open or close when the button is pressed:
- (void)openCloseButtonPressed
{
if (self.myScrollView.contentOffset.y) {
[self.myScrollView setContentOffset:CGPointMake(0, 0) animated:YES];
} else {
[self.myScrollView setContentOffset:CGPointMake(0, SCROLL_HEIGHT - SUBVIEW_OFFSET) animated:YES];
}
}
As a final touch you can set an image for the button and add a descriptive label next to it:
Please note that this vertical swipe view demonstration code works only on an iPhone and in portrait mode. But I'm sure you can easly customize it to work on a iPad and to accept different rotation modes.
