Animated loader like Snapchat

Question

I was wonder how snapchat animates that ghost thing when you pull down to refresh? I wanted to implement that in my app and was wondering how it was done.

Answer 1

I think you need to write your own solution. But it is really not that hard.

You need to create a custom table header view containing a stretchable image and implement some handling in your UITableViewDelegate. Below are a fairly generic implementation of a custom refresh control handling.

1) create a custom UIView to serve as your pulldown indicator view:

Header file:

#import <UIKit/UIKit.h>

typedef enum UpdateListViewState
{
    UpdateListViewStatePull,
    UpdateListViewStateRelease,
    UpdateListViewStateUpdate

}UpdateListViewState;


@interface UpdateListView : UIView
@property (nonatomic,readwrite) UpdateListViewState state;
@property (nonatomic,strong) UIImageView imageView;
@end

2) assign the headerView as the tableView header:

self.header = [[UpdateListView alloc] init];
self.table.tableHeaderView = self.header;

3) In your UITableViewDelegate, implement table scroll handling:

const int UPDATE_DRAG_HEIGHT = -70; 

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset 
{
    if (self.header.state == UpdateListViewStateRelease) {
       //Perform update stuff here & perhaps refresh animation
       self.header.state = UpdateListViewStateInitial;

    }
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //adjust size of self.header.imageView here according to scrollView.ContentOffset
    if (scrollView.contentOffset.y < UPDATE_DRAG_HEIGHT && self.header.state != UpdateListViewStateUpdate) {
            self.header.state = UpdateListViewStateRelease;
    }
}