CBStoreHouseRefreshControl

What is it?

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

You can use any shape through a

plist

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)

BarItem (.h .m)

How to use it

You can attach it to any

UIScrollView

UITableView

UICollectionView

+ (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

UIViewController

- (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

- (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

BarItem

startPoint

endPoint

All

BarItem

The result will look like this:

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

endPoint

Result:

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 . See the LICENSE file for license rights and limitations (MIT).