Fully customizable pull-to-refresh control inspired by Storehouse iOS app
A fully customizable pull-to-refresh control for iOS inspired by Storehouse iOS app
You can use any shape through a
plistfile, like this one:
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
UIScrollViewlike
UITableViewor
UICollectionViewusing 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
UIScrollViewDelegatein your
UIViewControllerif 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
refreshActionyou 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
BarItemfor animation, each
BarItemis running its own animation, you need to provide
startPointand
endPointthrough a plist file.
All
BarItemwill 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:
The result will look like this:
startPointsand
endPoints.
{x,y}) for coordinates.
reverseLoadingAnimationto reverse the animation.
startPointand
endPoint?
@isaced mentions that it's easier to use PaintCode to generate
startPointand
endPoint:
Result:
You can get more info here.
Play with following parameters to configure CBStoreHouseRefreshControl's view and animation:
colorparameter
lineWidthparameter
dropHeightparameter
scaleparameter
horizontalRandomnessparameter
reverseLoadingAnimationparameter, if set to
YES, the last bar item will be highlighted firstly.
internalAnimationFactorparameter, for example if
internalAnimationFactoris 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
[email protected]
suyuzhang.com
Copyright (c) 2014 Suyu Zhang . See the LICENSE file for license rights and limitations (MIT).