iOS开发——Autolayout的实践与技巧

已经好久没有更新博客了,由于最近工作真的非常繁忙,所以就疏于分享了。今天我们来深入交流一下Autolayout的开发与使用。我在  http://blog.csdn.net/CHENYUFENG1991/article/details/47165751http://blog.csdn.net/CHENYUFENG1991/article/details/47062527,两篇博客中对Autolayout进行了泛泛而谈,没有对深入的使用做进一步的讲解。今天我们就来弥补这方面的空缺。本文的demo上传至 https://github.com/chenyufeng1991/iOS-Autolayout

(1) 首先我们创建一个基于iOS项目,我们就在Storyboard上进行开发。需要选中右侧的Use Auto Layout,下面的Use Size Classes可选可不选,因为我们暂时还不用Size Classes。

(2)需要提醒的是,在项目中不能让有些界面勾选Autolayout,有些界面不勾选Autolayout,这样会让程序crash。还有就是,Autolayout中的原则有两个:一是Autolayout是一种相对布局(设置相对约束);二是这种相对布局是对父容器而言的。

(3)当选用了Autolayout之后,我们可以发现界面的大小变为iPad的大小了,让我们非常的不适应。我们可以在选定某个界面后,在右侧选择一个手机大小。如图:

(4)在Storyboard和xib中设计Autolayout,主要用到下面的两个选项,Align和Pin。

(5)我们先来看看Align中的选项:

Horizontally in Container是相对父容器水平居中。Vertically in Container是相对父容器垂直居中。选中后,点击Add Constraints即可。

(6)再来看看Pin中的选项:

首先我们一般不勾选Constrain to margins这个选项,这个选项表示到界面周边的空白。一般默认可能会有8个点的留白,但是这并不是我们需要的。

上方的四个选项表示分别到上左下右的距离。可以根据需求设置,注意一定要选中中间的小红线,否则是没有效果的。但是点开选项可以发现,设置约束距离的时候是可以选择参照物的,这个参照物可以是离当前View最近的View,也可以是父容器。

下面的Width和Height是固定View的长宽。如果你不想在所有屏幕上View的长宽都限制死的话,就不需要选中,系统会根据你其他的约束自动缩放View。如果你一定要定死长宽的话,就可以设置。

下面的Aspect Ratio是设置当前View的长宽比例。

(7)以上的Align和Pin我们都只选中了一个View,当我们选中两个或多个View,来分析下Align:

当我们选中两个View的时候,Align中又多了几个选项。

Leading Edges,Trailing Edges,Top Edges,Bottom Edges,分别表示两个View左边缘、右边缘、上边缘、下边缘对齐。

Horizontal Centers,Vertical Centers分别表示两个View水平对齐、垂直对齐。Baselines表示基线对齐。

(8)当选中两个或多个View的时候,Pin的选项如下:

发现其中多了Equal Widths和Equal Height,这两个意思很明确,就是选中的多个View等宽或者等高。下面出现的Align意思同(7)中的对齐。

(9)下面我们来看看一个View设置了约束之后的效果和如何设置参数,我以下面的红色View来做讲解,选中了View后,右侧的视图可以看到当前View的所有约束:

所有约束:

当双击点开某一条约束后,就可以看到约束的详细信息。我解释一下约束的定义:

y = a * x + b;

其中y表示第一个View的某个约束,x表示第二个View的某个约束,a表示比例系数,b是一个常量。我们以上面的Top Space to Superview Equals:284为例来讲解。

First Item就是我所说的y,Relation相当于等号,Second Item就是x,Constant就是b常量,Multiplier就是a比例系数。上面这个约束的意思就是:红色View的顶部位置是父View顶部位置加上284点,比例系数为1. 其中的Priority表示优先级,我们暂不考虑。其他的所有约束我们都可以通过这种方式来设置参数和分析。

(10)我们再来分析上面的三个灰、蓝、黑View平分界面宽度的操作。这里就要涉及比例系数了。按住control键,触摸板按住拖动蓝线到父容器;或者按住鼠标右键直接拖拽蓝线到父容器,选中Equal Widths。然后右侧就会出现如下所示:

表示在宽度上对父容器的一个比例系数。双击点开后,可以设置如下:

在Multiplier中,可以填入1:3这样的比例,也可以填入小数。在这里,我把View的宽度设为父容器宽度的1/3.然后把三个View设置成同样的就好。同样的,我把下面的红色View的高度设置为父容器高度的1/2.

(11)现在我要把上面三个View的高度设置为宽度的一半,这个比例该如何设置呢?选中View,然后Aspect Ratio.右侧就会出现如下:

双击进入后:

在这里,自变量、因变量都是对于同一个View来说的。比例系数为width为1,height为0.5.

(12)解决冲突。在使用Autolayout中,约束冲突时经常会碰到的问题,我们必须要去解决。有些冲突可能不会有任何影响,有些冲突可能会在版本升级中导致crash。警告类的冲突会以黄色显示,错误类的冲突会以红色显示。下面我们来谈谈如何解决。

最简单最傻瓜的解决冲突就是根据系统的提示修改即可。

从左边可以看到,Expected表示根据你当前的约束得出你希望显示的值,而Actual表示当前你在Storyboard中显示的值。根据修改提示,如果你选择“Update frames”,表示你将会让约束不变,而改变当前在Storyboard中显示的效果。也就是最后的效果将会是Expected中的显示效果。如果你选择”Update constraints“,正好与Update frames相反,你将会改变约束的值,以当前在Storyboard中显示的效果为准。而后面的两个选项基本不用。

而对于红色的冲突,那就是比较严重的。有些是提示你要删除某些约束,有些是提示你缺少某些约束。

如图所示,就是你缺少了某个约束导致的。

但是,当你对Autolayout比较熟悉了以后,不会采取上述的系统提示方法去解决冲突,而是会在右侧根据某个View的所有约束去分析,然后手动的增删改约束,这样能快速的提高自己的布局能力。

(13)界面预览。当我们布局好一个界面后,怎么样才能看到显示效果呢?不同屏幕去运行?现在iPhone有四种屏幕,难道要分别去运行4次?现在有更为方便的预览方式。切换到Assistant editor视图,然后选择Preview即可。通过左下角的+按钮,可以分别添加4种不同的屏幕,然后就能同时看到显示效果。

如图所示:

对于Autolayout而言,不仅要理解基本的布局概念,更重要的是去实践,然后对于布局就能随心所欲了。

时间: 2024-08-10 14:15:42

iOS开发——Autolayout的实践与技巧的相关文章

iOS开发的最佳实践

https://github.com/KevinHM/ios-good-practices-the-lastest-version#%E5%BC%80%E5%A7%8B%E5%90%A7! 分支模型 App发布的时候把 Release 代码从原有的分支上隔离出来,并且加上适当的tag,是很好的做法,对于向公众分发(比如通过Appstore)的 app 这一点尤其重要.同时,涉及大量 commit 的 feature 应该在独立的分支上完成. git-flow 是一个帮助你遵守这些规则的工具.它只

不可不知的:iOS开发的22个诡异技巧

结合自身的实践开发经验总结出了22个iOS开发的小技巧,以非常欢乐的语调轻松解决开发过程中所遇到的各种苦逼难题,光读着便已忍俊不禁. 1. TableView不显示没内容的Cell怎么办? 类似于图1,我不想让下面的那些空显示.很简单,添加“self.tableView.tableFooterView = [[UIView alloc] init];”试过都说好,加完这句之后就变成了图2的样子. 2. 自定义了leftBarbuttonItem左滑返回手势失效了怎么办? self.navigat

iOS开发中的那些小技巧

一,前言 看到这个图,你会想起谁?是不是想起了,曾经的用户名输入框,密码输入框... 那么,问题来了:作为iOS开发的你,这个输入框你是怎么实现的,成为关键. 二,方案 方案1:弄一个UIView,在这个视图上分别放三个控件:UIImageView,UILabel与UITextField.(这个方案很直接,如果你只是简单的直接将三个控件放到视图上,那么你的月薪暴露了,最多3K.如果你是对这个视图重写了,将那三个控件封装起来了,放在.h文件,那你的月薪应该是3.5K,如果是将那三个控件放到.m文件

iOS开发——Autolayout下动态调整单元格高度

情景描述: 有时候我们希望更新某一个单元格的数据,通常的做法是使用reloadData方法更新整个单元格.但是对一些情况是不适用的或者说实现起来比较麻烦.比如说这种简单的"点开"一个单元格 在没点开时,英雄的简介被替换为"点击查看详情",下载按钮被设为隐藏. 这样的话如果在点开时reload整个表格的数据,表格因为重载数据还是会恢复成没有点开的状态.   解决步骤: 使用Autolayout的优点是可以让内容决定单元格的高度.那么有什么办法能在内容改变后动态地调整单

iOS开发之滤镜的使用技巧(CoreImage)

一.滤镜的内容和效果是比较多并且复杂的 ,学习滤镜需要技巧 如下: 两个输出语句解决滤镜的属性选择问题: 1.查询效果分类中包含什么效果按住command 点击CIFilter 进入接口文件 找到第128行-148行全部都是 效果分类 2.选择其中某一个分类拷贝NSLog -> [CIFilter filterNamesInCategory:刚才拷贝的分类]; -> 打印出来的 是这个分类包含的所有效果 -> 拷贝选择其中的某一个效果 3.查询使用的效果中可以设置什么属性(KVC) at

ios开发autolayout之代码实现Autolayout使用总结

1.理论部分 demo示例1: UIView *blueView = [[UIView alloc] init]; blueView.backgroundColor = [UIColor blueColor]; // 不要将AutoresizingMask转为Autolayout的约束 blueView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:blueView]; // 添加宽度约束:100 NS

iOS 开发中正则表达式实践(一)

需求抽象: 现在有一段字符串 {"state":200,"error":"登录成功!","json":{"auid":"402888f54c12441e014c1246bdf90003"}} 现在需要提取auid后面的内容串,也就是402888f54c12441e014c1246bdf90003 分析: 在学习正则表达式之前,我使用的方式是: 用 Json 转字典,然后获取到 key.

Snail—iOS开发中得一些小技巧

开发中 常常会使父视图的透明度改变,而子视图不受父视图的影响,则下面这段代码可以完美解决.... fatherView.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:0.6]; 版权声明:本文为博主原创文章,未经博主允许不得转载.

iOS开发 字符串的转化 小技巧

/字典或者数组转化为nsstring NSArray *arr = [NSArray arrayWithObject:@"1"]; NSString *str = [arr JSONString];               //数组或者字典转化为json串 NSArray *arr1 = [str objectFromJSONString];     //json串转化为字典或者数组 NSData *data = [arr1 JSONData];                 /