热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

iOS用AutoLayout实现分页滚动功能

这篇文章主要给大家介绍了关于iOS用AutoLayout实现分页滚动功能的相关资料,文中通过示例代码介绍的非常详细,对各位iOS开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

滚动视图分页

UIScrollView的pagingEnabled属性用于控制是否按分页进行滚动。在一些应用中会应用到这一个特性,最典型的就是手机桌面的应用图标列表。这些界面中往往每一页功能都比较独立,系统也提供了UIPageViewController来实现这种分页滚动的功能。

实现分页滚动的UI实现一般是最外层一个UIScrollView。然后UIScrollView里面是一个总体的容器视图containerView。容器视图添加N个页视图,对于水平分页滚动来说容器视图的高度和滚动视图一样,而宽度则是滚动视图的宽度乘以页视图的数量,页视图的尺寸则和滚动视图保持一致,对于垂直分页滚动来说容器视图的宽度和滚动视图一样,而高度则是滚动视图的高度乘以页视图的数量,页视图的尺寸则和滚动视图保持一致。每个页视图中在添加各自的条目视图。

整体效果图如下:

AutoLayout实现分页滚动的方法

根据上面的UI结构这里用AutoLayout的代码来实现水平分页的滚动。这里的约束设置代码是iOS9以后提供的相关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];
 
 //设置容器的四个边界和滚动视图保持一致的约束。
 [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 *colors = @[[UIColor redColor],[UIColor greenColor], [UIColor blueColor]];
 NSMutableArray *pageViews = [NSMutableArray arrayWithCapacity:colors.count];
 NSLayoutXAxisAnchor *prevLeftAnchor = containerView.leftAnchor;
 for (int i = 0; i 

下面是运行时的效果图:

MyLayout实现分页滚动的方法

你也可以用MyLayout布局库来实现分页滚动的能力。MyLayout布局库是笔者开源的一套功能强大的UI布局库。

您可以从github地址: github.com/youngsoft/M… 下载或者从podfile中导入:

pod 'MyLayout'

来使用MyLayout。下面是具体用MyLayout来实现分页滚动的代码。

//
#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;
 
 
 //建立一个水平线性布局容器视图
 MyLinearLayout *cOntainerView= [MyLinearLayout linearLayoutWithOrientation:MyOrientation_Horz];
 containerView.myVertMargin = 0; //水平线性布局的上下边界和滚动视图保持一致,这里也会确定线性布局的高度。
 containerView.gravity = MyGravity_Vert_Fill | MyGravity_Horz_Fill; //设置线性布局中的所有子视图均分和填充线性布局的高度和宽度。
 [scrollView addSubview:containerView];
 
 
 //添加页视图
 NSArray *colors = @[[UIColor redColor],[UIColor greenColor], [UIColor blueColor]];
 NSMutableArray *pageViews = [NSMutableArray arrayWithCapacity:colors.count];
 for (int i = 0; i 

MyLayout实现桌面的图标列表分页功能

MyLayout中的流式布局MyFlowLayout所具备的能力和flex-box相似,甚至有些特性要强于后者。流式布局用于一些子视图有规律排列的场景,就比如本例子中的滚动分页的图标列表的能力。下面就是具体的实现代码。

- (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;

从上面的代码可以看出要实现分页滚动的图标列表的能力,主要是对充当容器视图的流式布局设置一些属性即可,不需要为条目设置任何约束,而且还支持横竖屏下每页的不同数量的展示能力。整个功能代码量少,对比用UICollectionView来实现相同的功能要简洁和容易得多。下面是程序运行的效果:

横竖屏切换

对于带有分页功能的滚动视图来说,当需要支持横竖屏时就有可能会出现横竖屏切换时界面停留在两个页面中间而不是按页进行滚动的效果。其原因是无论是分页滚动还是不分页滚动,在滚动时都是通过调整滚动视图的contentOffset来实现的。而当滚动视图进行横竖屏切换时不会调整对应的contentOffset值,这样就导致了在屏幕方向切换时的滚动位置出现异常。解决的办法就是在屏幕滚动时的相应回调处理方法中修正这个contentOffset的值来解决这个问题。比如我们可以在屏幕切换的sizeclass变化的视图控制器的协议方法中添加如下代码:

- (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);
 
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。


推荐阅读
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 解决Cydia数据库错误:could not open file /var/lib/dpkg/status 的方法
    本文介绍了解决iOS系统中Cydia数据库错误的方法。通过使用苹果电脑上的Impactor工具和NewTerm软件,以及ifunbox工具和终端命令,可以解决该问题。具体步骤包括下载所需工具、连接手机到电脑、安装NewTerm、下载ifunbox并注册Dropbox账号、下载并解压lib.zip文件、将lib文件夹拖入Books文件夹中,并将lib文件夹拷贝到/var/目录下。以上方法适用于已经越狱且出现Cydia数据库错误的iPhone手机。 ... [详细]
  • CF:3D City Model(小思维)问题解析和代码实现
    本文通过解析CF:3D City Model问题,介绍了问题的背景和要求,并给出了相应的代码实现。该问题涉及到在一个矩形的网格上建造城市的情景,每个网格单元可以作为建筑的基础,建筑由多个立方体叠加而成。文章详细讲解了问题的解决思路,并给出了相应的代码实现供读者参考。 ... [详细]
  • 本文介绍了设计师伊振华受邀参与沈阳市智慧城市运行管理中心项目的整体设计,并以数字赋能和创新驱动高质量发展的理念,建设了集成、智慧、高效的一体化城市综合管理平台,促进了城市的数字化转型。该中心被称为当代城市的智能心脏,为沈阳市的智慧城市建设做出了重要贡献。 ... [详细]
  • 学习笔记(34):第三阶段4.2.6:SpringCloud Config配置中心的应用与原理第三阶段4.2.6SpringCloud Config配置中心的应用与原理
    立即学习:https:edu.csdn.netcourseplay29983432482?utm_sourceblogtoedu配置中心得核心逻辑springcloudconfi ... [详细]
  • 本文介绍了P1651题目的描述和要求,以及计算能搭建的塔的最大高度的方法。通过动态规划和状压技术,将问题转化为求解差值的问题,并定义了相应的状态。最终得出了计算最大高度的解法。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 本文介绍了解决二叉树层序创建问题的方法。通过使用队列结构体和二叉树结构体,实现了入队和出队操作,并提供了判断队列是否为空的函数。详细介绍了解决该问题的步骤和流程。 ... [详细]
  • 本文讨论了使用HTML5+JS开发App所需的框架和工具推荐,希望能提供真实案例作为参考。重点考虑框架和工具的文档齐全性以及是否支持二维码扫描、摇一摇等功能。同时提到了H5+框架的适用性。 ... [详细]
  • 本文介绍了一个程序,可以输出1000内能被3整除且个位数为6的所有整数。程序使用了循环和条件判断语句来筛选符合条件的整数,并将其输出。 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
  • 自动轮播,反转播放的ViewPagerAdapter的使用方法和效果展示
    本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter,并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]
  • 本文介绍了UVALive6575题目Odd and Even Zeroes的解法,使用了数位dp和找规律的方法。阶乘的定义和性质被介绍,并给出了一些例子。其中,部分阶乘的尾零个数为奇数,部分为偶数。 ... [详细]
author-avatar
经典调剂行570
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有