preface

Recently, I met with a project to realize the sliding effect of personal details page on Weibo, and finally completed GKPageScrollView by searching for information, which can realize the sliding effect of personal details page on Weibo, Douyin, netease Cloud, etc.

The library implementation method reference JXPagingView, the effect may be better and more complete point.

The main function

  • Support sliding up and down, left and right, gesture back and so on
  • Supports hover effects such as sectionView of UITableView
  • Support for multiple paging controls, such as JXCategory WMPageController, etc
  • Can achieve the navigation bar color gradient, head map pull down to enlarge the effect
  • Support home page, list page pull down refresh, pull up load

rendering

instructions rendering
Weibo personal homepage
Netease Cloud Singer page
Douyin personal homepage
Home page drop-down refresh
The list is refreshed from the drop-down list

implementation

The structure of GKPageScrollView is UITableView + tableHeaderView + pagination control. It’s basically doing it in UIScrollview’s proxy method, scrollViewDidScroll, to determine whether it’s tableView sliding or listView sliding. The main code is as follows:

- (void)listScrollViewDidScroll:(UIScrollView *)scrollView {// if listScrollView is disabled, fix its positionif(! self.isListCanScroll) { scrollView.contentOffset = CGPointZero; } / / get listScrollview offset CGFloat offsetY = scrollView. ContentOffset. Y; // listScrollView slides offsetY < 0, disables it to slide mainTableViewif (offsetY <= 0) {
        self.isMainCanScroll = YES;
        self.isListCanScroll = NO;
        
        scrollView.contentOffset = CGPointZero;
        scrollView.showsVerticalScrollIndicator = NO;
    }else {
        if(self.isListCanScroll) { scrollView.showsVerticalScrollIndicator = YES; }}}Copy the code
MainTableView - (void)mainScrollViewDidScroll:(UIScrollView *)scrollView {// get mainScrollview offset CGFloat offsetY  = scrollView.contentOffset.y; // CGFloat criticalPoint = [self.mainTableView rectForSection:0].origin. Y - self.ceilPointheight; // CGFloat criticalPoint = [self.mainTableView rectForSection:0]. // Determine whether to slide up to the critical point according to the offsetif (offsetY >= criticalPoint) {
        self.isCriticalPoint = YES;
    }else {
        self.isCriticalPoint = NO;
    }
    
    if(self. IsCriticalPoint) {// contentOffset = CGPointMake(0, criticalPoint); self.isMainCanScroll = NO; self.isListCanScroll = YES; }else {
        if(self.isMainCanScroll) {// The mainScrollview can slide if the critical point is not reached. The location of the need to reset all listScrollView [[self. Delegate listViewsInPageScrollView: self] enumerateObjectsUsingBlock:^(id<GKPageListViewDelegate> _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) { UIScrollView *listScrollView = [obj listScrollView]; listScrollView.contentOffset = CGPointZero;  listScrollView.showsVerticalScrollIndicator = NO; }]; }elseContentOffset = CGPointMake(0, criticalPoint); contentOffset = CGPointMake(0, criticalPoint); }}}Copy the code

Specific implementation also needs to see the code to understand

Create GKPageScrollView and implement its proxy method

// create GKPageScrollView self.pageScrollView = [[GKPageScrollView alloc] initWithDelegate:self]; self.pageScrollView.frame = self.view.bounds; [self.view addSubview:self.pageScrollView]; // 2#pragma mark - GKPageScrollViewDelegate
- (UIView *)headerViewInPageScrollView:(GKPageScrollView *)pageScrollView {
    return self.headerView;
}

- (UIView *)pageViewInPageScrollView:(GKPageScrollView *)pageScrollView {
    return self.pageView;
}

- (NSArray<id<GKPageListViewDelegate>> *)listViewsInPageScrollView:(GKPageScrollView *)pageScrollView {
    return self.childVCs;
}
Copy the code

2, implement GKPageListViewDelegate delegate method in listView, listView can be UIView, UIViewController

#pragma mark - GKPageListViewDelegate
- (UIScrollView *)listScrollView {
    return self.tableView;
}

- (void)listViewDidScrollCallback:(void (^)(UIScrollView * _Nonnull))callback {
    self.listScrollViewScrollBlock = callback;
}
Copy the code

This can achieve the effect of micro blog personal home page.

3, if you want to achieve the navigation bar gradient, the head image pull down to enlarge the effect, need to do in the following method

- (void) mainTableViewDidScroll: (scrollView UIScrollView *) {/ / navigation bar show hidden CGFloat offsetY = scrollView. ContentOffset. Y; // 0-200 0 // 200-kdyHeaderheigh-knavbarheight gradient from 0-1 // > kdyHeaderheigh-knavbarheight 1 CGFloat alpha = 0;if (offsetY < 200) {
        alpha = 0;
    }else if (offsetY > (kDYHeaderHeight - kNavBarHeight)) {
        alpha = 1;
    }else{ alpha = (offsetY - 200) / (kDYHeaderHeight - kNavBarHeight - 200); } self.gk_navBarAlpha = alpha; self.titleView.alpha = alpha; / / head figure drop-down amplifying [self headerView scrollViewDidScroll: offsetY]; }Copy the code

The last

Project address: GKPageScrollView

I also recommend my photo browser GKPhotoBrowser