>

澳门新葡亰平台游戏:Layout深刻摸底SizeClasses的功

- 编辑:澳门新葡亰平台游戏 -

澳门新葡亰平台游戏:Layout深刻摸底SizeClasses的功

澳门新葡亰平台游戏 12015-12-2010.21.44这里直接用我写的【iOS自动布局AutoLayout的使用】的例子使用把上面的例子直接使用4英寸iPhone横屏显示澳门新葡亰平台游戏 22015-12-2112.22.43会发现button按钮不见,如何来解决这个问题呢1、在wAny hAny那里,弹出的框选择第一个小方块,意思是通过此步骤直接设置3.5、4、4.7-inch iPhone 在横屏(landscape)下的布局澳门新葡亰平台游戏 32015-12-2112.24.172、将button下的Top Space to:password Equals:100,这个约束条件去掉,则这个约束条件为灰色显示,意思是该约束条件在改模式下卸载了,而在其他模式下还是成立的澳门新葡亰平台游戏 42015-12-2112.28.253、将Width Equals:280改成1504、将Height Equals:71改成405、添加button距离屏幕底部的约束条件为20步骤3、4、5的意思是对该button在横屏下重新布局(根据自己的设计任意布局)澳门新葡亰平台游戏 52015-12-2112.31.46在Document Outline下,选中一条该模式下设置的约束条件,则会在Size面板的最下面看到两个选项,意思是该约束条件在该模式下成立,而在其他模式下不成立澳门新葡亰平台游戏 62015-12-2112.38.04要想对pad或其他的设备适配,可以在SizeClasses的9宫格那里对应的选择然后已同样的方式进行设置即可。接下来我们来看看在4英寸iPhone横屏下的效果澳门新葡亰平台游戏 72015-12-2112.44.28同样竖屏不受任何影响澳门新葡亰平台游戏 82015-12-2112.02.32

澳门新葡亰平台游戏 92015-12-209.03.16那么,我们使用了UIStackView,但是在横屏的情况下还是表现不佳,该怎么办呢,非常简单在Document Outline界面选中StackView,在Attributes inspector下,在Axis前面的加号,点击一下,选择Compact Width下面的Compact Height,然后将它设置为Horizontal。澳门新葡亰平台游戏 102015-12-209.03.38澳门新葡亰平台游戏 112015-12-209.04.04我们为什么要这样做呢,因为在iPhone的3.5英寸,4英寸以及4.7英寸的手机下,横屏的宽和高都是Compact,在这种情况下,就会出现上面的那种情况,所以选择Compact Width下面的Compact Height,为什么要选择Horizontal呢,因为是横屏,那我们就让StackView水平显示,这样效果就会更好,以同样的方式添加5.5英寸的iPhone以及ipad的适配再来看看效果澳门新葡亰平台游戏 122015-12-209.04.13是不是非常完美呢。总体的来说,UIStackView还是非常的方便的,但是不是这样规则性的需求时,或许就用不到UIStackView了,大家可以根据自己的需求选择,但还是建议大家能用UIStackView就尽量用,因为真心非常的方便,而且非常的快。

自动布局(Auto Layout)能够根据对视图的约束(Constraint),动态地计算视图层次结构中所有视图的大小和位置。

本站文章均为原创,转载务必在明显处注明:(作者新浪微博:@周公梦蝶9999 )转载自 原文链接: 、任意 、 正常 ,点击ViewControllerScene下面的wAny hAny会弹出一个9宫格,鼠标选择时,底下会有设配的尺寸和横竖屏的提示,同时上面会对应的提示适配机型的宽高类型。Sizeclasses看起来像个9宫格,可以将屏幕的大小以及横竖屏任意切割显示,感觉非常的神奇。对应关系如下:

该工程的下载地址:oschina: **

Orange View.Width = 2.0 x Blue View.Width

澳门新葡亰平台游戏 132015-12-208.00.354英寸IPhone竖屏展示是没有问题的澳门新葡亰平台游戏 142015-12-207.21.324英寸Iphone横屏展示就会出现这样的问题澳门新葡亰平台游戏 152015-12-207.21.42如果想要解决如上图所示横屏问题时,我们又需要通过SizeClasses对横屏操作面对这么简单的一个小小的demo,就要这么的复杂,针对此问题,苹果在2015年的WWDC上给我们展示了UIStackView,可以非常方便的做出这样的效果,接下来我们就用UIStackView来做一下这样的一个小demo。首先来介绍一下UIStackView的基本属性UIStackView的属性面板澳门新葡亰平台游戏 162015-12-206.25.53UIStackView的属性中文解释澳门新葡亰平台游戏 172015-12-207.39.25接下来,我们就一步步的用UIStackView来做一下1、首先在拖拽一个Vertical Stack View到storyboard,然后选择下面的Pin按钮,对StackView设置约束1)反勾选Constrain to margins,然后设置上面为10,左右两边分别为20,然后添加这三个约束澳门新葡亰平台游戏 182015-12-208.17.182)选择Resolve Auto Layout lssues,在Selected Views下面选择Add Missing Constraints,添加一下缺失约束3)选择Resolve Auto Layout lssues,在Selected Views下面选择Update Frames,更新一下界面澳门新葡亰平台游戏 192015-12-209.00.03**4)拖拽一个View到StackView中,并在Size inspector给它设置一个背景颜色(便于看的清,随便设置),然后设置它的高度为154个像素5)按下command

澳门新葡亰平台游戏 20AutoLayoutMenu.png

为了解决适配多尺寸的问题,Apple在2012年推出了Auto Layout特性,2014年又推出了Adaptive Layout、Size Classes,2015年又推出了Stack View。这些无一不是我们开发者做适配的利器。今天就让我们看看StackView是怎么一回事。UIStackView提供了一个高效的接口用于平铺一行或一列的视图组合。对于嵌入到StackView的视图,你不用再添加自动布局的约束了,Stack View管理这些子视图的布局,并帮你自动布局约束。也就是说,这些子视图能够适应不同的屏幕尺寸,你只需要对StackView做出相应的约束就行了。此外,你可以嵌入一个stack View到另一个stack view中来创建更为复杂的用户界面。下面做一个小demo在界面上拖拽3个UIImageView,第一个ImageView距离Top Layout Guide为10个像素,距离屏幕左边距为20个像素,距离屏幕右边距为20个像素,第二个和第三ImageView,每个之间的间距是10个像素,同样距离屏幕左边距为20个像素,距离屏幕右边距为20个像素,三个ImageView的高度相同为154个像素。假如没有UIStackView,我们做这样的一个小demo展示时,通过Auto Layout分别需要给每个ImageView添加约束,而且在横屏的情况下表现不佳的话还需要通过Size Classes设置横屏的情况,就做这样的一个小demo,就这样的复杂。对每个ImageView做对应的约束

  • Item 1:方程式中的第一项,这里指Red视图。第一项必须是视图或布局参考线(Layout Guide)。
  • Attribute 1:在Item 1添加约束的位置。在这里是Red视图的Leading
  • Relationship:左右两侧的关系,可以是equalgreater than or equalless than or equal之一。在这里左右两侧相等。
  • Multiplier:第二项的值乘以该浮点值。在这里,乘数是1.0
  • Item 2:方程式中的第二项,在这里是Blue视图。与第一项不同,这一项可以为空。
  • Attribute 2:在Item 2添加约束的位置。在这里是Blue视图的Trailing。如果Item 2为空,这里也要为空。
  • Constant:浮点类型的常量。在这里是8.0,该值被添加到Attribute 2
  • d,在复制两个相同的View,然后给每个View设置不同的背景颜色6)在Document Outline界面选中StackView,在Attributes inspector下,Distribution设置成Fill Equally,让每个子视图的宽高相等,其实不用设置也行,因为我们刚才是复制的,不是拖拽的,所以每个View本来大小就相等。7)同样在StackView的Attributes inspector下,将Spacing设置成10,意思就是StackView里面的每个子视图间距是10个像素澳门新葡亰平台游戏 212015-12-208.50.06然后我们看看效果4英寸Iphone竖屏显示**澳门新葡亰平台游戏 222015-12-207.21.32

两个视图布局约束是:Blue视图与TopBottom距离是20,与Leading距离0,与Orange视图距离是standardOrange视图与TopBottom距离是20,与Trailing距离0。同时Orange视图宽度是Blue视图宽度的二倍。

本站文章均为原创,转载务必在明显处注明:(作者新浪微博:@周公梦蝶9999 )转载自 原文链接:

可以通过点击上图左下角的+按钮添加多个设备的预览,这里只添加iPhone SE。

4英寸Iphone横屏显示(效果不是我们想要看到的)

Add New Constraints一项中顶部有Constrain to margins选项框。如果勾选上,约束添加到父视图的margin属性;如果取消勾选,约束添加到父视图的edge属性。如果在一个控制器上添加一个UIView,设置背景色为Red,到四边的约束均为0,下面第一个图为勾选Constrain to margins,第二个为不勾选。想要了解详细区别,点击这里。

双击后弹出如下:

选中左上角Label,点击Add New Constraints,在弹出的菜单顶部一栏左侧和上部分别填写020,点击底部Add 2 Constraints添加约束。

继续在刚才的demo里操作,从对象库拖拽出一个View Controller,在顶部添加一个UILabel和一个UITextField

目前为止,所有示例均用约束指定视图的位置和大小,但有些视图的大小根据内容变化,这称为固有内容大小(Intrinsic Content Size)。例如,UIButtonintrinsic content size是标题大小外加很小margin。

澳门新葡亰平台游戏 23AutoLayoutProgrammatically.png

第三种方式为使用Auto Layout添加一系列约束来构建界面,这些约束代表两个视图间的关系,最后Auto Layout根据这些约束计算出视图的位置和大小。Auto Layout动态的响应内部、外部变化。

澳门新葡亰平台游戏 24AutoLayoutD2Standard.png

澳门新葡亰平台游戏 25AutoLayoutD1Mainstoryboard.png

在自动布局中,可供约束的属性有左右上下四边(leading,trailing,top和bottom)、宽、高、水平居中和垂直居中等。

Demo名称:AutoLayout源码地址:

应尽量使用LeadingTrailing,避免使用LeftRight,这样布局会适应视图的阅读方向。阅读方向随用户设定的当前语言而变,你也可以自己设定。

澳门新葡亰平台游戏 26AutoLayoutD3Final.png

大部分的外部变化会在运行时发生,这就要求app要动态的调整视图布局。尽管屏幕尺寸不会改变,但创建一个自动布局的界面就可以适用于iPhone SE、iPhone 7 Plus、甚至iPad不同尺寸屏幕的设备。

Auto Layout在每个维度使用一对约束来表示视图的intrinsic content size。内容拥抱(Content hugging)将视图向内拉,使其紧贴内容。内容压缩阻力(Content Compression Resistance)将视图向外推,使其内容能够完整显示、不被压缩。

澳门新葡亰平台游戏 27AutoLayoutD3Storyboard.png

澳门新葡亰平台游戏 28AutoLayoutMargin.png澳门新葡亰平台游戏 29AutoLayoutEdge.png

现在添加两个视图宽度的约束。同时选中两个视图,点击Add New Constraints按钮,在弹出窗中勾选上图中的Equal Widths选项。最后点击Add 1 Constraint。如果视图出现黄色警告线,表示当前位置与视图约束位置不同,点击Update Frames更新视图位置。

打开Main.storyboard,添加5个UILabel。如下图所示,一个在中心,其余每个角各一个。拖放UILabel时会出现蓝色虚线,放在这些蓝色虚线位置。

这个约束表示Red视图的Leading必须在Blue视图Trailing8points,该方程由以下几部分组成:

点击Update Frames更新frame。在Preview查看布局。

把上图中的Equal修改为Greater than or Equal,这样宽度就会大于等于150

自左向右依次为:

Interface Builder里有三种添加约束的方式。第一种是在视图间control+鼠标左键拖拽,也可以在Document Outline拖拽,在视图间拖拽的好处是弹出菜单会根据拖拽方向改变。第二种是使用AlignAdd New Constraints工具,第三种是让Interface Builder设置约束之后我们修改约束。自动布局菜单共以下五项:

澳门新葡亰平台游戏 30AutoLayoutD1PreviewAdd.png

点击Xcode右上角的Assistant editor,这时一般显示的是你所选中视图控制器的代码,点击左上角的Automatic,从弹出菜单中选择Preview > Main.storyboard

澳门新葡亰平台游戏 31AutoLayoutD3Constraints.png

现在进入Preview查看,一切正常。可以点击红色标记处的旋转按钮,查看横屏(Landscape)状态下Label位置、大小。

基于约束的Auto Layout使我们能够搭建动态响应内部、外部变化的用户界面。外部变化包括用户改变窗口大小、旋转设备、在iPad上进入或离开分割视图、不同屏幕尺寸,内部变化包括app显示内容长度变化、字体大小变化、对国际化的支持等。

这里添加约束与前面示例相同,不再叙述添加过程。只说一下添加基线约束。选中两个视图,点击Align,勾选Baselines,点击添加Add 1 Constraint

第二种方式是使用Autoresizing masks来构建界面,Autoresizing masks指定视图如何随父视图的变化而改变,这简化了适应外部变化布局的复杂度。Autoresizing masks用于较小数量的可能布局,对于复杂的用户界面,需要结合使用代码布局。另外,Autoresizing masks只适用于外部变化,不响应内部变化。

这里创建一个Single View Application模板的应用,Product NameAutoLayoutLanguageObjective-CDevicesUniversal,选择文件位置,创建工程。

  1. Auto Layout Guide
  2. What is “Constrain to margin” in Storyboard in Xcode 6

UILabelUITextField在一起时,一般UILabel保持自身宽度,拉伸UITextField,以此填充可用空间。所以,应当设置UILabelcontent hugging优先级为251UITextField的为250

澳门新葡亰平台游戏 32AutoLayoutD3Relation.png

当用户界面中视图或控件大小变化时会导致内部变化。如对国际化的支持,把用户界面上的文字改变为其他语言时,新的语言可能占用不同大小空间;不同的语言有不同布局方向,如英语、中文都是自左向右,而阿拉伯语自右向左,这时中、英文界面右下角的按钮在阿拉伯语中应在左下角。如app支持调整字体大小,调整后用户界面中任何文本的高度和宽度都会发生变化,此时需要调整布局。

这是关于自动布局的第一篇文章。>> Stack View的使用

通过上图可以看到,在4英寸的iPhone SE中,只有左上角一个Label显示正常。这是因为如果视图没有任何约束,在Build Time系统会自动为视图添加至左上角、目前大小的约束。当你添加第一个约束时,系统会自动清除所有系统添加的约束,此时系统会出现红色警告提示约束不足。当你添加了一个约束时,你就需要添加可满足布局的所有约束。

固有内容大小的约束有自身的优先级。一般,content hugging优先级为250content compression resistance优先级750。因此,一般拉伸视图比压缩视图容易。例如:你可以把button拉伸一些,不影响使用。但如果压缩一些,内容可能无法完整显示。

继续在刚才的demo中进行操作,打开Main.storyboard,从对象库拖拽出一个View Controller,在上面添加两个UIView,左右各一个,左侧颜色为Blue,右侧颜色为Orange

约束既可以用来描述界面中两个视图间的关系,也可以定义一个视图中不同属性间的关系。例如设置视图高度和宽度的高宽比。

继续对示例2中的视图进行操作,这次限定Blue视图宽度大于或等于150。只有当屏幕足够宽时Orange视图宽度为Blue视图宽度二倍才实现,也就是可选实现。

选中Blue视图,点击Add New Constraints添加宽度为150的约束。保持Blue视图选中状态,打开Size Inspector,双击Constraints一栏中宽度为150的约束。也可以单击Edit按钮。

需要说明的是上面方程式中的=是相等,不是赋值。当Auto Layout布局界面时,会计算Attribute 1Attribute 2的值直到等式成立,而不会直接把右侧的值赋值给左侧。因此我们可以互换等式左右两侧的值,但遵守下面规则的约束更易于维护。不符合下面规则的约束可以通过互换等式两侧解决。

现在添加Orange视图宽度为Blue视图宽度二倍的约束。选中任意一个视图,点击底部=约束线,右侧会自动打开Attribute Inspector,鼠标放在First Item会看到选中的是Orange视图,所以这里的等式为

所以,修改Multiplier2

澳门新葡亰平台游戏 33AutoLayoutEquation.png

下面通过几个示例来体验Auto Layout。

澳门新葡亰平台游戏 34AutoLayoutD1AddConstraints.png

澳门新葡亰平台游戏 35AutoLayoutD2Mainstoryboard.png

Preview查看如下,在模拟器查看效果一样。

最后选中视图中心的Label,点击Align,勾选弹出窗口中Horizontally in ContainerVertically in Container选项框,后面数字均为0,点击Add 2 Constraints添加约束。

澳门新葡亰平台游戏 36AutoLayoutD4Baselings.png

澳门新葡亰平台游戏 37AutoLayoutIntrinsicContentSize.png

布局用户界面方式有三种,第一种是代码方式,第二种是使用Autoresizing masks,第三种是使用Auto Layout。

上图中的Priority为约束优先级。所有约束默认必须实现,也可以创建可选实现的约束。

可以看到,在iPhone的竖屏中两个视图宽度几乎一样宽,在横屏(Landscape)中,Orange视图宽度是Blue视图宽度二倍。即优先满足了Blue视图宽度大于等于150这一约束。

为布局界面,你必须计算视图层级中每一个视图的位置和大小。如果其中一个发生了改变,你就需要再次计算所有受影响的视图。在许多方面,以代码方式构建的界面会更灵活、更强大。当界面有变化时,你可以操作其它视图的变化。也正因为你需要控制其它视图的变化,构建一个简单的界面可能需要大量工作,构建一个自适应的界面就变的更加困难。

因为这里设置LeadingTrailingTopBottom约束与前面相同,不再叙述。如果遇到问题,可以在我的Github中查看。另外,文章底部也会提供demo地址。

  • Update Frame:用于在约束更新后,更新frame
  • Embed in Stack:用于嵌入Stack View,会根据目前选中视图自动嵌入Horizontal Stack ViewVertical Stack View
  • Align:用于设置视图水平中心、垂直中心、基线等。
  • Add New Constraints:用于设置视图与最近视图、或控制器Margin距离,视图宽、高、宽高比等。
  • Resolve Auto Layout issues:添加建议约束、删除约束,其中上半部分对选中视图有效,下半部分对所有视图有效。

下面添加两个视图间间距的约束。选中Blue视图,点击Add New Constraints按钮,在弹出窗顶部点击Trailing文本框内的下三角,选择Use Standard Value,最后点击Add 1 Constraint。另外,Standard Value默认为8

澳门新葡亰平台游戏 38AutoLayoutD4Final.png

添加约束,让LabelLeading距离为0,与Text FieldLeading距离为Standard值,与Text Field基线在同一水平位置;让Text FieldTop距离20,与Trailing距离为0。两个视图宽和高均为固有内容大小。

视图层次结构布局被定义为一系列线性方程。每个约束表示一个方程。目标是声明一系列方程,最后只有一个可能的布局方案。下图是一个示例方程。

欢迎更多指正:

虽然优先级的值是11000,但系统把优先级划分成了低、中、高和必需四类,你只需要把约束优先级设定为高于或低于这些值一到两个点即可。

澳门新葡亰平台游戏 39AutoLayoutAttribute.png

参考资料:

澳门新葡亰平台游戏 40AutoLayoutConstraints.png

一般在处理示例4中的约束时应该使用Stack ViewStack View提供了一种轻松的方式利用自动布局的功能,而不会引入复杂的约束,在下一篇文章我们将详细介绍Stack View的使用。

现在storyboard出现红色警告,提示Blue视图宽度大于等于150Orange视图宽度为Blue视图宽度二倍冲突,把后者优先级设定为750Preview显示如下:

只有当高为固有内容大小时基线才可以正确对齐。如果高被压缩或拉伸,基线将不能正确对齐。

澳门新葡亰平台游戏 41AutoLayoutD2Multiplier.png

通过代码方式来布局用户界面时需要设定视图在其父视图坐标系中的位置和大小。

  • Multiplier优先使用整数而非分数。
  • 常量优先使用正数而非负数。
  • 如果可能,视图更应该自上而下,自左向右布局。

用同样方式为另外三个角落处的Label添加约束,约束均是到距离自己最近的边缘,其中LeadingTrailing0TopBottom20

澳门新葡亰平台游戏 42AutoLayoutD1Preview.png

所有约束有一个优先级属性,它的值在11000间。优先级为1000的约束必须实现,其它优先级的约束为可选实现。当自动布局计算布局方式时,会优先满足高优先级的约束。如果不能满足低优先级的约束,该约束会被跳过,但被跳过的约束不是完全无效,Auto Layout计算布局方案时会选择最接近被跳过约束的方案。

通过创建这样的方程可以创建多种约束,可以定义两个视图间的距离,对齐视图、定义两个视图大小关系、定义视图宽高比(Aspect Ratio)。

澳门新葡亰平台游戏 43AutoLayoutD2Final.png

澳门新葡亰平台游戏 44AutoLayoutD1PreviewFinal.png

不是所有的视图都有intrinsic content size。如:UIViewNSView不具有固有内容大小,UILabelUIButtonUISwitchUITextField高和宽都具有固有内容大小,UIImageView没有添加图片时不具有intrinsic content size,添加图片后固有内容大小与图片大小一致。

Size Inspector检查content hugging,你会发现Interface Builder已经设置好了优先级。另外,如果你是用代码添加自动布局,需要手动设定这里的优先级。

还记得之前我们说到的蓝色虚线吗?它们不是这里说到的约束,它们是Xcode提供的布局参考线。

本文由java编程发布,转载请注明来源:澳门新葡亰平台游戏:Layout深刻摸底SizeClasses的功