|
1 | 1 | ICViewPager |
2 | 2 | =========== |
3 | 3 |
|
4 | | -A tab view that mimics ActionBarSherlock's FragmentsTabsPager and Google Play app's tab management. |
| 4 | +You can create sliding tabs with ViewPager. |
5 | 5 |
|
6 | | -<img src="https://dl.dropboxusercontent.com/u/17948706/Resources/SS.png" alt="ICViewPager" title="ICViewPager"> |
| 6 | +Slide through the contents or select from tabs or slide through tabs and select! |
7 | 7 |
|
8 | | -## Usage |
| 8 | +<img src="https://dl.dropboxusercontent.com/u/17948706/Resources/SS.jpg" alt="ICViewPager" title="ICViewPager"> |
| 9 | + |
| 10 | +## Installation |
9 | 11 |
|
10 | 12 | Just copy ViewPagerController.m and ViewPagerController.h files to your project. |
11 | | -You can subclass it and implement dataSource and delegate methods in the subclass or just assign it to a view controller as file's owner and provide external dataSource and delegate objects. |
12 | | -Supports both iPhone and iPad. |
| 13 | + |
| 14 | +Or you can use CocoaPods (as this is the recommended way). |
| 15 | + |
| 16 | +`pod 'ICViewPager'` |
| 17 | + |
| 18 | +## Usage |
| 19 | + |
| 20 | +Subclass ViewPagerController (as it's a UIViewController subclass) and implement dataSource and delegate methods in the subclass. |
| 21 | + |
| 22 | +In the subclass assign self as dataSource and delegate, |
| 23 | + |
| 24 | +``` |
| 25 | +- (void)viewDidLoad { |
| 26 | + |
| 27 | + [super viewDidLoad]; |
| 28 | + |
| 29 | + self.dataSource = self; |
| 30 | + self.delegate = self; |
| 31 | +} |
| 32 | +``` |
| 33 | + |
| 34 | +### Methods |
| 35 | + |
| 36 | +Then implement dataSource and delegate methods. |
| 37 | +``` |
| 38 | +#pragma mark - ViewPagerDataSource |
| 39 | +- (NSUInteger)numberOfTabsForViewPager:(ViewPagerController *)viewPager { |
| 40 | + return 10; |
| 41 | +} |
| 42 | +``` |
| 43 | +Returns the number of tabs that will be present in ViewPager. |
| 44 | + |
| 45 | +``` |
| 46 | +#pragma mark - ViewPagerDataSource |
| 47 | +- (UIView *)viewPager:(ViewPagerController *)viewPager viewForTabAtIndex:(NSUInteger)index { |
| 48 | +
|
| 49 | + UILabel *label = [UILabel new]; |
| 50 | + label.text = [NSString stringWithFormat:@"Tab #%i", index]; |
| 51 | + [label sizeToFit]; |
| 52 | + |
| 53 | + return label; |
| 54 | +} |
| 55 | +``` |
| 56 | +Returns the view that will be shown as tab. Create a `UIView` object (or any `UIView` subclass object) and give it to ViewPager and it will use it as tab view. |
| 57 | + |
| 58 | +``` |
| 59 | +#pragma mark - ViewPagerDataSource |
| 60 | +- (UIViewController *)viewPager:(ViewPagerController *)viewPager contentViewControllerForTabAtIndex:(NSUInteger)index { |
| 61 | + |
| 62 | + ContentViewController *cvc = [self.storyboard instantiateViewControllerWithIdentifier:@"contentViewController"]; |
| 63 | + |
| 64 | + return cvc; |
| 65 | +} |
| 66 | +``` |
| 67 | +Returns the view controller that will be shown as content. Create a `UIViewController` object (or any `UIViewController` subclass object) and give it to ViewPager and it will use the `view` property of the view controller as content view. |
| 68 | + |
| 69 | +Alternatively, you can implement `- viewPager:contentViewForTabAtIndex:` method and return a `UIView` object (or any `UIView` subclass object) and ViewPager will use it as content view. |
| 70 | + |
| 71 | +The `- viewPager:contentViewControllerForTabAtIndex:` and `- viewPager:contentViewForTabAtIndex:` dataSource methods are both defined optional. But, you should implement at least one of them! They are defined as optional to provide you an option. |
| 72 | + |
| 73 | +All delegate methods are optional. |
| 74 | + |
| 75 | +``` |
| 76 | +#pragma mark - ViewPagerDelegate |
| 77 | +- (void)viewPager:(ViewPagerController *)viewPager didChangeTabToIndex:(NSUInteger)index { |
| 78 | + |
| 79 | + // Do something useful |
| 80 | +} |
| 81 | +``` |
| 82 | +ViewPager will alert your delegate object via `- viewPager:didChangeTabToIndex:` method, so that you can do something useful. |
| 83 | + |
| 84 | +``` |
| 85 | +#pragma mark - ViewPagerDelegate |
| 86 | +- (CGFloat)viewPager:(ViewPagerController *)viewPager valueForOption:(ViewPagerOption)option withDefault:(CGFloat)value { |
| 87 | + |
| 88 | + switch (option) { |
| 89 | + case ViewPagerOptionStartFromSecondTab: |
| 90 | + return 0.0; |
| 91 | + case ViewPagerOptionCenterCurrentTab: |
| 92 | + return 0.0; |
| 93 | + case ViewPagerOptionTabLocation: |
| 94 | + return 0.0; |
| 95 | + default: |
| 96 | + return value; |
| 97 | + } |
| 98 | +} |
| 99 | +``` |
| 100 | +You can change ViewPager's options via `viewPager:valueForOption:withDefault:` delegate method. Just return the desired value for the given option. You don't have to return a value for every option. Only return values for the interested options and ViewPager will use the default values for the rest. Available options are defined in the `ViewPagerController.h` file and described below. |
| 101 | + |
| 102 | +``` |
| 103 | +#pragma mark - ViewPagerDelegate |
| 104 | +- (UIColor *)viewPager:(ViewPagerController *)viewPager colorForComponent:(ViewPagerComponent)component withDefault:(UIColor *)color { |
| 105 | + |
| 106 | + switch (component) { |
| 107 | + case ViewPagerIndicator: |
| 108 | + return [[UIColor redColor] colorWithAlphaComponent:0.64]; |
| 109 | + default: |
| 110 | + return color; |
| 111 | + } |
| 112 | +} |
| 113 | +``` |
| 114 | +You can change some colors too. Just like options, return the interested component's color, and leave out all the rest![^footnote] |
| 115 | + |
| 116 | + [^footnote]: [Linkin Park - Leave Out All the Rest](http://www.youtube.com/watch?v=LBTXNPZPfbE) |
| 117 | + |
| 118 | +### Options |
| 119 | + |
| 120 | +Every option has a default value. So |
| 121 | + |
| 122 | + * `ViewPagerOptionTabHeight`: Tab bar's height, defaults to 44.0 |
| 123 | + * `ViewPagerOptionTabOffset`: Tab bar's offset from left, defaults to 56.0 |
| 124 | + * `ViewPagerOptionTabWidth`: Any tab item's width, defaults to 128.0 |
| 125 | + * `ViewPagerOptionTabLocation`: 1.0: Top, 0.0: Bottom, Defaults to Top |
| 126 | + * `ViewPagerOptionStartFromSecondTab`: 1.0: YES, 0.0: NO, defines if view should appear with the 1st or 2nd tab. Defaults to NO |
| 127 | + * `ViewPagerOptionCenterCurrentTab`: 1.0: YES, 0.0: NO, defines if tabs should be centered, with the given tabWidth. Defaults to NO |
| 128 | + |
| 129 | +### Components |
| 130 | + |
| 131 | +Main parts of the ViewPagerController |
| 132 | + |
| 133 | + * `ViewPagerIndicator`: The colored line in the view of the active tab. |
| 134 | + * `ViewPagerTabsView`: The tabs view itself. When used in `- viewPager:colorForComponent:withDefault:` method, the returned color will be used as background color for the tab view. |
| 135 | + * `ViewPagerContent`: Provided views goes here as content. When used in `- viewPager:colorForComponent:withDefault:` method, the returned color will be used as background color for the content view. |
13 | 136 |
|
14 | 137 | ## Requirements |
15 | 138 |
|
16 | | -ICViewController supports minimum iOS 6 and uses ARC. |
| 139 | +ViewPager supports minimum iOS 6 and uses ARC. |
17 | 140 |
|
18 | | -## To-do |
19 | | -- Update README.md with the sample usage. |
| 141 | +Supports both iPhone and iPad. |
20 | 142 |
|
21 | 143 | ## Contact |
22 | 144 | [Ilter Cengiz](mailto:me@iltercengiz.info) |
|
0 commit comments