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

最新推荐文章于 2024-11-13 15:28:39 发布

舞动的钢琴

最新推荐文章于 2024-11-13 15:28:39 发布

阅读量3.1k

点赞数

分类专栏： iOS屏幕适配文章标签： Auto Layout ios Constraints Constant Multiplier

本文链接：https://blog.csdn.net/wingsofPiano/article/details/47414855

版权

iOS屏幕适配专栏收录该内容

1 篇文章 0 订阅

订阅专栏

上一篇讲了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上，如图