SLPagingView

A navigation bar system allowing to do a Tinder like or Twitter like.

Requirements

• iOS 7.0+
• ARC

Installation

CocoaPods

CocosPods is the recommended method to install SLPagingView.

Add the following line to your Podfile:

pod 'SLPagingView'

And run

pod install

Manual

Import SLPagingView folder into your project.

How to use

Easy to implement:

    // Make views for the navigation bar
    UIImage *img1 = [UIImage imageNamed:@"gear"];
    img1 = [img1 imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

    UIImage *img2 = [UIImage imageNamed:@"profile"];
    img2 = [img2 imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

    UIImage *img3 = [UIImage imageNamed:@"chat"];
    img3 = [img3 imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

    NSArray *titles = @[[[UIImageView alloc] initWithImage:img1], [[UIImageView alloc] initWithImage:img2], [[UIImageView alloc] initWithImage:img3]];
    NSArray *views = @[[self viewWithBackground:orange], [self viewWithBackground:[UIColor yellowColor]], [self viewWithBackground:gray]];

    SLPagingViewController *pageViewController = [[SLPagingViewController alloc] initWithNavBarItems:titles
                                                                                    navBarBackground:[UIColor whiteColor]
                                                                                               views:views
                                                                                     showPageControl:NO];

Then you can make your own behaviors:

    // Tinder Like
    pageViewController.pagingViewMovingRedefine = ^(UIScrollView *scrollView, NSArray *subviews){
        int i = 0;
        for(UIImageView *v in subviews){
            UIColor *c = gray;
            if(v.frame.origin.x > 45
               && v.frame.origin.x < 145)
                // Left part
                c = [self gradient:v.frame.origin.x
                               top:46
                            bottom:144
                              init:orange
                              goal:gray];
            else if(v.frame.origin.x > 145
                    && v.frame.origin.x < 245)
                // Right part
                c = [self gradient:v.frame.origin.x
                               top:146
                            bottom:244
                              init:gray
                              goal:orange];
            else if(v.frame.origin.x == 145)
                c = orange;
            v.tintColor= c;
            i++;
        }
     };

Other sample

Twitter like behaviors

    // Twitter Like
    pageViewController.pagingViewMovingRedefine = ^(UIScrollView *scrollView, NSArray *subviews){
        CGFloat xOffset = scrollView.contentOffset.x;
        int i = 0;
        for(UILabel *v in subviews){
            CGFloat alpha = 0.0;
            if(v.frame.origin.x < 145)
                alpha = 1 - (xOffset - i*320) / 320;
            else if(v.frame.origin.x >145)
                alpha=(xOffset - i*320) / 320 + 1;
            else if(v.frame.origin.x == 140)
                alpha = 1.0;
            i++;
            v.alpha = alpha;
        }
    };

API

Set current page

If you want to changed the default page control index (or whatever) you can do it calling:

    -(void)setCurrentIndex:(NSInteger)index animated:(BOOL)animated;

Navigation items style

You can easily customized the navigation items setting up:

    @property (nonatomic) SLNavigationSideItemsStyle navigationSideItemsStyle;

By using one of these values:

    typedef NS_ENUM(NSInteger, SLNavigationSideItemsStyle) {
        SLNavigationSideItemsStyleOnBounds,
        SLNavigationSideItemsStyleClose,
        SLNavigationSideItemsStyleNormal,
        SLNavigationSideItemsStyleFar,
        SLNavigationSideItemsStyleDefault,
        SLNavigationSideItemsStyleCloseToEachOne
    };

Set navigation bar's background color

You can update the background color of the navigation bar using the following method:

    setNavigationBarColor:(UIColor*) color;

Storyboard support

This class can be implemented using Storyboard. You need to set all identifiers of the segues linked to your SLPagingViewController respecting this syntax: sl_X where X ∈ [0..N].

X corresponding to the index of the view, start from 0 and it works in ascending order.

You can find an example "TinderStoryboard" for more informations.

Set navigation bar's background color

To set up the navigation bar's background color from the storyboard, you just need to it like all navigation bar.

License

Available under MIT license, please read LICENSE for more informations.