Pull-to-refresh is a UI effect that you’ll use over and over. I’ll walk you through the simplest implementation where the scrolling distance controls the
rotation of the refresh icon.
You can download my project on GitHub.
To begin you’ll need a
UITableView with some dummy cells. Add a
UIImageView for the loading icon on top of the
UITableView. Set the
alpha in InterfaceBuilder to
assets.xcassets add a series of images for the loading spinner. I found a gif online and split it into its component images and then added them inside
assets.xcassets. The more images you use the smoother the animation will look. Name them with a similarly uniform naming pattern because we will need to load them as
UITableView is a subclass of… that’s right,
UIScrollView. To access the
ContentOffset (the amount the user has scrolled) implement
UIScrollViewDelegate and add this delegate method to the
Here is where the magic happens. The three constants allow you to customize the animation. The
rotation are based on the
You’ll also need to implement
scrollViewDidEndDragging to know when to make your API calls. I’ve hardcoded
-20 as a minimum amount of down-pull required to activate pull-to-refresh. You can customize this as you like.