本篇文章為大家展示了怎么在iOS中利用AutoLayout實(shí)現(xiàn)分頁(yè)滾動(dòng)功能，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供新晃企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、HTML5、小程序制作等業(yè)務(wù)。10年已為新晃眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

AutoLayout實(shí)現(xiàn)分頁(yè)滾動(dòng)的方法

根據(jù)上面的UI結(jié)構(gòu)這里用AutoLayout的代碼來(lái)實(shí)現(xiàn)水平分頁(yè)的滾動(dòng)。這里的約束設(shè)置代碼是iOS9以后提供的相關(guān)API。

- (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];
 
 //設(shè)置容器的四個(gè)邊界和滾動(dòng)視圖保持一致的約束。
 [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;
 //容器視圖的高度和滾動(dòng)視圖保持一致。
 [containerView.heightAnchor constraintEqualToAnchor:scrollView.heightAnchor].active = YES;

 //添加頁(yè)視圖
 NSArray *colors = @[[UIColor redColor],[UIColor greenColor], [UIColor blueColor]];
 NSMutableArray *pageViews = [NSMutableArray arrayWithCapacity:colors.count];
 NSLayoutXAxisAnchor *prevLeftAnchor = containerView.leftAnchor;
 for (int i = 0; i < colors.count; i++)
 {
 //建立頁(yè)視圖
 UIView *pageView = [UIView new];
 pageView.backgroundColor = colors[i];
 pageView.translatesAutoresizingMaskIntoConstraints = NO;
 [containerView addSubview:pageView];
 
 //頁(yè)視圖分別從左往右排列，第1頁(yè)的左邊約束是容器視圖的左邊，其他頁(yè)的左邊約束則是前面兄弟視圖的右邊。
 [pageView.leftAnchor constraintEqualToAnchor:prevLeftAnchor].active = YES;
 //每頁(yè)的頂部約束是容器視圖。
 [pageView.topAnchor constraintEqualToAnchor:containerView.topAnchor].active = YES;
 //每頁(yè)的寬度約束是滾動(dòng)視圖
 [pageView.widthAnchor constraintEqualToAnchor:scrollView.widthAnchor].active = YES;
 //每頁(yè)的高度約束是滾動(dòng)視圖
 [pageView.heightAnchor constraintEqualToAnchor:scrollView.heightAnchor].active = YES;
 
 prevLeftAnchor = pageView.rightAnchor;
 
 [pageViews addObject:pageView];
 
 }
 
 //關(guān)鍵的一步，如果需要左右滾動(dòng)則將容器視圖中的最右部子視圖這里是B的右邊邊界依賴(lài)于容器視圖的右邊邊界。
 [pageViews.lastObject.rightAnchor constraintEqualToAnchor:containerView.rightAnchor].active = YES;
 
 //這里可以為每個(gè)頁(yè)視圖添加不同的條目視圖，具體實(shí)現(xiàn)大家自行添加代碼吧。

}

下面是運(yùn)行時(shí)的效果圖：

MyLayout實(shí)現(xiàn)分頁(yè)滾動(dòng)的方法

你也可以用MyLayout布局庫(kù)來(lái)實(shí)現(xiàn)分頁(yè)滾動(dòng)的能力。MyLayout布局庫(kù)是筆者開(kāi)源的一套功能強(qiáng)大的UI布局庫(kù)。

您可以從github地址: github.com/youngsoft/M… 下載或者從podfile中導(dǎo)入:

pod 'MyLayout'

來(lái)使用MyLayout。下面是具體用MyLayout來(lái)實(shí)現(xiàn)分頁(yè)滾動(dòng)的代碼。

//
#import 

- (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;
 
 
 //建立一個(gè)水平線(xiàn)性布局容器視圖
 MyLinearLayout *containerView = [MyLinearLayout linearLayoutWithOrientation:MyOrientation_Horz];
 containerView.myVertMargin = 0; //水平線(xiàn)性布局的上下邊界和滾動(dòng)視圖保持一致，這里也會(huì)確定線(xiàn)性布局的高度。
 containerView.gravity = MyGravity_Vert_Fill | MyGravity_Horz_Fill; //設(shè)置線(xiàn)性布局中的所有子視圖均分和填充線(xiàn)性布局的高度和寬度。
 [scrollView addSubview:containerView];
 
 
 //添加頁(yè)視圖
 NSArray *colors = @[[UIColor redColor],[UIColor greenColor], [UIColor blueColor]];
 NSMutableArray *pageViews = [NSMutableArray arrayWithCapacity:colors.count];
 for (int i = 0; i < colors.count; i++)
 {
 //建立頁(yè)視圖
 UIView *pageView = [UIView new];
 pageView.backgroundColor = colors[i];
 [containerView addSubview:pageView];
 
 //因?yàn)榫€(xiàn)性布局通過(guò)屬性gravity的設(shè)置就可以確定子頁(yè)視圖的高度和寬度，再加上線(xiàn)性布局的特性，所以頁(yè)視圖不需要設(shè)置任何附加的約束。
 
 [pageViews addObject:pageView];
 
 }
 
 //關(guān)鍵的一步, 設(shè)置線(xiàn)性布局的寬度是滾動(dòng)視圖的倍數(shù)
 containerView.widthSize.equalTo(scrollView.widthSize).multiply(colors.count);
 
 
 //這里可以為每個(gè)頁(yè)視圖添加不同的條目視圖，具體實(shí)現(xiàn)大家自行添加代碼吧。

}

MyLayout實(shí)現(xiàn)桌面的圖標(biāo)列表分頁(yè)功能

MyLayout中的流式布局MyFlowLayout所具備的能力和flex-box相似，甚至有些特性要強(qiáng)于后者。流式布局用于一些子視圖有規(guī)律排列的場(chǎng)景，就比如本例子中的滾動(dòng)分頁(yè)的圖標(biāo)列表的能力。下面就是具體的實(shí)現(xiàn)代碼。

- (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;
 
 
 //建立一個(gè)垂直數(shù)量約束流式布局:每列展示3個(gè)子視圖,每頁(yè)展示9個(gè)子視圖，整體從左往右滾動(dòng)。
 MyFlowLayout *containerView = [MyFlowLayout flowLayoutWithOrientation:MyOrientation_Vert arrangedCount:3];
 containerView.pagedCount = 9; //pagedCount設(shè)置為非0時(shí)表示開(kāi)始分頁(yè)展示的功能，這里表示每頁(yè)展示9個(gè)子視圖，這個(gè)數(shù)量必須是arrangedCount的倍數(shù)。
 containerView.wrapContentWidth = YES; //設(shè)置布局視圖的寬度由子視圖包裹，當(dāng)垂直流式布局的這個(gè)屬性設(shè)置為YES，并和pagedCount搭配使用會(huì)產(chǎn)生分頁(yè)從左到右滾動(dòng)的效果。
 containerView.myVertMargin = 0; //容器視圖的高度和滾動(dòng)視圖保持一致。
 
 containerView.subviewHSpace = 10;
 containerView.subviewVSpace = 10; //設(shè)置子視圖的水平和垂直間距。
 containerView.padding = UIEdgeInsetsMake(5, 5, 5, 5); //布局視圖的內(nèi)邊距設(shè)置。
 [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，并且設(shè)置設(shè)備處于橫屏?xí)r,每排數(shù)量由3個(gè)變?yōu)?個(gè)，每頁(yè)的數(shù)量由9個(gè)變?yōu)?8個(gè)。
 MyFlowLayout *containerViewSC = [containerView fetchLayoutSizeClass:MySizeClass_Landscape copyFrom:MySizeClass_wAny | MySizeClass_hAny];
 containerViewSC.arrangedCount = 6;
 containerViewSC.pagedCount = 18;

從上面的代碼可以看出要實(shí)現(xiàn)分頁(yè)滾動(dòng)的圖標(biāo)列表的能力，主要是對(duì)充當(dāng)容器視圖的流式布局設(shè)置一些屬性即可，不需要為條目設(shè)置任何約束，而且還支持橫豎屏下每頁(yè)的不同數(shù)量的展示能力。整個(gè)功能代碼量少，對(duì)比用UICollectionView來(lái)實(shí)現(xiàn)相同的功能要簡(jiǎn)潔和容易得多。下面是程序運(yùn)行的效果：

橫豎屏切換

對(duì)于帶有分頁(yè)功能的滾動(dòng)視圖來(lái)說(shuō)，當(dāng)需要支持橫豎屏?xí)r就有可能會(huì)出現(xiàn)橫豎屏切換時(shí)界面停留在兩個(gè)頁(yè)面中間而不是按頁(yè)進(jìn)行滾動(dòng)的效果。其原因是無(wú)論是分頁(yè)滾動(dòng)還是不分頁(yè)滾動(dòng)，在滾動(dòng)時(shí)都是通過(guò)調(diào)整滾動(dòng)視圖的contentOffset來(lái)實(shí)現(xiàn)的。而當(dāng)滾動(dòng)視圖進(jìn)行橫豎屏切換時(shí)不會(huì)調(diào)整對(duì)應(yīng)的contentOffset值，這樣就導(dǎo)致了在屏幕方向切換時(shí)的滾動(dòng)位置出現(xiàn)異常。解決的辦法就是在屏幕滾動(dòng)時(shí)的相應(yīng)回調(diào)處理方法中修正這個(gè)contentOffset的值來(lái)解決這個(gè)問(wèn)題。比如我們可以在屏幕切換的sizeclass變化的視圖控制器的協(xié)議方法中添加如下代碼：

- (void)traitCollectionDidChange:(nullable UITraitCollection *)previousTraitCollection
{
 [super traitCollectionDidChange:previousTraitCollection];
 
 UIScrollView *scrollView = (UIScrollView*)self.view;
 
 //根據(jù)當(dāng)前的contentOffset調(diào)整到正確的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);
 
}

上述內(nèi)容就是怎么在iOS中利用AutoLayout實(shí)現(xiàn)分頁(yè)滾動(dòng)功能，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：怎么在iOS中利用AutoLayout實(shí)現(xiàn)分頁(yè)滾動(dòng)功能-創(chuàng)新互聯(lián)
本文來(lái)源：http://weahome.cn/article/doicee.html