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,或者动态的添加约束,这些将在下一篇中写出

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-05 05:07:11

IOS界面适配二: Auto Layout的使用(上)的相关文章

iOS:界面适配(二)--iPhone/iPad适配(关于xib)

本文纯属个人看法,强迫症后遗症 版本:xcode 6.0 + iOS SDK 8.0 讨论范围:控制器的view(创建VC时自带的xib) ------------------------------------ 在xcode中发现没法区别一个xib是iPhone 还是iPad版的?虽然可以查看Utilities中size inspector的大小,但是没有一个明确的标识,表示它是iPhone还是iPad. 如何区别一个xib是iPhone or iPad? 在xib 查看方式source co

iOS Programming Introduction to Auto Layout 自动布局

iOS Programming Introduction to Auto Layout ? 自动布局 A single application that runs natively on both the iPad and the iPhone is called a universal application. 一个原生的能运行在iPad 和iPhone 的应用叫做universal application? Then select the Homepwner target in the pr

iOS:界面适配--iPhone不同机型适配 6/6plus

iOS:界面适配--iPhone不同机型适配 6/6plus        机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系,比如1:1或1:2等: ppi:代表屏幕物理大小到图片大小的比例值,如果ppi不变,则坐标和像素的比例不会变: iPhone 4以前 iPhone.iPhone3/3G机型未采用retina,坐标是320 x 480,屏幕像素320 x 480 ,他们一一对应,1:1关系.即一个坐标对应1个像素.

iOS 开发实践之 Auto Layout

原:http://xuexuefeng.com/autolayout/?utm_source=tuicool 本文是博主 iOS 开发实践系列中的一篇,主要讲述 iOS 中 Auto Layout(自动布局)在实际项目中的使用. Auto Layout 在 2012 年的 iOS 6 中发布,距今已经 2 年多了,如果从 2011 年在 Mac OS X 上发布的 Auto Layout 开始算起,已经超过 3 年了.如果你的简历上写着 2 年以上工作经验,而竟然不会使用 Auto Layout

iOS 开发实践之Auto Layout(From Vincent Sit)

本文是博主 iOS 开发实践系列中的一篇,主要讲述 iOS 中 Auto Layout(自动布局)在实际项目中的使用. Auto Layout 在 2012 年的 iOS 6 中发布,距今已经 2 年多了,如果从 2011 年在 Mac OS X 上发布的 Auto Layout 开始算起,已经超过 3 年了.如果你的简历上写着 2 年以上工作经验,而竟然不会使用 Auto Layout,真有点不可思议. 本文将会通过若干个 Demo 进行讲解,通过实践来理解 Auto Layout 到底是什么

iOS:界面适配(三)--iPhone不同机型适配 6/6plus 前

转:http://blog.csdn.net/houseq/article/details/40051207 对于不同苹果设备,各个参数查看<iOS:机型参数.sdk.xcode各版本>.        机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系,比如1:1或1:2等: ppi:代表屏幕物理大小到图片大小的比例值,如果ppi不变,则坐标和像素的比例不会变: iPhone 4以前 iPhone.iPhone3/3G

iOS:界面适配(三)--iPhone不同机型或设备不同尺寸适配(屏幕适配)和系统适配

对于不同苹果设备,各个参数查看<iOS:机型参数.sdk.xcode各版本>.        机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系,比如1:1或1:2等: ppi:代表屏幕物理大小到图片大小的比例值,如果ppi不变,则坐标和像素的比例不会变: iPhone 4以前 iPhone.iPhone3/3G机型未采用retina,坐标是320 x 480,屏幕像素320 x 480 ,他们一一对应,1:1关系.即一

iOS,自动布局autoresizing和auto layout,VFL语言

1.使用autoresizing 2.使用autolayout 3.VFL语言(Visual Format Language:可视化格式语言) 使用autoresizing 点击xib文件,去掉使用autolayout(autolayout和只能使用一个)    如图中所示 1.代表视图距离父容器顶部距离固定 2.代表视图距离父容器左边距离固定 3.代表视图距离父容器底部距离固定 4.代表视图距离父容器右边距离固定 5.中间水平线表示视图随着父容器变宽而变宽(按比例) 6.中间垂直线表示视图随着

ios8 iOS Auto Layout

引言: Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应. 要完全掌握Auto Layout是一件非常消耗精力的事情,需要大量的实践,并且在根本上面,理解其如何使用,如果要全面的介绍Auto Layout和使用场景估计几篇博文都介绍不完, 本文希望能将使用Auto Layout的重点和技巧以及注意事项,进行一个介绍.成为学习Auto Layout的一个导航文章. 参考资料