zoukankan      html  css  js  c++  java
  • iOS开发~UI布局(二)storyboard中autolayout和size class的使用详解

    一、概要:前一篇初步的描述了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是我们需要的。然后运行项目看看是不是我们想要的效果吧!

  • 相关阅读:
    USACO 3.3 A Game
    USACO 3.3 Camelot
    USACO 3.3 Shopping Offers
    USACO 3.3 TEXT Eulerian Tour中的Cows on Parade一点理解
    USACO 3.3 Riding the Fences
    USACO 3.2 Magic Squares
    USACO 3.2 Stringsobits
    USACO 3.2 Factorials
    USACO 3.2 Contact
    USACO 3.1 Humble Numbers
  • 原文地址:https://www.cnblogs.com/jgCho/p/5065758.html
Copyright © 2011-2022 走看看