iOS用AutoLayout实现分页滚动功能

- (void)loadView {
 
 UIScrollView *scrollView = [[UIScrollView alloc] init];
 if (@available(iOS 11.0, *)) {
 scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
 } else {
 // Fallback on earlier versions
 }
 scrollView.pagingEnabled = YES;
 scrollView.backgroundColor = [UIColor whiteColor];
 self.view = scrollView;
 
 //建立容器视图
 UIView *containerView = [UIView new];
 containerView.translatesAutoresizingMaskIntoConstraints = NO;
 [scrollView addSubview:containerView];
 
 //设置容器的四个边界和滚动视图保持一致的约束。
 [containerView.leftAnchor constraintEqualToAnchor:scrollView.leftAnchor].active = YES;
 [containerView.topAnchor constraintEqualToAnchor:scrollView.topAnchor].active = YES;
 [containerView.rightAnchor constraintEqualToAnchor:scrollView.rightAnchor].active = YES;
 [containerView.bottomAnchor constraintEqualToAnchor:scrollView.bottomAnchor].active = YES;
 //容器视图的高度和滚动视图保持一致。
 [containerView.heightAnchor constraintEqualToAnchor:scrollView.heightAnchor].active = YES;

 //添加页视图
 NSArray<UIColor*> *colors = @[[UIColor redColor],[UIColor greenColor], [UIColor blueColor]];
 NSMutableArray<UIView*> *pageViews = [NSMutableArray arrayWithCapacity:colors.count];
 NSLayoutXAxisAnchor *prevLeftAnchor = containerView.leftAnchor;
 for (int i = 0; i < colors.count; i++)
 {
 //建立页视图
 UIView *pageView = [UIView new];
 pageView.backgroundColor = colors[i];
 pageView.translatesAutoresizingMaskIntoConstraints = NO;
 [containerView addSubview:pageView];
 
 //页视图分别从左往右排列，第1页的左边约束是容器视图的左边，其他页的左边约束则是前面兄弟视图的右边。
 [pageView.leftAnchor constraintEqualToAnchor:prevLeftAnchor].active = YES;
 //每页的顶部约束是容器视图。
 [pageView.topAnchor constraintEqualToAnchor:containerView.topAnchor].active = YES;
 //每页的宽度约束是滚动视图
 [pageView.widthAnchor constraintEqualToAnchor:scrollView.widthAnchor].active = YES;
 //每页的高度约束是滚动视图
 [pageView.heightAnchor constraintEqualToAnchor:scrollView.heightAnchor].active = YES;
 
 prevLeftAnchor = pageView.rightAnchor;
 
 [pageViews addObject:pageView];
 
 }
 
 //关键的一步，如果需要左右滚动则将容器视图中的最右部子视图这里是B的右边边界依赖于容器视图的右边边界。
 [pageViews.lastObject.rightAnchor constraintEqualToAnchor:containerView.rightAnchor].active = YES;
 
 //这里可以为每个页视图添加不同的条目视图，具体实现大家自行添加代码吧。

}

pod 'MyLayout'

//
#import <MyLayout.h>

- (void)loadView {
 
 UIScrollView *scrollView = [[UIScrollView alloc] init];
 if (@available(iOS 11.0, *)) {
 scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
 } else {
 // Fallback on earlier versions
 }
 scrollView.pagingEnabled = YES;
 scrollView.backgroundColor = [UIColor whiteColor];
 self.view = scrollView;
 
 
 //建立一个水平线性布局容器视图
 MyLinearLayout *containerView = [MyLinearLayout linearLayoutWithOrientation:MyOrientation_Horz];
 containerView.myVertMargin = 0; //水平线性布局的上下边界和滚动视图保持一致，这里也会确定线性布局的高度。
 containerView.gravity = MyGravity_Vert_Fill | MyGravity_Horz_Fill; //设置线性布局中的所有子视图均分和填充线性布局的高度和宽度。
 [scrollView addSubview:containerView];
 
 
 //添加页视图
 NSArray<UIColor*> *colors = @[[UIColor redColor],[UIColor greenColor], [UIColor blueColor]];
 NSMutableArray<UIView*> *pageViews = [NSMutableArray arrayWithCapacity:colors.count];
 for (int i = 0; i < colors.count; i++)
 {
 //建立页视图
 UIView *pageView = [UIView new];
 pageView.backgroundColor = colors[i];
 [containerView addSubview:pageView];
 
 //因为线性布局通过属性gravity的设置就可以确定子页视图的高度和宽度，再加上线性布局的特性，所以页视图不需要设置任何附加的约束。
 
 [pageViews addObject:pageView];
 
 }
 
 //关键的一步, 设置线性布局的宽度是滚动视图的倍数
 containerView.widthSize.equalTo(scrollView.widthSize).multiply(colors.count);
 
 
 //这里可以为每个页视图添加不同的条目视图，具体实现大家自行添加代码吧。

}

- (void)loadView {
 
 UIScrollView *scrollView = [[UIScrollView alloc] init];
 if (@available(iOS 11.0, *)) {
  scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
 } else {
  // Fallback on earlier versions
 }
 scrollView.pagingEnabled = YES;
 scrollView.backgroundColor = [UIColor whiteColor];
 self.view = scrollView;
 
 
 //建立一个垂直数量约束流式布局:每列展示3个子视图,每页展示9个子视图，整体从左往右滚动。
 MyFlowLayout *containerView = [MyFlowLayout flowLayoutWithOrientation:MyOrientation_Vert arrangedCount:3];
 containerView.pagedCount = 9; //pagedCount设置为非0时表示开始分页展示的功能，这里表示每页展示9个子视图，这个数量必须是arrangedCount的倍数。
 containerView.wrapContentWidth = YES; //设置布局视图的宽度由子视图包裹，当垂直流式布局的这个属性设置为YES，并和pagedCount搭配使用会产生分页从左到右滚动的效果。
 containerView.myVertMargin = 0; //容器视图的高度和滚动视图保持一致。
 
 containerView.subviewHSpace = 10;
 containerView.subviewVSpace = 10; //设置子视图的水平和垂直间距。
 containerView.padding = UIEdgeInsetsMake(5, 5, 5, 5); //布局视图的内边距设置。
 [scrollView addSubview:containerView];

 
 //建立条目视图
 for (int i = 0; i < 40; i++)
 {
  UILabel *label = [UILabel new];
  label.textAlignment = NSTextAlignmentCenter;
  label.backgroundColor = [UIColor greenColor];
  label.text = [NSString stringWithFormat:@"%d",i];
  [containerView addSubview:label];
 }
 
 
 //获取流式布局的横屏size classes，并且设置设备处于横屏时,每排数量由3个变为6个，每页的数量由9个变为18个。
 MyFlowLayout *containerViewSC = [containerView fetchLayoutSizeClass:MySizeClass_Landscape copyFrom:MySizeClass_wAny | MySizeClass_hAny];
 containerViewSC.arrangedCount = 6;
 containerViewSC.pagedCount = 18;

- (void)traitCollectionDidChange:(nullable UITraitCollection *)previousTraitCollection
{
 [super traitCollectionDidChange:previousTraitCollection];
 
 UIScrollView *scrollView = (UIScrollView*)self.view;
 
 //根据当前的contentOffset调整到正确的contentOffset
 int pageIndex = scrollView.contentOffset.x / scrollView.frame.size.width;
 int pages = scrollView.contentSize.width / scrollView.frame.size.width;
 if (pageIndex >= pages)
  pageIndex = pages - 1;
 if (pageIndex < 0)
  pageIndex = 0;
 
 scrollView.contentOffset = CGPointMake(pageIndex * scrollView.frame.size.width, scrollView.contentOffset.y);
 
}