知乎上有一个无限上拉显示新页面，下拉显示上一个页面的功能，在用户体验上的确非常好，有类似功能的还有淘宝商品详情页面，小米有品的分类页面都有这样的应用，那这个功能是如何实现的呢，下面我们就进行简单分析。
QQ20181017-144043.gif
实现原理
通过上拉和下拉进行切换页面，切换页面通常可以使用转场动画来实现，可是如果使用push或者present的自定义转场来做，当dimiss或pop后，页面会被释放，这个对于平凡上拉下拉操作来说效率有点低，因此我们采用了addChildController来实现这个效果。
1、首先我们定义一个subViewController，这个就是我们进行上拉和下拉操作。
.h文件
#import <UIKit/UIKit.h>
@protocol SubViewControllerDelegate <NSObject>
@optional
- (void)pullingUpView:(UIView *)view;
- (void)pullingDownView:(UIView *)view;
@end
NS_ASSUME_NONNULL_BEGIN
@interface SubViewController : UIViewController
@property (nonatomic, weak) id<SubViewControllerDelegate>delegate;
@property(nonatomic, assign) CGFloat itemheight;
//- (void)uploadSubView;
@end
NS_ASSUME_NONNULL_END
.m文件
#import "SubViewController.h"
#import <UIView+SDAutoLayout.h>
#import "PingweiViewController.h"
static const NSInteger kOffSet = 100;
@interface SubViewController () <UIScrollViewDelegate,UICollectionViewDataSource,UICollectionViewDelegate>
@property (nonatomic, strong) UICollectionView * mScrollView;
@property (nonatomic, strong) UIView * subView;
@property (nonatomic, strong) SubViewController * subViewController;
@end
@implementation SubViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor=[UIColor colorWithRed:(random()%255)/255.0 green:(random()%255)/255.0 blue:(random()%255)/255.0 alpha:1];
[self.view addSubview:self.mScrollView];
self.mScrollView.sd_layout.spaceToSuperView(UIEdgeInsetsZero);
NSLog(@"%s",__FUNCTION__);
}
- (void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
NSLog(@"%s",__FUNCTION__);
}
#pragma mark - <UICollectionView>
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 20;
}
// The cell that is returned must be retrieved from a call to - dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
cell.contentView.backgroundColor=[UIColor colorWithRed:(arc4random()%256)/255.0 green:(arc4random()%256)/255.0 blue:(arc4random()%256)/255.0 alpha:1];
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
PingweiViewController * pingwei=[[PingweiViewController alloc] init];
[self.navigationController pushViewController:pingwei animated:YES];
}
#pragma mark - <ScrollViewDelegate>
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
// NSLog(@"");
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
NSLog(@"end");
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
CGFloat offSetY= scrollView.contentOffset.y;
//下拉
if (offSetY<-kOffSet) {
if (self.delegate &&[self.delegate respondsToSelector:@selector(pullingDownView:)]) {
[self.delegate pullingDownView:self.view];
}
}
//上拉
CGFloat contentH=scrollView.contentSize.height-CGRectGetHeight(self.mScrollView.frame);
if (offSetY-contentH>kOffSet) {
if (self.delegate && [self.delegate respondsToSelector:@selector(pullingUpView:)]) {
[self.delegate pullingUpView:self.view];
}
}
}
#pragma mark - <setter and getter>
- (UIScrollView *)mScrollView{
if (!_mScrollView) {
UICollectionViewFlowLayout * layout=[[UICollectionViewFlowLayout alloc] init];
layout.itemSize=CGSizeMake((self.view.frame.size.width-10)/2.0, self.itemheight);
layout.minimumLineSpacing=5;
layout.minimumInteritemSpacing=5;
_mScrollView=[[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:layout];
_mScrollView.delegate=self;
_mScrollView.dataSource=self;
[_mScrollView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
_mScrollView.backgroundColor=[UIColor whiteColor];
}
return _mScrollView;
}
@end
2、在ViewController中添加ChildController,并将ChildConroller的View添加self.View上。为了能够实现切换，我们定义了一个Container视图，类型是UIScrollView，这样可以通过设置ContentOffset的值来实现切换动画。具体实现如下
#import "FengLeiViewController.h"
#import "SubViewController.h"
#import <UIView+SDAutoLayout.h>
@interface FengLeiViewController ()<UIScrollViewDelegate,SubViewControllerDelegate>
@property (nonatomic, strong) UIView * subView;
@property (nonatomic, strong) SubViewController * subViewController;
@property (nonatomic, strong) UIScrollView * mContainer;
@property (nonatomic, assign) NSInteger totalCount;
@property (nonatomic, assign) NSInteger currentPage;
@property (nonatomic, strong) NSMutableArray * dataArray;
@end
@implementation FengLeiViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.title=@"分类";
_dataArray=[[NSMutableArray alloc] init];
self.totalCount=5;
for (int i=0; i<self.totalCount; i++) {
[_dataArray addObject:[NSString stringWithFormat:@"第%@页",@(i+1)]];
}
self.currentPage=0;
self.view.backgroundColor=[UIColor whiteColor];
[self.view addSubview:self.mContainer];
self.mContainer.sd_layout.spaceToSuperView(UIEdgeInsetsZero);
SubViewController * subVC0=[[SubViewController alloc] init];
self.title=self.dataArray[self.currentPage];
subVC0.delegate=self;
subVC0.itemheight=100;
[self addChildViewController:subVC0];
[self.mContainer addSubview:subVC0.view];
subVC0.view.sd_layout.leftSpaceToView(self.mContainer, 0)
.topSpaceToView(self.mContainer, 0)
.rightSpaceToView(self.mContainer, 0)
.bottomSpaceToView(self.mContainer, 0);
}
#pragma mark - <>
- (void)pullingDownView:(UIView *)view{
if (self.currentPage>0) {
[UIView animateWithDuration:0.7 animations:^{
self.mContainer.contentOffset=CGPointMake(0, (self.currentPage-1)*CGRectGetHeight(self.view.frame));
} completion:^(BOOL finished) {
}];;
}
}
- (void)pullingUpView:(UIView *)view{
NSInteger count= self.childViewControllers.count;
if (self.currentPage>=(self.totalCount-1)) {
return;
}
[UIView animateWithDuration:0.7 animations:^{
self.mContainer.contentOffset=CGPointMake(0, (self.currentPage+1)*(CGRectGetHeight(self.view.frame)));
} completion:^(BOOL finished) {
if (self.currentPage>=count&&self.currentPage<(self.totalCount)) {
dispatch_async(dispatch_get_main_queue(), ^{
SubViewController * sub=[[SubViewController alloc] init];
sub.itemheight=150;
sub.delegate=self;
[self addChildViewController:sub];
[self.mContainer addSubview:sub.view];
self.mContainer.contentSize=CGSizeMake(self.mContainer.width_sd, self.mContainer.height_sd*(self.childViewControllers.count));
sub.view.sd_layout.leftSpaceToView(self.mContainer, 0)
.topSpaceToView(view, 0)
.rightSpaceToView(self.mContainer, 0)
.heightIs(CGRectGetHeight(self.view.frame));
});
}
}];
}
#pragma mark - <ScrollViewDelegate>
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
NSLog(@"****** page %@",@(scrollView.contentOffset.y/scrollView.frame.size.height ));
self.currentPage=scrollView.contentOffset.y/scrollView.frame.size.height;
self.title=self.dataArray[self.currentPage];
}
#pragma mark - <setter and getter>
- (UIScrollView *)mContainer{
if (!_mContainer) {
_mContainer=[[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
_mContainer.scrollEnabled=NO;
_mContainer.delegate=self;
if (@available(iOS 11.0, *)) {
_mContainer.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}else{
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wdeprecated-declarations"
self.automaticallyAdjustsScrollViewInsets=YES;
#pragma clang diagnostic pop
}
}
return _mContainer;
}
@end
