×

iOS 10可视化编程之约束篇(1)

96
虎哥最帅
2017.01.16 16:46* 字数 4115

在iOS中有两种可以实现的可视化编程的方法,一种是StoryBoard,俗称sb,是iOS下可视化编程的方式之一,另一种是XIB。

使用StoryBoard可以方便快捷的拖拽视图控制器,控件,设置根视图控制器,并且可以直观的看到位置大小,效果等,如果能熟练使用可视化编程可以减少很多的代码。

XIB是苹果公司用来开发界面的可视化编程文件,可以通过直观的界面布局,设计来完成使用代码完成的界面布局,设计功能。同时,XIB方式也支持将布局后的界面控件元素同步代码,以及同步事件函数,设计属性等功能。

这两种的区别:SB是一个文件管理多个可视化文件,在公司团队开发过程中很少会使用它,为了解决团队合作中的文件冲突问题,但是iOS 9 更新了新特性Storyboard References 可以解决这个问题,随后我们在后面会讲到这个东西。XIB是单独的可视化文件,团队开发可以进行使用,这两者我们要掌握的内容是:SB的创建方式和传值问题,XIB的创建方式和XIB的类关联。

无论是那种可视化编程,我们都需要掌握的是AutoLayout和SizeClasses。那我们就先从AutoLayout+SizeClasses开始。

AutoLayout+SizeClasses

AutoLayout:指的是自适应布局,控件在屏幕中通过约束来固定控件的位置。

SizeClasses:指的是就是不同的屏幕,一个控件在不同屏幕上所呈现的样子,意思就是你可以选择不同尺寸不同大小的屏幕,来对你的界面进行适配。

AutoLayout的介绍和简单使用

我们随便创建一个可视化文件,无论是SB或者XIB都可以。然后我们开始对AutoLayout的学习和讲解。如图1:


图1

上图中我使用的是SB。在SB中的右下角有几个按键。如图2:


图2

在左侧圈中的就是SizeClasses,而右侧就是我们要讲解的AutoLayout。

我们先对其按钮的意义进行介绍。如图3所示:


图3

我们依次对每个按钮进行介绍:

Leading Edges:左对齐

Trailing Edges:右对齐

Top Edges:顶部对齐

Bottom Edges:底部对齐

Horizontal Centers:垂直中心线对齐

Vertrical Centers:水平中心对齐

Baselines:基线对齐

Horizontally in container:和父视图的垂直中心线对齐

Verically in Container :和父视图的水平中心线对齐

update Frames:约束添加完成后刷新当前的可视化文件,方便开发人员看到效果。我们也可用快捷键’alt’ + ’command’ + ‘=‘来快速的操作。

继续来看第二个按钮,如图4所示:


图4

图中圈中的就是添加约束的位置。

下面勾选框constrain to margins 会对边界添加8px的空白。

width:控件的宽度。

height:控件的高度。

equal widths:等宽。

equal heights: 等高。

aspect Ratio :宽高比。

align:对齐方式。也就我们在图3中介绍的全部内容,我们可以通过右边的选项卡选择你想要的对齐方式。

update Frames: 更新frames。

随后,我们会对该图中的约束重点讲解。

我们继续往后看,如图5:


图5

图5中,我们用的最多的是清除约束,当我们约束添加错误的时候,我们可以清除约束重新添加。

在Selected Views 中:这里我们做的操作只对你选中的控件有影响,而在All Views in View Controller 中指的是当前可视化文件的所有视图都有影响,

update constraint constants :根据当前的控件所在位置更新约束。将控件的约束更新为你控件目前所在的位置的约束,一般不建议使用他刷新,而update Frames是根据你的约束让控件刷新位置。开发过程中,我们一般是加好约束,让控件去根据约束去刷新下位置,而不是让控件根据目前所在的位置去更新约束。所以在开发过程中,一般使用update Frames,而不是用update constraint constants。

Add missing Constraints :系统自动给不足的约束进行添加,一般我们不会选用这个按钮,如果真的出错。我们一般会选择清除约束重新添加。

Reset to suggested constraints:解决约束冲突。我们一般也不会采用他,让系统帮我们解决约束冲突的问题。

Clear Constraints:清除约束。

在约束中出现问题有3种情况:

1.约束警告

黄色的警告,一般指的的是当前视图中的约束和呈现出来的布局不一致,但是这个不影响开发,我们需要做的就是更新下约束。如图6-1,


图6-1

我们添加完约束后,视图会程序这样的黄色警告如图6-2。


图6-2

我们可以点击红色选中的按钮,进入到详情查看约束问题。如图6-3所示:


图6-3

我们只需要update Frames就可以解决这个黄色警告。或者使用快捷键Alt + command + =。 我一般喜欢使用快捷键。

如果你采用了这个按键,如图6-4所示。那么控件的约束就更改成,你现在可视化文件中的位置的约束,所以大家尽可能是去使用update Frames,而不是如6-4所示的方法。



图6-4

使用command+alt+=也就是update Frames更新后的效果如图6-5所示:


图6-5

2约束不足

红色的警告,我们需要补全约束才行。如图7-1所示。我们可以根据系统的提示,补全对应的约束,当然,我们也可以通过系统的建议使用Add missing Constraints来让系统自动补全约束,但是这种方法不建议大家使用,建议大家通过系统的提示自己添加约束。


图7-1

3约束冲突

约束的添加出现冲突,比如说,你让一个控件距离左边10px,距离右边10px,但是你又给控件添加宽度为46px,这样一种情况就出现了约束的冲突,如图8-1所示。这样一种错误,我们需要根据提示删除多余的约束,或者使用系统的自动约束解决方法,Reset to suggested constraints,不建议大家使用。


图8-1

以上是给大家先说下约束中的问题,应对如何解决,接下来我们开始是我们的重点,约束的添加和使用。

约束的熟练掌握需要大量的练习来完成。接下来我们一起练习几个例子来掌握约束。

练习

练习1

一个view 宽100 ,高度200,距上10,距左10,如图9-1所示。


图9-1

这样一个布局,如果想用约束来实现的话,我们可以添加以下的约束来实现,如图9-2所示:


图9-2

点击下面的add 4 constraints 就可以添加上约束了。添加完约束后,更新下Frames 就能呈现我们想要的效果。

练习2

一个view占满整个屏幕。如图10-1所示:


图10-1

添加约束如图10-2所示:


图10-2

我们来验证下Constraints to margins的作用,现在我们换成取消掉整个选项卡看下效果,如图10-3所示:


图10-3

我们可以注意到左右两边的空白消失了。这个选项的作用就是系统默认会给我们添加8像素的空白区域。我们在开发过程中一般会取消掉它。

图10-3中,我们发现上边距还是有20像素的边距空白,接下来我们要讲下这个相对约束,我们添加的约束,系统一般会自己默认给我们一个相对的控件进行添加,比如上面的左右的约束,我们相对的是视图的左边距和右边距,但是上边距系统会有一个20像素的菜单栏,也就是我们的电池,时间等菜单栏,我们也可以自己选择进行约束的布局,如图10-4所示:


图10-4

上边距约束,系统默认选择的是菜单栏,所以会有20像素的边距,我们悬着父视图View,这个边距就会消失。如图10-5所示:


图10-5

添加完成后更新下约束,我们就能得到效果,如图10-6所示:


图10-6

注意:当我们视图中的控件较多时,一定要点开看看,系统选择的相对控件是哪一个,如果不是你想要的,一定要切换。每次添加完约束后,如果不是想要的效果,大家可以清除下约束,重写添加,不要一直添加,否者就会造成约束的冲突。以上的所有效果,每次的添加约束,我都清除了约束之后进行的添加。

练习3

在开发过程中,我们会有一种情况,就是图片,图片在进行拉深后,图就会变形,那么我们如何解决这个问题呢?这就需要用到我们的宽高比约束。一个imageView在屏幕的左上角,宽度为距左100,距右100。宽高比为3:2.无论是横屏还是竖屏情况下,我们都需要进行让他不能被拉深,只能按照比例进行增长。如图11所示:


图11

那这个效果如果添加约束我们如何添加呢?如图11-1所示:



图11-1

添加完成后,我们选中我们的imageview发现,我们的比例不是我们想要的如图11-4所示:


图11-4

这个时候,我们需要进行约束的修改.如图11-5所示:


图11-5

点中Edit进行编辑。如图11-6所示:


图11-6

修改完成后enter就可以了,不需要进行更新约束,系统会自动更新。关于参数的修改,我们在后面会更加详细的修改。

练习4

横屏效果图如图12-1所示。


图12-1

竖屏效果图如图12-2所示。


图12-2

那这种效果添加成约束,左侧imageview添加约束如图12-3所示:


图12-3

右侧imageview的视图添加约束如图12-4所示:


图12-4

(ps:虽然相同的约束可以一起添加,但是我建议大家约束尽可能的一个控件一个控件的进行添加,不要一次性进行添加,因为在添加约束的过程中是相对控件进行添加约束的,一起添加很容易出错。)

这个时候添加完这2个约束,只能是宽度固定和位置固定了,也就是每个控件各占屏幕的一半,但是高度我们还没有添加,所以这个时候,我们的约束是不足的,是爆红的。然后我们把约束补全。左侧和右侧的约束分别添加高度的约束。如图12-5所示:


图12-5

这种效果,我们也可以用其他的约束进行实现,左侧和右侧的控件进行等高等宽的处理,或者添加上中心线对齐。

如图12-6所示:通过按住command不松手,同时选中2个控件。同时添加约束。


图12-6

练习5

我们接下来练习下对齐方式。如图13-1所示:


图13-1

如13-1所示:一个控件在屏幕的中心位置。

那么我们就可以通过对齐方式的约束进行实现。

约束添加如图13-2,图13-3所示:


图13-2



图13-3

在13-3中,框中的0,代表的是距离父视图中心线的距离,大家可以通过自己添加不同的数字,来让视图进行一定的偏移。

如图13-4所示,如果我其他的约束不改变,在框中添加了100的数字,当前控件的位置就会发生改变。


图13-4

那么呈现的效果如图13-5所示:


图13-5

大家也可以写成-100看下效果,这里就不再演示。

接下来,我们练习其他的对齐方式。

练习6

效果如图14-1所示:


图14-1

图13中,我们练习的是父视图中心线的对齐,现在我们练习2个空间的中心线对齐。目前我们联系的是垂直中心线的对齐方式。在我们刚刚在练习5中,添加父视图中心线对齐的时候,不知道大家发现了没有,我们的其他对齐方式是灰色的,也就是不能使用的。在此之前,我也说过,添加约束是需要有相对对象的,你如果想要添加等高等宽的约束,我们是需要选中2个以上的控件才能使用,否者就会是灰色的。那么对齐方式也是一样的,现在你需要同时选中2个控件才能使用其他的对齐方式的约束。

以上的效果显示,我们如果添加上约束的,我们首先需要给2个控件进行宽高的固定,然后给其中一个控件进行位置的确定,另外一个控件进行中心线对齐就可以了上图约束添加如图14-2,下图约束添加入图14-3所示:


图14-2

图14-3

这样的话上面的控件就已经固定住了。下面的控件我们垂直方向已经固定,现在还剩下水平方向的没有固定,我们需要给它添加一个和上视图的垂直中心对齐如图14-4所示:


图14-4

这样的话,更下下视图Frames就能得到我们刚刚的效果图所呈现的效果了。

那其他那些左对齐,右对齐,也是同理,大家可以自行进行练习,唯一一点就是大家需要注意对齐方式的约束是需要2个以上的控件才能进行添加,在添加对齐方式的时候,一定要先固定住其中一个控件,才能达到效果。

这里需要提到一个基线对齐。所为的基线指的就是我们当初写英语单词的四线格如图15所示:


图15

但是这种对齐方式,在我们开发过程中很少使用。这里就不再演示效果了。

以上就是约束的简单使用。

预告:下章更新的内容是约束的进阶,主要讲的内容是约束的修改,约束的动画效果,以及几种复杂界面约束的实现。

如果喜欢我的文章,或者帮助到你,大家可以点个赞或者添加个关注。如果你能请我喝瓶可乐或者来包小浣熊,那我就再开心不过了。感谢你对开发界的支持!


来包小浣熊
日记本
Web note ad 1