5

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

trungduc
  • 11,926
  • 4
  • 31
  • 55
Asif Bilal
  • 4,309
  • 3
  • 17
  • 27

1 Answers1

6

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

trungduc
  • 11,926
  • 4
  • 31
  • 55
  • Thanks!!! It's really nice answer but I also want to update the User interface for Pull to refresh and load more features. That is: - Integrate the UIRefreshControl when Pull to refresh - Bottom refresh control when load more – Asif Bilal May 08 '18 at 13:02
  • Integrate the UIRefreshControl when Pull to refresh - You can't do it because `iCarousel` isn't an `UIScrollView`. For both case pull to refresh and load more, you can use `UIActivityIndicatorView` instead. Simply, add it on `carousel.contentView`, show and hide it whenever you want. – trungduc May 09 '18 at 04:27
  • can you please also provide some code examples which describing logic for hide and show UIActivityIndicatorView. – Asif Bilal May 09 '18 at 13:50
  • The example project is real nice implementation. But can you make it in such a way that pullToRefreshIndicator stay on top while fetching data from API. As happens when UIRefreshControl with UITableView – Asif Bilal May 11 '18 at 10:47
  • Of course, you can do it. Just need to change position of UIActivityIndicator after adding it to _carousel.contentView. You can try to change 75.0f at this line https://github.com/nrober1409/iCarousel-PullToRefresh-LoadMore/blob/master/iCarouselExampleViewController.m#L65 with another value until you get which you want – trungduc May 11 '18 at 10:51
  • "Load More" UI is quite right. But "Pull to Refresh" doesn't working like UIRefreshControl. Is there any way to interactively "Pull to Refresh". That is the "Pull to Refresh" animator appears with the user pulling down gesture? – Asif Bilal May 14 '18 at 12:27
  • Actually you can do it but you need to modify iCarousel source. Because after drag ends, iCarousel will auto scroll to nearest item. And if you modify iCarousel source, I’m not sure there will be any extra problem or not. – trungduc May 14 '18 at 12:34
  • is there any other walk around to implement "Pull to Refresh" User interface? – Asif Bilal May 15 '18 at 07:00
  • You can try to use place holder. – trungduc May 15 '18 at 07:09