Version Platform

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 which is my company's logo:

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

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.

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.

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)

• 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.

@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.

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.

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

Suyu Zhang
suyu_zhang@hotmail.com
suyuzhang.com

Copyright (c) 2014 Suyu Zhang suyu_zhang@hotmail.com. See the LICENSE file for license rights and limitations (MIT).