CN109558201A - 一种基于UIScrollView的iOS界面简化布局方法 - Google Patents

Abstract

本发明涉及一种基于UIScrollView的iOS界面简化布局方法，其通过为container添加约束，并将container的上、下、左、右和contentSize的距离为0，在布局时，通过确定container的大小与位置，就可以确定contentSize的大小，最后根据contentSize进行各个子视图的展示，就可以保证各个子视图的展示效果，避免出现页面布局混乱或不能滑动的现象。

Description

一种基于UIScrollView的iOS界面简化布局方法

技术领域

本发明涉及iOS中UI布局技术领域，具体说是一种基于UIScrollView的iOS界面简化布局方法。

背景技术

Autolayout(自动布局)改变了传统的以frame(某个视图的大小，包括起始位置)为主的布局思想，它是一种相对布局，核心思想是视图与视图之间的位置关系。比如，我们可以根据矩形的起始横坐标、纵坐标、长和宽这四个变量确定它的位置。或者，如果已经确定矩形A的位置，只要知道矩形B每条边的和A对应边之间的距离，也能确定B的位置。前者就是frame的思想，它基于绝对数值，而后者是Autolayout的思想，它基于偏移量的概念。

UIScrollView(iOS系统的滑动滚动视图)有自己的frame也就是我们在屏幕上能看到的区域，它还有一个contentSize(UIScrollView的大小)的概念。在使用frame布局的时候，我们一般先设置好子视图的位置，最后再设置contentSize,它会将所有的子视图包含在内，于是通过滑动，我们就可以在有限的布局中，看到所有的内容了。

在Autolayout时代，为了简化布局，我们希望contentSize能够自动设置。比如有一个UIScrollView，它有AB两个子视图。frame分别为A(x:0,y:0,width:10,height:10)和B(x:10,y:0,width:10,height:10)，那么我们自然会认为这两个视图左右并排排列，contentSize为(x:0,y:0,width:20,height:10)：如图1可自动计算contentSize。

这种把若干个子视图合并，得出contentSize的能力，人类是天生具备的，但是计算机却不是这样。仅凭以上信息，程序无法推断出真正的contentSize。原因在于，我们没有明确的告诉系统，在这两个子视图拼接而成的区域以外，还有没有区域应该被contentSize包含。也就是contentSize也有可能是图2中描述的阴影部分。

如果需要指定contentSize就是两个正方形拼接而成的区域，我们还需要提供四个信息：

左边的正方形的左侧的边，距离contentSize左边的距离为0；

右边的正方形的右侧的边，距离contentSize右边的距离为0；

两个正方形顶部的边，距离contentSize顶部边的距离为0；

两个正方形底部的边，距离contentSize底部边的距离为0；

通过以上的分析，我们可以看到contentSize是依赖于子视图自身的大小，和上下左右四个方向的留白大小计算出的。而UIScrollView的leading/trailing/top/bottom是相对于它的contentSize而不是bounds来确定的。

根据UIScrollView的leading/trailing/top/bottom来确定子视图的位置，而通过分析，UIScrollView的leading/trailing/top/bottom是相对于自己的contentSize而言的,而contentSize又是根据子视图位置决定的。也就是说，contentSize无法确定，从而造成视图无法按预期效果进行展示，导致页面布局错乱或不能滑动。

发明内容

本发明的目的在于提供一种基于UIScrollView的iOS界面简化布局方法，其在简化布局的基础上保证了页面展示效果。

为实现上述目的，本发明采用的技术方案是：

一种基于UIScrollView的iOS界面简化布局方法，其包括以下步骤：

步骤1、为UIScrollView添加约束；

使用Autolayout直接创建一个UIScrollView视图，并UIScrollView视图添加到父视图上添加约束：将UIScrollView视图的左右两边和父视图对齐，并居中显示；

步骤2、为container添加约束；

首先，将container添加到UIScrollView视图上，并设置约束为container的上、下、左、右和contentSize的距离为0；

然后，确定container的高度，container的高度确定后，container的宽度直接决定了UIScrollView的宽度；

步骤3、在container上添加子视图并设置约束条件；

确定第一个子视图的左边与父视图container左边的距离；确定最后一个子视图的右边与父视图container右边的距离，从而获得container的宽度；

UIScrollView的contentSize与container的大小、位置相同；

步骤4、根据contentSize展示各个子视图。

采用上述方案后，本发明通过为container添加约束，并将container的上、下、左、右和contentSize的距离为0，在布局时，通过确定container的大小与位置，就可以确定contentSize的大小，最后根据contentSize进行各个子视图的展示，就可以保证各个子视图的展示效果，避免出现页面布局混乱或不能滑动的现象。

附图说明

图1为采用本发明的方法明确contentSize时各视图的展示效果图；

图2为未明确contentSize时各视图的展示效果图。

具体实施方式

本发明揭示了一种基于UIScrollView的iOS界面简化布局方法，其包括以下步骤：

步骤1、为UIScrollView添加约束。使用Autolayout时，不用考虑frame布局，而是直接创建一个UIScrollView视图，并UIScrollView视图添加到父视图上添加约束：将UIScrollView视图左右两边和父视图对齐，并居中显示。

步骤2、为container(滑动滚动视图里面的容器，用于承载子视图)添加约束。这里对container的约束非常重要，首先让container添加到UIScrollView视图上才能添加约束，然后设置约束为container的上、下、左、右和contentSize的距离为0，因此只要container的大小确定，contentSize也就可以确定了，因为此时它和container大小、位置完全相同。

然后直接通过一个数值，确定container的高度。避免了依赖UIScrollView布局。这样一来，UIScrollView就变成水平的了，container的宽度直接决定了UIScrollView的宽度。

步骤3、跟普通的Autolayout一样，在container上添加子视图并设置约束条件，其中要牢记的是：

第一个子视图要确定它左边距离它的父视图container左边的距离，最后一个子视图要确定它右边距离它的父视图container右边的距离，这样就可以获得container的宽度。至此，container的大小确定，contentSize也就可以确定了，因为此时它和container大小、位置完全相同。

步骤4、根据contentSize展示各个子视图。

图1为采用本发明方法明确contentSize后，子视图(A和B)的展示效果图，图2为未采用本发明方法，即未明确contentSize时的各子视图(A和B)的展示效果图。将图1和图2进行比较可知，本发明通过确定contentSize，来保证各个子视图的展示效果，避免出现页面布局混乱或不能滑动的现象。

以上所述，仅是本发明实施例而已，并非对本发明的技术范围作任何限制，故凡是依据本发明的技术实质对以上实施例所作的任何细微修改、等同变化与修饰，均仍属于本发明技术方案的范围内。

Claims (1)

1.一种基于UIScrollView的iOS界面简化布局方法，其特征在于：包括以下步骤：

步骤1、为UIScrollView添加约束；

使用Autolayout直接创建一个UIScrollView视图，并UIScrollView视图添加到父视图上添加约束：将UIScrollView视图的左右两边和父视图对齐，并居中显示；

步骤2、为container添加约束；

首先，将container添加到UIScrollView视图上，并设置约束为container的上、下、左、右和contentSize的距离为0；

然后，确定container的高度，container的高度确定后，container的宽度直接决定了UIScrollView的宽度；

步骤3、在container上添加子视图并设置约束条件；

确定第一个子视图的左边与父视图container左边的距离；确定最后一个子视图的右边与父视图container右边的距离，从而获得container的宽度；

UIScrollView的contentSize与container的大小、位置相同；

步骤4、根据contentSize展示各个子视图。