|
| 1 | +# ECSlidingViewController |
| 2 | + |
| 3 | +`ECSlidingViewController` is a view controller container for iOS that presents its child view controllers in two layers. It provides functionality for sliding the top view to reveal the views underneath it. This functionality is inspired by the Path 2.0 and Facebook iPhone apps. |
| 4 | + |
| 5 | +This project is an example app that showcases the uses for `ECSlidingViewController`. This app uses storyboards, but it is not required. |
| 6 | + |
| 7 | + |
| 8 | +## Features |
| 9 | + |
| 10 | +* Panning gesture to move top view can be set on any `UIView`. It is most likely a navigation bar or the whole top view itself. |
| 11 | +* Configurable anchor positions, with automatic adjustments for orientation change. See "Anchor Position Geometry" section below. |
| 12 | +* There are no assumptions about the size and layout of the views under the top view. That is up to the implementor. |
| 13 | +* The child views can be changed at anytime. |
| 14 | +* See `ECSlidingViewController/Vendor/ECSlidingViewController/ECSlidingViewController.h` for options and configuration. |
| 15 | + |
| 16 | +## Requirements |
| 17 | + |
| 18 | +* iOS 5 |
| 19 | +* ARC |
| 20 | + |
| 21 | +## Getting Started |
| 22 | + |
| 23 | +This section will walk through of a simplified version of the included example app. You'll see how to setup the top view that can be panned to the right side to reveal the under left view. |
| 24 | + |
| 25 | +### Copy ECSlidingViewController into your project |
| 26 | + |
| 27 | +You'll need these four files: |
| 28 | + |
| 29 | +* ECSlidingViewController/Vendor/ECSlidingViewController/ECSlidingViewController.h |
| 30 | +* ECSlidingViewController/Vendor/ECSlidingViewController/ECSlidingViewController.m |
| 31 | +* ECSlidingViewController/Vendor/ECSlidingViewController/UIImage+ImageWithUIView.h |
| 32 | +* ECSlidingViewController/Vendor/ECSlidingViewController/UIImage+ImageWithUIView.m |
| 33 | + |
| 34 | +### Setup storyboards and set the topViewController |
| 35 | + |
| 36 | +Add a UIViewController to your storyboards and set the subclass to `ECSlidingViewController`. Then, you'll need to configure the instance of this view controller by setting a `topViewController` |
| 37 | + |
| 38 | + ECSlidingViewController *slidingViewController = (ECSlidingViewController *)self.window.rootViewController; |
| 39 | + UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Storyboard" bundle:nil]; |
| 40 | + |
| 41 | + slidingViewController.topViewController = [storyboard instantiateViewControllerWithIdentifier:@"FirstTop"]; |
| 42 | + |
| 43 | +In this example, we can get a reference to the `ECSlidingViewController` instance then, we set the `topViewController` with an instance of a `UIViewController` subclass called `FirstTopViewController` that is identified as "FirstTop". |
| 44 | + |
| 45 | +### Configure the topViewController |
| 46 | + |
| 47 | +The top view controller is responsible for two things: |
| 48 | + |
| 49 | +* Setting the view controllers underneath it. |
| 50 | +* Adding the `panGesture` to a `UIView`. |
| 51 | + |
| 52 | +To do these, you must first add an `#import "ECSlidingViewController.h"` to the `FirstTopViewController` header. Then in the implementation you'll have access to a category on `UIViewController` called `slidingViewController`. This the top-level instance of the `ECSlidingViewController` container. With this instance, you can set the view controllers underneath the top view and add panning. |
| 53 | + |
| 54 | +Below is the `viewWillAppear:` method for `FirstTopViewController`. |
| 55 | + |
| 56 | + - (void)viewWillAppear:(BOOL)animated |
| 57 | + { |
| 58 | + [super viewWillAppear:animated]; |
| 59 | + |
| 60 | + UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Storyboard" bundle:nil]; |
| 61 | + |
| 62 | + if (![self.slidingViewController.underLeftViewController isKindOfClass:[MenuViewController class]]) { |
| 63 | + self.slidingViewController.underLeftViewController = [storyboard instantiateViewControllerWithIdentifier:@"Menu"]; |
| 64 | + } |
| 65 | + |
| 66 | + [self.view addGestureRecognizer:self.slidingViewController.panGesture]; |
| 67 | + [self.slidingViewController setAnchorRightRevealAmount:280.0f]; |
| 68 | + } |
| 69 | + |
| 70 | +The above code will conditionally set the `underLeftViewController` if it is not already there. Then, it adds the gesture recognizer to the top view. The last line of code specifies the top view's anchor position on the right side. |
| 71 | + |
| 72 | +## Anchor Position Geometry |
| 73 | + |
| 74 | +There are four properties related to anchor positions. They are a combination of left, right, reveal amount, and peek amount. The diagrams below demonstrate the difference between peek and reveal. |
| 75 | + |
| 76 | +* anchorLeftPeekAmount |
| 77 | +* anchorRightPeekAmount |
| 78 | +* anchorLeftRevealAmount |
| 79 | +* anchorRightRevealAmount |
| 80 | + |
| 81 | +Below is an example of the anchorRightPeekAmount set: |
| 82 | + |
| 83 | +TODO: insert diagram of rotation with a peek amount set |
| 84 | + |
| 85 | +Below is an example of the anchorRightRevealAmount set: |
| 86 | + |
| 87 | +TODO: insert diagram of rotation with reveal amount set |
| 88 | + |
| 89 | +## MIT License |
| 90 | +Copyright (C) 2012 EdgeCase |
| 91 | + |
| 92 | +Permission is hereby granted, free of charge, to any person obtaining a copy of |
| 93 | +this software and associated documentation files (the "Software"), to deal in |
| 94 | +the Software without restriction, including without limitation the rights to |
| 95 | +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies |
| 96 | +of the Software, and to permit persons to whom the Software is furnished to do |
| 97 | +so, subject to the following conditions: |
| 98 | + |
| 99 | +The above copyright notice and this permission notice shall be included in all |
| 100 | +copies or substantial portions of the Software. |
| 101 | + |
| 102 | +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 103 | +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
| 104 | +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
| 105 | +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
| 106 | +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
| 107 | +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
| 108 | +SOFTWARE. |
0 commit comments