iOS 8 AutoLayout 及SizeClass(二) 使用详解

翻译 2015年07月07日 11:21:19
一、概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的:

1、Xcode6中增加了size class,在storyboard中如何使用?

2、auto layout该如何与size class配合来进行UI布局?


二、了解一件新事物的最好的办法就是实践,让我们揭开那神秘的面纱:

例子1、新建一个Single View Application template项目Demo1,拖拽一个newView到rootView上,并设置背景色为绿色, 然后不做任何其他修改,运行项目,模拟器选择iPhone6,运行效果如图:

横屏:



竖屏:



把模拟器更改为iPad、iPhone4s等,然后再旋转屏幕,发现绿色的newView的位置几乎没有变化。查看Document Outline发现没有任何constraint(约束)作用于绿色view上,理论上如果一个view没有任何constraint,那么view将没有位置及大小,但目前来看是没问题的,何解?



查看view的size inspector,发现秘密了:


原来如果不给一个view添加任何constraint,系统会自动给view添加左、上、宽、高四个约束,就是说新绿色的view会有固定的宽和高,然后以屏幕左上角为参考点,有一个系统添加的默认位置。(如果我们向绿色view添加任何其他约束,那么系统自动添加的约束将实效)


还有一个问题是,刚刚切换了很多不同类型的模拟器,相当于切换了不同的size class,但显示绿色view都正常,而size class的存在的目的就是为了区分不同的size class(例如:iPhone4s横屏wCompact/hCompact,iPhone4s竖屏wCompact/hRegular,iPad横竖屏都是wRegular/hRegular),然后来做不同的UI布局,何解?

查看当前的size class:



当前的size class为wAny/hAny,也就是说在size class为wAny/hAny的时候添加constraint,在其他size class的时候也生效。其实从字面上也可以看出,Any就是任何的意思,Compact和Regular是Any的子类。


例子2、基于iPhone适配界面,添加三个view到rootView上,然后无论横屏还是竖屏,新添加的三个view之间及与屏幕边框的距离都保持不变的间距20点宽,效果如图:

       

新建一个Single View Application template项目Demo2,因为要适配iPhone横竖屏,所以修改size class为wCompact/hRegular来适配竖屏:

拖拽3个view到rootView上,并设置其背景颜色


为了满足设计要求,要添加如下constraint:

(1)设定绿色view距离superview左边距和上边距;

(2)设定黄色view距离superview右边距和上边距,相对绿色view的的左边距;

(3)设定蓝色view的左边距和右边距和下边距,上边距离绿色view下边的距离;

(4)设定绿色view与黄色view等宽

(5)设定蓝色view与绿色view等高

现在开始动手吧:选中绿色view,Eidtor->Pin->Leading Space to Superview给绿色view添加相对其superview的左边距,然后选中constraint,修改约束的值为20,其他constraint以此类推:


添加完如图:



其中红色框部分清晰的表达了所添加的constraint;

蓝色框部分时添加的constraint,目前为黄色线,表明当前的constraint还不能定位view,当一个view的constraint正确的时候,constraint的颜色会变为蓝色。

绿色线框的部分表达了constraint的数值,我们想让边距为20,所以设置数值为20 。wC hR Installed表明当前constraint适用于wC hR这种size class,不适合any any的size class。

添加绿色view与黄色view之前的距离时候,由于是设定两个子view的constraint,所以要选中两个view,然后Editor->Pin ->Horizontal,设定值为20:


同样方法Editor->Pin ->Width Equally,设定绿色view与黄色view等宽度,蓝色view与绿色view等高,结果如图:



但发现constraint颜色仍然后黄色,原因是当前view的位置和constraint希望的不一致,更新下frame(要选中3个view,因为constraint关联3个view)或者点击Document Outline中的黄色小箭头,然后会看到具体的constraint信息来一步步调试,这个也是Xcode6最有突破的地方


然后效果如图:


然后运行下项目吧,发现确实和预期的一样。然后旋转屏幕,是不是发现横屏时候白了,屏幕什么都没有了?原因是我们仅仅适配的竖屏,横屏还没有适配啊!

修改size class,iPhone4s横屏的size class为wCompact/hCompact,而iPhone6 plus为wReguage/hCompact,那我们不如设置为wAny/hCompact吧!然后安装上边适配竖屏的方式适配横屏。适配好后再次运行,横竖屏都应该是我们想要的了。

完整项目下载


例子3、新建一个Single View Application template项目Demo3,添加一个view,是这个view的宽度和高度都是100点宽,并且始终居中于superview,效果如图:


这个例子很简单,也很容易实现,目的是补充以上两个例子没有提及到的一些细节。

在rootView上添加一个view,设定背景色为绿色:


由于不打算区分是哪种iOS设备,所以size class选择wAny/hAny,然后绿色的view随便放到superview上就可以,Auto Layout的理念就是不用去管具体view的frame,要注意的是这个view最终想如何的显示,属于基于目的设计的范畴。

这个例子要完成两件事情:

(1)设定约束使view的宽和高为100点宽

(2)设定约束使view始终居中于superview

先做第(1)件事:选中view,然后Editor->Pin->Width,设定为100,同样方法设定Height

         

然后第(2)件是让view居中:还是选中view,然后Editor ->Aligh ->Horizontal Center in Container,同样方法设定垂直居中对齐:


然后会发现Document Outline右上角有一个黄色小箭头:


点击黄色箭头进入structure页面,可以看到一些提示信息,可以了解当前布局存在问题,指导下一步该做什么。在view中看到一个黄色虚线框,这个框代表目前约束得到的view,在structure页面有一个黄色的点,点击后会提示你如何修改:



选择Update Frame就是按照当前的约束去更新view,选择Update Constains是按照拖拽进去view的frame更新约束。在这个例子中Update Frame是我们需要的。然后运行项目看看是不是我们想要的效果吧!

Demo3


本部分细节很多,而且都是要动手练习才会明白,多多动手,不断成长哈!

iOS使用autolayout和sizeclass 解决适配问题(一)

一。为啥使用autolayout?使用 autolayout 有什么好处?      随着iPhone的种类不断增多,不同尺寸、不同分辨率的iOS设备将会越来越多,使用传统frame布局的工作量必...
  • Shave_Kevin
  • Shave_Kevin
  • 2015年08月31日 22:46
  • 1706

xcode6中自动布局autolayout和sizeclass的使用

一、关于自动布局(Autolayout) 在Xcode中,自动布局看似是一个很复杂的系统,在真正使用它之前,我也是这么认为的,不过事实并非如此。 我们知道,一款iOS应用,其主要UI组件是由一个个相...
  • lihuiqwertyuiop
  • lihuiqwertyuiop
  • 2014年09月15日 10:19
  • 19159

iOS开发之size Class初探

原文地址:http://onevcat.com/2014/07/ios-ui-unique/ iOS界面开发的大一统 本文是我的 WWDC 2014 笔记 中的一篇,涉及的...
  • sky_2016
  • sky_2016
  • 2014年11月29日 13:32
  • 717

关于纯代码适配SizeClass

最近一直在考虑适配 iphone6 的一些问题,其实只要会用autoLayout适配起来也大概差不多!只要判断设备的SizeClaeese根据不同的尺寸注备好相应的约束就可以了!...
  • Laber1314
  • Laber1314
  • 2014年12月25日 17:02
  • 2902

ios开发autolayout之代码实现Autolayout使用总结

ios开发autolayout之代码实现Autolayout使用总结 1.理论部分 demo示例1: UIView *blueView = [[UIView...
  • sunnyboy9
  • sunnyboy9
  • 2016年04月12日 13:07
  • 1013

iOS 8 的autolayout 的使用 -- (一)

Auto Layout 使用心得(一)--初体验 本系列文章将从一个慢慢摸索中的新手的角度介绍 Auto Layout,讲述我在这两个月的学习中对它一点一滴的感受,最终目的是让大家在阅读完之后能够自...
  • RC_cong
  • RC_cong
  • 2015年04月22日 10:15
  • 723

iOS: 在代码中使用Autolayout (1) - 按比例缩放和优先级

首先说按比例缩放,这是在Interface Builder中无法设置的内容。而在代码中,使用NSLayoutConstraint类型的初始化函数中的multiplier参数就可以非常简单的设置按比例缩...
  • nogodoss
  • nogodoss
  • 2014年02月11日 11:06
  • 17873

iOS里面xib和AutoLayout的妙用

一直以来,我都是一个代码流,喜欢用纯代码去构建app,并觉得这是一件很酷的事情。当iPhone 5出来了,我还觉得没什么问题,但是当iPhone 6和iPhone 6 plus都出来,屏幕的分辨率一下...
  • lizujian1990
  • lizujian1990
  • 2014年12月02日 21:30
  • 1760

关于IOS的Autolayout特性的理解以及使用

前段时间时间总是在纠结这个ios的Autolayout的布局问题。总感觉Apple这样做很麻烦,感觉Autolayout的代码写起来很别扭。半个眼都不想去看那些代码,又臭又长。其实不然,当现在Appl...
  • yongyinmg
  • yongyinmg
  • 2014年09月16日 13:08
  • 45485

Xcode6使用iOS8的sizeClasses解决屏幕适配问题

开头先介绍下我之前遇到的一个问题: 在Xcode总使用compact any 的UI如下图所示: 可视在iPhone5s真机上运行后发现界面是: 左边的lable缩进屏幕了,真是...
  • asdfg13697116596
  • asdfg13697116596
  • 2015年09月05日 11:11
  • 846
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS 8 AutoLayout 及SizeClass(二) 使用详解
举报原因:
原因补充:

(最多只允许输入30个字)