coolbeet / cbstorehouserefreshcontrol

Fully customizable pull-to-refresh control inspired by Storehouse iOS app

CBStoreHouseRefreshControl

What is it?

A fully customizable pull-to-refresh control for iOS inspired by Storehouse iOS app

![screenshot1] (https://s3.amazonaws.com/suyu.test/CBStoreHouseRefreshControl1.gif)

You can use any shape through a plist file, like this one:

![screenshot2] (https://s3.amazonaws.com/suyu.test/CBStoreHouseRefreshControl2.gif)

Which files are needed?

CBStoreHouseRefreshControl is available through CocoaPods, to install it simply add the following line to your Podfile:

pod 'CBStoreHouseRefreshControl'

Alternatively, you can just drag CBStoreHouseRefreshControl (.h .m) and BarItem (.h .m) into your own project.

How to use it

You can attach it to any UIScrollView like UITableView or UICollectionView using following simple static method:

+ (CBStoreHouseRefreshControl*)attachToScrollView:(UIScrollView *)scrollView
                                           target:(id)target
                                    refreshAction:(SEL)refreshAction
                                            plist:(NSString *)plist;

self.storeHouseRefreshControl = [CBStoreHouseRefreshControl attachToScrollView:self.tableView target:self refreshAction:@selector(refreshTriggered:) plist:@"storehouse"];

Or, using this method for more configurable options:

+ (CBStoreHouseRefreshControl*)attachToScrollView:(UIScrollView *)scrollView
                                           target:(id)target
                                    refreshAction:(SEL)refreshAction
                                            plist:(NSString *)plist
                                            color:(UIColor *)color
                                        lineWidth:(CGFloat)lineWidth
                                       dropHeight:(CGFloat)dropHeight
                                            scale:(CGFloat)scale
                             horizontalRandomness:(CGFloat)horizontalRandomness
                          reverseLoadingAnimation:(BOOL)reverseLoadingAnimation
                          internalAnimationFactor:(CGFloat)internalAnimationFactor;

self.storeHouseRefreshControl = [CBStoreHouseRefreshControl attachToScrollView:self.tableView target:self refreshAction:@selector(refreshTriggered:) plist:@"storehouse" color:[UIColor whiteColor] lineWidth:1.5 dropHeight:80 scale:1 horizontalRandomness:150 reverseLoadingAnimation:YES internalAnimationFactor:0.5];

Then, implement UIScrollViewDelegate in your UIViewController if you haven't already, and pass the calls through to the refresh control:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [self.storeHouseRefreshControl scrollViewDidScroll];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self.storeHouseRefreshControl scrollViewDidEndDragging];
}

Lastly, make sure you've implemented the refreshAction you passed it earlier to listen for refresh triggers:

- (void)refreshTriggered
{
    //call your loading method here

    //Finshed loading the data, reset the refresh control
    [self.storeHouseRefreshControl finishingLoading];
}

For more details, please check out the demo app's code.

How to use your own shape

The CBStoreHouseRefreshControl's shape contains bunch of BarItem for animation, each BarItem is running its own animation, you need to provide startPoint and endPoint through a plist file.

All BarItem will share one coordinate system whose origin is at the top-left corner. For example if you want to draw a square, the plist will look like this:

![screenshot2] (https://s3.amazonaws.com/suyu.test/square.png)

The result will look like this:

![screenshot3] (https://s3.amazonaws.com/suyu.test/square.gif)

Notes:

• Make sure you put the right key which are startPoints and endPoints.
• Make sure you are using the right format ({x,y}) for coordinates.
• The highlight/loading animation will highlight each bar item in the same order you declare them in plist, use reverseLoadingAnimation to reverse the animation.

Easy way to generate startPoint and endPoint?

@isaced mentions that it's easier to use PaintCode to generate startPoint and endPoint:

![screenshot4] (https://cloud.githubusercontent.com/assets/2088605/4948694/0ce2da74-667f-11e4-8ce7-a2067f15558d.png)

Result:

![screenshot5] (https://cloud.githubusercontent.com/assets/2088605/4948707/3b76afb4-667f-11e4-91a4-9509d17356fa.gif)

You can get more info here.

Configuration

Play with following parameters to configure CBStoreHouseRefreshControl's view and animation:

• Set the bar color with the color parameter
• Set the bar width with the lineWidth parameter
• Set the height of control with the dropHeight parameter
• Set the scale of control with the scale parameter
• Adjust how disperse the bar items appear/disappear by changing the horizontalRandomness parameter
• Set if reversing the loading animation with the reverseLoadingAnimation parameter, if set to YES, the last bar item will be highlighted firstly.
• Adjust the time offset of the appear/disappear animation by changing the internalAnimationFactor parameter, for example if internalAnimationFactor is 1 all bar items will appear/disappear all together.

Who's using it?

We've a wiki page for that, feel free to add your projects there!

Author

Suyu Zhang
[email protected]
suyuzhang.com

License

Copyright (c) 2014 Suyu Zhang [email protected]. See the LICENSE file for license rights and limitations (MIT).

cbstorehouserefreshcontrol's Issues

init with bar color not work

I used pod to get this refrehcontrol, however when i ask the function

    self.storeHouseRefreshControl = [CBStoreHouseRefreshControl attachToScrollView:self.waterfallView
                                                                            target:self
                                                                     refreshAction:@selector(pullToRefreshTriggered:)
                                                                             plist:@"storehouse"
                                                                             color:[UIColor redColor]
                                                                         lineWidth:1
                                                                        dropHeight:70
                                                                             scale:1
                                                              horizontalRandomness:150
                                                           reverseLoadingAnimation:YES
                                                           internalAnimationFactor:0.1];

the bar color is still in white, which makes me confuse.
after half an hour's debug i decided to look for source code and then i found that in the file CBStoreHouseRefreshControl.m, line 114, the color which i ask was not set properly, but used [UIColor whitecolor] instead!

I hope you can revise this one and, besides that, better remove all the warning :D

iOS 8 Offsets not resetting

After the animation is complete, the scrollView (in my case UITableView specifically) is remaining offset by about the height of the storeHouse image...
Anyone else having this issue?
Followed demo to the letter.
This is probably the coolest iOS accessory I've seen in ages and would be upset if I couldn't make use of it!!!

writing text

Hi, thanks for sharing :)

how do you make points for text? I mean text has spaces, should I use more then one start/end point?
one for each letter?

retain cycle

in CBStoreHouseRefreshControl.m

line32:@Property (nonatomic, strong) UIScrollView *scrollView;

line82:refreshControl.scrollView = scrollView;

line87:[scrollView addSubview:refreshControl];

---

cause retain cycle
I think it should be:
line32:@Property (nonatomic, weak) UIScrollView *scrollView;

CBStoreHouseRefreshControl support add to Footer? #19

CBStoreHouseRefreshControl support add to Footer?
Please any idea.

something wrong when set navigationBar.translucent to no

when i set the UITableViewController's navigationBar.translucent to no,the refresh logo doesn't work fine

Color of bar items is always white

In the initializator method - attachToScrollView the color is being passed as a param but later it is not used.

Instead a white color is harcoded:

BarItem *barItem = [[BarItem alloc] initWithFrame:refreshControl.frame startPoint:startPoint endPoint:endPoint color:[UIColor whiteColor] lineWidth:lineWidth];

while this should be:

BarItem *barItem = [[BarItem alloc] initWithFrame:refreshControl.frame startPoint:startPoint endPoint:endPoint color:color lineWidth:lineWidth];

New Bug！

@coolbeet

Jack

CBStoreHouseRefreshControl support add to Footer?

both pullup and pulldown

Color function parameter's value not used

In line 114, the function ignores the color parameter, with a hardcoded [UIColor whiteColor].

UIBezierPath with 2 control points

Is it possible to add to plist UIBezierPath like this?
[bezierPath addCurveToPoint: CGPointMake(83, 18) controlPoint1: CGPointMake(117, 33.22) controlPoint2: CGPointMake(101.78, 18)];

If not it would be a nice to have feature :)

UIRefreshControl for UIWebView?

Amazing work!!!
Is it possible to implement this as a UIRefreshControl for a UIWebView without the use of any UIScrollView or a subset? If not exactly this, would you know of something else with similar functionality and visuals that can be used as a UIRefreshControl for a UIWebView?

Does not work with Navigation Controller setBarHidden:YES

Hello,

After triying this, it seems that it does not support when the navigation controller it set to hidden. Would love to try this but only will work form me if you could add this feature.

(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:YES];    
    [self.navigationController setNavigationBarHidden:YES animated:YES];
}

need the method called when refreshTriggered

POD

can you please add a pod version for it

[self.storeHouseRefreshControl finishedLoading] Error

Hey, I got an error when i make [self.storeHouseRefreshControl finishedLoading], but i got no error when change finishedLoading to finishingLoading. Why I got this error?

Object is not centered in UISplitViewController MasterViewController

When I'm using your animated refresh object in the MasterViewController of an split view controller it is only centered in the complete screen, but not in the seperate part for the MasterViewController on the left.

Way to change the color?

Im trying to change the color:

self.storeHouseRefreshControl = [CBStoreHouseRefreshControl attachToScrollView:self.tableView target:self refreshAction:@selector(refreshTriggered:) plist:@"storehouse" color:[UIColor blackColor] lineWidth:1.5 dropHeight:80 scale:1 horizontalRandomness:150 reverseLoadingAnimation:YES internalAnimationFactor:0.5];

When I change the color nothing happens. Is this possible?

write text

any easy way to write text,
i try paint code , but ididnt know how to get the text position of it,
any help
thanks

self.originalTopContentInset can't be zero

In my project, the tableView's inset is supposed to be zero, but on line 128

    if (self.originalTopContentInset == 0) self.originalTopContentInset = self.scrollView.contentInset.top; 

don't let it be zero, setting originalTopContentInset to dropHeight value, moving the tableView down:

remove scrollview delegate code?

prefer to observe scrollview contentOffset

Suggestion : for swift version

The loading view is interactive and good. Please provide the swift version so that it is compatible for it.

It doesn't show the finish animation if I use the storyboard

Is there a easy or visual method to generate this plist file?

In this way, we needn't write it one point by one point.

Feature Request: Make state property publicly accessible

There're scenarios where you really need to know if the refresh control is currently refreshing. Thus, making 'state' a public property or even adding a new property (e.g. isRefreshing) would be useful.