zoukankan      html  css  js  c++  java
  • iOS8开发~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,效果如图:


    这个样例非常简单,也非常easy实现,目的是补充以上两个样例没有提及到的一些细节。

    在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


    本部分细节非常多,并且都是要动手练习才会明确,多多动手!

  • 相关阅读:
    Web--js高级--12月19日随笔
    Web--js高级--12月18日随笔
    Web--js高级--12月17日随笔
    Web--js高级--关于所学闭包随笔
    Web--js高级--12月10日随笔
    Web--js高级--12月4日随笔
    Web--js高级--12月3日随笔
    微信小程序预览图片
    开发微信“小程序”必学教程
    navigator 页面链接
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/4506804.html
Copyright © 2011-2022 走看看