IOS UIScrollView的自动布局

2024-06-05 20:08
文章标签 布局 自动 ios uiscrollview

本文主要是介绍IOS UIScrollView的自动布局,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

写在开始的话:如果感觉博文解决了你的问题,想转载本文,请尊重劳动成果,注明转载来源,谢谢!

这两天刚研究完成IOS的自动布局,然后想在UIScrollView里面也设置自动布局,完成上下滑动。刚开始感觉UIScrollView的自动布局也跟其他的一样简单,但只有经过尝试才知道并不像想象中的简单。

1.我们需要做什么。

我们需要自己完成一个类似于collection view 的功能。完成的效果图如下:


上面的标题栏整体是一个view,下面的工作区是scrollview。自动布局后横屏效果如下:

3.view 结构


最外层的view是根视图,第一个view(包含两个button,和imageview的)是标题栏。第二个view(包含scrollview的)是scrollview的滑动区,就是上图的工作区。
之所以这么设计就是将复杂的布局简单化,这样原先标题栏好几个视图和scrollview的自动布局就变成一个view和scrollview的自动布局。整体框架图如下:



首先先对区域1和区域2的父view进行自动布局,他们的自动布局比较简单,写出上下左右的间距即可。
下面我们主要讲解下区域2的布局。我们平时 对 scrollview进行布局,我们知道scroll view除了自身的布局需要考虑(x, y, width, height)外,还有一个contentSize属性也必须要在布局的过程中进行确定,contentSize是UIScrollView用于确定它所 要展示的内容尺寸的大小,而这个contentSize在布局中实际上是又scroll view的子view :content view的宽和高实现的,注意: 我们不能将content view的宽和高的约束设定为由scroll view决定 (如和scroll view等宽、等高),否则,Xcode会有警告:scroll view的content size不确定!

在这种情况下,我们必须要对content view的布局约束引入scroll view之外其他参照物,我们拖进来一个辅助的view作为参照物or锚点,示意图如下:


在storyboard中这3个视图的结构如下:



通过这个参考view,确定content view的宽度和高度,尽管content view的尺寸可以不依赖于scroll view,但我们还不得不设定content view 和其父view的关系:具体而言就是要确定content view和scroll view的top, bottom, leading和trailing contstraints,这个地方可能比较具有迷惑性,原因是苹果对于这四个约束的使用在scroll view中做了变化:它不再是确定content view尺寸的依据,而是帮助scroll view中content view四周的边界(or你可以理解为留白),进而确定scroll view的contentSize属性。

contentView具体的约束如下:
 
scrllview的约束可以指定充满父view,anchor view左边、右边、上边紧挨父视图。这会xcode会让你指定anchor view的高度,否则会有黄色的提示信息。这样再指定anchor view的高度就可以了。这会你应该有疑问,anchor view不是用来确定滑动区域content view的大小的吗?如果把anchor view的大小写死,contentView也不就不能改变大小了吗?我们需要在代码里面动态的更改anchor view的大小,在我们的代码里面也就是高度,因为宽度是屏幕宽度,不用更改。anchor view的高度约束如下图所示:




这里我随便付的值,然后在代码里面动态调整高度,修改的代码如下:
[objc]  view plain copy
  1. //计算contentView的高度  
  2. int rowNums = (appDelegate.workerList.count+COLUMN_COUNT-1)/COLUMN_COUNT;  
  3. int totalHeight = VIEW_HEIGHT * rowNums + (rowNums+1)*MIDDLE_GAP+100;  
  4.   
  5. //找到anchor view的高度约束修改高度  
  6. NSArray *arrs = scrollAnchorView.constraints;  
  7. for (NSLayoutConstraint *attr in arrs) {  
  8.     if(attr.firstAttribute == NSLayoutAttributeHeight){  
  9.         attr.constant = totalHeight;  
  10.     }  
  11. }  
  12.   
  13. //更新父视图约束条件  
  14. [scrollAnchorView.superview.superview updateConstraints];  
上面的代码放在你需要动态确定contentview高度的地方。
修改好之后,就可以看到刚开始的效果了。demo里面的其他代码就不讲解了,需要的可以直接下载,下载地址:
点击打开链接

转:http://blog.csdn.net/dongtaochen2039/article/details/41749209

这篇关于IOS UIScrollView的自动布局的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1034045

相关文章

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

SpringBoot中封装Cors自动配置方式

《SpringBoot中封装Cors自动配置方式》:本文主要介绍SpringBoot中封装Cors自动配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot封装Cors自动配置背景实现步骤1. 创建 GlobalCorsProperties

idea中创建新类时自动添加注释的实现

《idea中创建新类时自动添加注释的实现》在每次使用idea创建一个新类时,过了一段时间发现看不懂这个类是用来干嘛的,为了解决这个问题,我们可以设置在创建一个新类时自动添加注释,帮助我们理解这个类的用... 目录前言:详细操作:步骤一:点击上方的 文件(File),点击&nbmyHIgsp;设置(Setti

一文详解SQL Server如何跟踪自动统计信息更新

《一文详解SQLServer如何跟踪自动统计信息更新》SQLServer数据库中,我们都清楚统计信息对于优化器来说非常重要,所以本文就来和大家简单聊一聊SQLServer如何跟踪自动统计信息更新吧... SQL Server数据库中,我们都清楚统计信息对于优化器来说非常重要。一般情况下,我们会开启"自动更新

Flask 验证码自动生成的实现示例

《Flask验证码自动生成的实现示例》本文主要介绍了Flask验证码自动生成的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习... 目录生成图片以及结果处理验证码蓝图html页面展示想必验证码大家都有所了解,但是可以自己定义图片验证码

Python Excel实现自动添加编号

《PythonExcel实现自动添加编号》这篇文章主要为大家详细介绍了如何使用Python在Excel中实现自动添加编号效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、背景介绍2、库的安装3、核心代码4、完整代码1、背景介绍简单的说,就是在Excel中有一列h=会有重复

Springboot的自动配置是什么及注意事项

《Springboot的自动配置是什么及注意事项》SpringBoot的自动配置(Auto-configuration)是指框架根据项目的依赖和应用程序的环境自动配置Spring应用上下文中的Bean... 目录核心概念:自动配置的关键特点:自动配置工作原理:示例:需要注意的点1.默认配置可能不适合所有场景

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

Java中实现订单超时自动取消功能(最新推荐)

《Java中实现订单超时自动取消功能(最新推荐)》本文介绍了Java中实现订单超时自动取消功能的几种方法,包括定时任务、JDK延迟队列、Redis过期监听、Redisson分布式延迟队列、Rocket... 目录1、定时任务2、JDK延迟队列 DelayQueue(1)定义实现Delayed接口的实体类 (

shell脚本自动删除30天以前的文件(最新推荐)

《shell脚本自动删除30天以前的文件(最新推荐)》该文章介绍了如何使用Shell脚本自动删除指定目录下30天以前的文件,并通过crontab设置定时任务,此外,还提供了如何使用Shell脚本删除E... 目录shell脚本自动删除30天以前的文件linux按照日期定时删除elasticsearch索引s