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

Overview

CBStoreHouseRefreshControl License MIT

Version Platform

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

Comments
  • init with bar color not work

    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

    opened by Armour 4
  • iOS 8 Offsets not resetting

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

    opened by Natelegreat1 3
  • Way to change the color?

    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?

    opened by klmitchell2 2
  • ScrollView's Content Offset Changed after Refreshing

    ScrollView's Content Offset Changed after Refreshing

    Trying to use this control in my Swift project

    self.refreshControl = CBStoreHouseRefreshControl.attachToScrollView(tableView, target: self, refreshAction: "refreshTriggered:", plist: "storehouse", color: UIColor.whiteColor(), lineWidth: 1, dropHeight: 80, scale: 1, horizontalRandomness: 150, reverseLoadingAnimation: false, internalAnimationFactor: 0.5);

    scrollView.contentOffset.y value was initially 0;

    After refreshing, the contentOffset.y value became 80 (value of the dropHeight parameter)

    opened by Jayvd 2
  • Object is not centered in UISplitViewController MasterViewController

    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.

    opened by hoppsen 1
  • UIRefreshControl for UIWebView?

    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?

    opened by cRazEYgUy 0
  • Fix setting color issues

    Fix setting color issues

    Fixed color not being set correctly, also replaced "self." with an underscore. According to apple docs "The only places you shouldn’t use accessor methods to set an instance variable are in initializer methods and dealloc."

    opened by StarClutch 0
  • Color of bar items is always white

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

    opened by miraclebg 3
  • Does not work with Navigation Controller setBarHidden:YES

    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];
    }
    
    opened by danglade 1
Owner
Suyu Zhang
Suyu Zhang
Easily add vertical and horizontal pull to refresh to any UIScrollView. Can also add multiple pull-to-refesh views at once.

This is a fork from the famous SVPullToRefresh pod with 2 additional functionalities: Can add multiple pull-to-refresh views into one single UIScrollV

Hoang Tran 42 Dec 28, 2022
A pull-down-to-refresh control for iOS that plays pong, originally created for the MHacks III iOS app

BOZPongRefreshControl A pull-down-to-refresh control for iOS that plays pong Installation It's on CocoaPods! Put pod 'BOZPongRefreshControl' in your P

Ben Oztalay 885 Dec 12, 2022
Animated, customizable, and flexible pull-to-refresh framework for faster and easier iOS development.

KafkaRefresh Animated, customizable, and flexible pull-to-refresh framework for faster and easier iOS development. Report bug · Request feature · 中文文档

H. H. Hsiang 1.2k Dec 11, 2022
✳️ SwiftUI Pull to Refresh (for iOS 13 and iOS 14) package.

Refreshable ✳️ SwiftUI Pull to Refresh (for iOS 13 and iOS 14) package. See complementary article at SwiftUI Pull to Refresh (for iOS 13 and iOS 14).

Geri Borbás 21 Dec 2, 2022
Elastic pull to refresh for iOS developed in Swift

DGElasticPullToRefresh Elastic pull to refresh compontent developed in Swift Inspired by this Dribbble post: Pull Down to Refresh by Hoang Nguyen Tuto

Danil Gontovnik 3.7k Jan 3, 2023
Pull to refresh functionality for any ScrollView in SwiftUI!

SwiftUIPullToRefresh Pull to refresh is a common UI pattern, supported in UIKit via UIRefreshControl. (Un)surprisingly, it's also unavailable in Swift

Gordan Glavaš 185 Dec 29, 2022
Animated "Pull To Refresh" Library for UIScrollView.

PullToBounce Animated "Pull To Refresh" Library for UIScrollView. You can add animated "pull to refresh" action to your UIScrollView, UITableView and

Takuya Okamoto 1.9k Dec 5, 2022
Give pull-to-refresh & infinite scrolling to any UIScrollView with 1 line of code.

SVPullToRefresh + SVInfiniteScrolling These UIScrollView categories makes it super easy to add pull-to-refresh and infinite scrolling fonctionalities

Sam Vermette 4.9k Dec 1, 2022
One gesture, many actions. An evolution of Pull to Refresh.

MNTPullToReact MNTPullToReact is an extended evolution of the famous Pull to Refresh interaction. The main idea comes from a unique question: can the

Mention 777 Nov 20, 2022
Play BreakOut while loading - A playable pull to refresh view using SpriteKit

BreakOutToRefresh Play BreakOut while loading - A playable pull to refresh view using SpriteKit BreakOutToRefresh uses SpriteKit to add a playable min

Dominik Hauser 2.5k Dec 29, 2022
An easy way to use pull-to-refresh.

MJRefresh An easy way to use pull-to-refresh ?? ✍??Release Notes: more details Contents New Features Dynamic i18n Switching SPM Supported Swift Chaini

M了个J 13.7k Jan 6, 2023
GIFRefreshControl is a pull to refresh that supports GIF images as track animations.

GIFRefreshControl GIFRefreshControl is a pull to refresh that supports GIF images as track animations. Installation You have multiple choices here: Co

Kevin Delannoy 163 Oct 4, 2022
Pull-to-refresh animation in UICollectionView with a sticky header flow layout, written in Swift :large_orange_diamond:

ReplaceAnimation Implementation of Zee Young's Dribbble animation (https://dribbble.com/shots/2067564-Replace) Info I really liked Zee Young's animati

Alex Türk 957 Sep 13, 2022
Custom animated pull-to-refresh that can be easily added to UIScrollView

PullToMakeSoup Custom animated pull-to-refresh that can be easily added to UIScrollView Check this article on our blog to know more details about anim

Yalantis 1.9k Dec 17, 2022
ESPullToRefresh is an easy-to-use component that give pull-to-refresh and infinite-scrolling implemention for developers.

ESPullToRefresh is an easy-to-use component that give pull-to-refresh and infinite-scrolling implemention for developers.

Vincent Li 1.7k Jan 8, 2023
An easy way to use pull-to-refresh

CRRefresh an easy way to use pull-to-refresh, If you want to customize its UI style, you just need conform the specified protocol. We will not regular

CRAnimation 957 Dec 13, 2022
PullToRefreshSwiftUI - Pull to refresh for SwiftUI

PullToRefreshSwiftUI Pull to refresh for SwiftUI. Usage with @State import Swift

Dmitry Kononchuk 1 Feb 28, 2022
LCPullRefresh - Use UIActivityIndicatorView to provide a pull-to-refresh function for UIScrollView.

LCPullRefresh Use UIActivityIndicatorView to provide a pull-to-refresh function for UIScrollView. Requirements iOS 8.0+ Xcode 11.0+ Usage Pull-up refr

LiuChang 7 Aug 5, 2022
Simple refresh control for iOS based on SpriteKit and Core Graphics

RainyRefreshControl Simple refresh control for iOS based on SpriteKit and Core Graphics. Project inspired by concept of Yup Nguyen Installation Instal

Onix-Systems 680 Dec 29, 2022