iCarousel Pull to Refresh and Load More

Question

I am successfully able to integrate the iCarousel component but now facing an issue to implement "Pull to Refresh" & "Load More" features.

Actually iCarousel is a subclass of UIView whereas "Pull to Refresh" & "Load More" features normally works with subclass of UIScrollView. And UIView doesn't support these features. Therefore, I am stuck at this point.

I don't have any idea how to implement "Pull to Refresh" & "Load More" features with UIView(ICarousel)?

Answer 1

Solution

You can use scrollOffset property and carouselDidScroll method to implement "Pull to Refresh" & "Load More" features.

@property (nonatomic, assign) CGFloat scrollOffset;

This is the current scroll offset of the carousel in multiples of the itemWidth. This value, rounded to the nearest integer, is the currentItemIndex value. You can use this value to position other screen elements while the carousel is in motion. The value can also be set if you wish to scroll the carousel to a particular offset programmatically. This may be useful if you wish to disable the built-in gesture handling and provide your own implementation.

- (void)carouselDidScroll:(iCarousel *)carousel;

This method is called whenever the carousel is scrolled. It is called regardless of whether the carousel was scrolled programmatically or through user interaction.

Have some points you need to know here.

• scrollOffset < 0: User is trying to pull to refresh.

• scrollOffset > numberOfItems - 2: Last item is going to displayed

Implement this logic on carouselDidScroll method to archive features.

- (void)carouselDidScroll:(iCarousel *)carousel {
  // Start new pull request when user pulls |carousel| 
  // a distance equal to 0.4 width/height of an item
  if (carousel.scrollOffset < -0.4) {
    [self pullToRefresh];
  }

  // Start new load more request when last item will be displayed.
  // In this situation, I ignore cases when |numberOfItems| is small
  // Ex: |numberOfItems| < 2
  if (carousel.scrollOffset > carousel.numberOfItems - 2) {
    [self loadMore];
  }
}

- (void)pullToRefresh {
  // Make sure have only one request at a time
  if (self.isPullingToRefresh) {
    return;
  }

  self.isPullingToRefresh = YES;

  // Request API to receive new data

  // Update |isPullingToRefresh| when request finishes
  self.isPullingToRefresh = NO;
}

- (void)loadMore {
  // Make sure have only one request at a time
  if (self.isLoadingMore) {
    return;
  }

  self.isLoadingMore = YES;

  // Request API to receive new data

  // Update |isLoadingMore| when request finishes
  self.isLoadingMore = NO;
}

Result

For more detail, you can take a look at my sample

https://github.com/trungducc/stackoverflow/tree/icarousel-pull-to-refresh-load-more