preface

As apps carry more and more services, a page displays more and more information, which needs to be directed for different services. Mainstream platform apps, such as Taobao, JINGdong, Zhuan, Hema, and the personal home pages of various social apps, all need to display core business data at the top of the page, and display the list data of each sub-business at the bottom part of the label. With the proliferation of phones with larger screens, if you can only switch lists by clicking on the top TAB, one-handed operations are cumbersome for the highest usage scenarios. Therefore, for better user interaction, it is necessary to support the function of scrolling left and right sublists. This gives us the UIScrollView nested scroll scenario. You need both the primary list to scroll up and down and the child list to scroll left and right.

Existing solutions

There are many solutions available on the web to solve the problem of nested scrolling. Including the author, I also open source a JXPagingView library, so far has 1100 stars, has been recognized by many friends. Supports the following features:

  • Lazy list loading
  • The primary list and sub-list are refreshed in the drop-down list
  • Hover position adjustment
  • OC and Swift versions
  • High encapsulation, easy to use

If you are interested, you can understand the principle of JXPagingView

Based on the existing principle, there is a small problem: when the user swipes hard up on the top header, the classification controller will suddenly stop when it reaches the top, and the list will not continue scrolling. You can open the [JINGdong] APP. At present (version number: 8.3.4), the effect of the home page is just like this. You can experience it and understand what I mean.

How to be like taobao home page, you can let the sub-list then rolling? Until I saw the homepage of zhuan and found a brand new solution through hands-on experience. PS: I don’t know what the APP is doing, simple reverse doesn’t work, you can’t see the view level. So, this plan is to rely on their own speculation and practice toss out.

JXPagerSmoothView scheme

JXPagerSmoothView Github address, click immediately to experience

Results the preview

You can clearly see that after the top pagerHeader is forced to scroll up, the bottom list will continue to scroll, and the scrolling speed and damping are the system’s own. When scrolling up and down, you’re just manipulating a list, so there’s no sign conflict. The custom pagerHeader just uses a simple TableView as an example, and you can replace it with any complex view, UICollectionView, etc.

The principle of this scheme is very simple, there is no complicated gesture processing, only need to deal with all kinds of boundary cases.

Is a

By default pagerHeaderContainerView is added subView to the current list UIScrollView, The pagerHeaderContainerView is the container view for the top PagerHeader (core business view area) and pinHeader(Floating Category Controller area). This way, scrolling up and down the list is just a single list ScrollView operation, without the scrolling suddenly being interrupted. The view hierarchy is as follows:

Case 2

The pagerHeaderContainerView is addSubview on top of the JXPagerSmoothView when the list switches left and right and scrolls up to the pinHeder float. That is, the pagerHeaderContainerView is removed from the list scrollView and fixed to the top. The view hierarchy is as follows:

Summary: is constantly switching pagerHeaderContainerView parent view, to taobao, around the home page effect. Is it simple? Of course, the code is very simple!

Use the sample

1. InitializationJXPagerSmoothView

    self.pager = [[JXPagerSmoothView alloc] initWithDataSource:self];
    [self.view addSubview:self.pager];
Copy the code

2. InitializepagerHeaderandpinHeader

    self.categoryView = [[JXCategoryTitleView alloc] init];
    self.categoryView.titles = @[@"Ability"The @"Hobby"The @"Team"];
    self.categoryView.contentScrollViewClickTransitionAnimationEnabled = NO;

    self.pagerHeader = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"lufei.jpg"]].Copy the code

3, implementation,JXPagerSmoothViewDataSourceProxy method

- (CGFloat)heightForPagerHeaderInPagerView:(JXPagerSmoothView *)pagerView {
    return 300;
}

- (UIView *)viewForPagerHeaderInPagerView:(JXPagerSmoothView *)pagerView {
    return self.pagerHeader;
}

- (CGFloat)heightForPinHeaderInPagerView:(JXPagerSmoothView *)pagerView {
    return 50;
}

- (UIView *)viewForPinHeaderInPagerView:(JXPagerSmoothView *)pagerView {
    return self.categoryView;
}

- (NSInteger)numberOfListsInPagerView:(JXPagerSmoothView *)pagerView {
    return self.categoryView.titles.count;
}

- (id<JXPagerSmoothViewListViewDelegate>)pagerView:(JXPagerSmoothView *)pagerView initListAtIndex:(NSInteger)index {
    SmoothListViewController *listVC = [[SmoothListViewController alloc] init];
    return listVC;
}
Copy the code

4. List implementationJXPagerSmoothViewListViewDelegateProxy method

SmoothListViewController class implements JXPagerSmoothViewListViewDelegate proxy method

- (UIScrollView *)listScrollView {
    return self.tableView;
}

- (UIView *)listView {
    return self.view;
}
Copy the code

Precautions for Use

As you can see from the sample code, the whole logic is simple and clear, just like using UITableView, just need to implement the corresponding proxy method, do not need to worry about the page interaction logic. The principle of high cohesion, low coupling and responsibility separation is achieved.

But there are a few things to note:

  • Do not set the scrolling view of the list yourselfcontentInsetProperty, internally by settingcontentInsetTo addpagerHeaderContainerView;
  • ContentSize. Height =pagerHeader height when the top pagerHeader is a UIScrollView or its subclasses, you need to set contentSize. Height =pagerHeader height, that is, you can’t scroll itSmoothCustomPagerHeaderViewControllerClass;
  • Please identify carefullyJXPagerViewandJXPagerSmoothViewAnd choose a class that suits your needs;
  • JXPagerSmoothViewOnly 1.2.1 or later is available. Please use the latest version.
  • Swift version isJXPagingSmoothView;

JXPagerSmoothViewMaking the address

JXPagerSmoothView Github address, click immediately to experience

conclusion

JXPagerSmoothView implementation file is only about 300 lines of code, need in-depth study of friends, I believe that spend some time can read. In this way, any special requirements of the business can be realized by themselves. As long as you master the principles, you are not afraid of changing requirements.

If you have any suggestions or questions, please leave a message and raise Issues, I will reply to you as soon as possible!

Thanks for reading and like 💖 if you like