slp

SLPagingView

Navigation bar system allowing to do a Tinder like or Twitter like

Showing:

Popularity

Downloads/wk

0

GitHub Stars

1K

Maintenance

Last Commit

7yrs ago

Contributors

3

Package

Dependencies

0

License

MIT

Categories

Readme

SLPagingView

Build Status Version License

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.

segue

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.

segue

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100