IOS界面适配二: Auto Layout的使用(上)


  上一篇讲了IOS中基础的距离单位,链接为 IOS界面适配一: Pt与Px的关系 ,使用距离单位可以定义我们程序中View的大小,但是,仅仅使用Pt定义大小是远远不够的。

  比如,我们想让一个button距离手机左边界为20pt,右边界为20pt,距上为30pt,高度自身为20pt,如果在iphone5中(为320pt*568pt),我们要在代码中这么定义

  以下代码写在ViewController中的viewDidLoad方法中:

  

    UIButton * button  =  [[UIButton alloc]initWithFrame:CGRectMake(20, 30, 280, 20)];
    
    [button setTitle:@"hello pt" forState:UIControlStateNormal];
    
    [button setBackgroundColor:[UIColor grayColor]];
    
    [self.view addSubview:button];

  因为iphone5为320pt,所以这个button的宽度必须是280pt好了,看一下效果: 

  


  恩,看起来还符合要求,转一下试试呢:

  

  等等,怎么跟设想的不一样呢?这是因为,我们在设置button的时候,就只考虑了Iphone5这个尺寸下的横屏,ios传统方法在判断view位置的时候,先看这个View在父View所载的位置,在看View本身的大小,所以,如果要是按我们刚开始的条件的话,button在父View的位置为(20,30) 大小为(280,20),但是当我们横屏的时候,父View变了,但button在父View的位置没变,大小也没变,才会出现这种情况

  还有一种情况,我们换一个不同的分辨率的手机会怎么样:

  

  可以看出,在Iphone6下就完全不对了,这是因为父View的大小变了,根据iphone5算出来的大小肯定会出错


  上述说的是传统的限制View位置和大小的方法,需要注意的是:

 

  当我们打开一个布局文件,并在里面拖动进控件的时候,或者在代码中使用initWithFrame方法的时候,都是使用的默认的传统限制方法,也就是上面的方法

  虽然说这种方法简单,易懂,但是用起来局限性非常之大,几乎只能算是在iphone分辨率不变的时候用一下(那时候很多工程都不用布局文件,只用纯代码写),但在现在iphone分辨率多达4种,而且有的时候还要求支持横屏,使用上述方法可以说是寸步难行,下面我们使用Auto Layout解决上述问题


  一.在布局文件中使用Auto Layout

  

  先来看看apple官方对于Auto Layout的解释:

   AutoLayout是一种基于约束的,描述性的布局系统。

   关键词:

  • 基于约束 - 和以往定义frame的位置和尺寸不同,AutoLayout的位置确定是以所谓相对位置的约束来定义的,比如x坐标为superView的中心,y坐标为屏幕底部上方10像素
  • 描述性 - 约束的定义和各个view的关系使用接近自然语言或者可视化语言的方法来进行描述
  • 布局系统 - 即字面意思,用来负责界面的各个元素的位置。

    总而言之,AutoLayout为开发者提供了一种不同于传统对于UI元素位置指定的布局方法。以前,不论是在IB里拖放,还是在代码中写,每个UIView都会有自己的frame属性,来定义其在当前视图中的位置和尺寸。使用AutoLayout的话,就变为了使用约束条件来定义view的位置和尺寸。这样的最大好处是一举解决了不同分辨率和屏幕尺寸下view的适配问题,另外也简化了旋转时view的位置的定义,原来在底部之上10像素居中的view,不论在旋转屏幕或是更换设备的时候,始终还在底部之上10像素居中的位置,不会发生变化。总之,使用约束条件来描述布局,view的frame会依据这些约束来进行计算.

   以上部分内容摘自 : AutoLayout(自动布局)入门   

   下面说一下我个人对Auto Layout的见解:

   1.当你对一个ViewA使用Auto Layout的时候,系统将会只使用Auto Layout中的条件来限制ViewA,而你原先对这个ViewA做的传统的设置frame或者大小都会立即无效

   2.Auto Layout更接近于我们的自然语言,即它是一个更接近我们实际需求的工具

   3.Auto Layout是基于约束的,一般来说,一个View至少需要4个约束才能确定其位置和大小

 下面我们用Auto Layout解决上述问题:

 约束使用方法;

   1.拖进去一个button,在button上按住ctrl键+左键,拖动到主View上,如图

 或者是在左边的Document Outline中


  2.松手,会出现弹出框:

  

  其中Leading Space to Container Margin为距离其左边界

         Trailing Space to Container Margin为距离其右边界

         Top Space to Top Layout Guide为距离其上边界

         Buttom Space to Buttom Layout Guide为距离其下边界

  设置其大小可以这样:

  

   在其Width中填入约束宽度,在Height中填入约束高度

   3.添加好约束后,改变其各个约束的值:

   

好了,我们设置此button的约束分别为距离屏幕左边界为20pt,右边界为20pt,距上为30pt,高度自身为20pt(从这里可以看出约束确实与实际问题非常相符),来看看效果:

 iphone6横竖屏:

 

 ipad air横竖屏:

  非常好,跟预想一致,而且也非常的简单

  那么,约束的原理是什么呢?

  其实,约束差不多是下面一个公式组成的:

  

  A = B * m + c


  或者


  viewA.attribute = viewB.attributs*multiplier + constant

  

  我们看图中的距左的约束:

  

  

  右边的四个框分别对应A = B * m + c运算式的 A , B , c , m 

  换算成语言即为,button的左边是屏幕左边界乘以一在加上20pt,跟我们的问题也是一样的

  所以,加入我们想让button的顶部部是主View底部的四分之三的话,可以设置button的顶部与主View底部的约束中的的Multiplier为0.75,Constant为0

  注意,这时候必须要先将button距离顶部的那个距离给删除掉,否则会出现约束过多导致混乱的情况

  方法:

  添加一个Buttom Space to Buttom Layout Guide的限制,将Multiplier为0.75,Constant为0,记得一定要将First Item 改为Button.Top,因为默认是Button.Bottom,如图所示:

  

  运行即可查看效果,没有任何问题

  通过布局文件使用Auto Layout就先说到这,其实这里面还有很多学问,以后有时间在写出来。

  只使用布局文件来使用Auto Layout还是有一些不足,因为都是写死的,有的时候还是不能满足需求,我们还可以在代码中动态的改变布局文件中约束的Constant,或者动态的添加约束,这些将在下一篇中写出



  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值