Skip to content

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

Notifications You must be signed in to change notification settings

joywt/CBStoreHouseRefreshControl

 
 

Repository files navigation

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

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

Which files are needed?

You only need to include CBStoreHouseRefreshControl (.h .m) in your project.

CocoaPods support is coming very soon!

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 finishedLoading];
}

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)

Note:

  • Make sure you put the right key which are startPoints and endPoints.
  • Make sure you are using the right format ({x,y}) for coordinates.

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

Author

Suyu Zhang
[email protected]
suyuzhang.com

License

CBStoreHouseRefreshControl is available under the MIT license.

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published