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

相关文章

SpringBoot项目启动后自动加载系统配置的多种实现方式

《SpringBoot项目启动后自动加载系统配置的多种实现方式》:本文主要介绍SpringBoot项目启动后自动加载系统配置的多种实现方式,并通过代码示例讲解的非常详细,对大家的学习或工作有一定的... 目录1. 使用 CommandLineRunner实现方式:2. 使用 ApplicationRunne

Springboot的ThreadPoolTaskScheduler线程池轻松搞定15分钟不操作自动取消订单

《Springboot的ThreadPoolTaskScheduler线程池轻松搞定15分钟不操作自动取消订单》:本文主要介绍Springboot的ThreadPoolTaskScheduler线... 目录ThreadPoolTaskScheduler线程池实现15分钟不操作自动取消订单概要1,创建订单后

python实现自动登录12306自动抢票功能

《python实现自动登录12306自动抢票功能》随着互联网技术的发展,越来越多的人选择通过网络平台购票,特别是在中国,12306作为官方火车票预订平台,承担了巨大的访问量,对于热门线路或者节假日出行... 目录一、遇到的问题?二、改进三、进阶–展望总结一、遇到的问题?1.url-正确的表头:就是首先ur

Spring使用@Retryable实现自动重试机制

《Spring使用@Retryable实现自动重试机制》在微服务架构中,服务之间的调用可能会因为一些暂时性的错误而失败,例如网络波动、数据库连接超时或第三方服务不可用等,在本文中,我们将介绍如何在Sp... 目录引言1. 什么是 @Retryable?2. 如何在 Spring 中使用 @Retryable

使用 Python 和 LabelMe 实现图片验证码的自动标注功能

《使用Python和LabelMe实现图片验证码的自动标注功能》文章介绍了如何使用Python和LabelMe自动标注图片验证码,主要步骤包括图像预处理、OCR识别和生成标注文件,通过结合Pa... 目录使用 python 和 LabelMe 实现图片验证码的自动标注环境准备必备工具安装依赖实现自动标注核心

QT实现TCP客户端自动连接

《QT实现TCP客户端自动连接》这篇文章主要为大家详细介绍了QT中一个TCP客户端自动连接的测试模型,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录版本 1:没有取消按钮 测试效果测试代码版本 2:有取消按钮测试效果测试代码版本 1:没有取消按钮 测试效果缺陷:无法手动停

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析: url中含有特殊字符 中文未编码 都有可能导致URL转换失败,所以需要对url编码处理  如下: guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时,会被误伤转义为%23,导致链接无法访问

基于51单片机的自动转向修复系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 💗博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生,希望您们都共创辉煌!✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机

Python3 BeautifulSoup爬虫 POJ自动提交

POJ 提交代码采用Base64加密方式 import http.cookiejarimport loggingimport urllib.parseimport urllib.requestimport base64from bs4 import BeautifulSoupfrom submitcode import SubmitCodeclass SubmitPoj():de