转载自:blog.csdn.net/hello_hwc
IOS SDK详解


前言:

在开发的过程中,有时候创建View没办法通过Storyboard来进行,又需要AutoLayout,这时候用代码创建就派上用场了,这篇文章我会详解用代码实现的两个主要函数,然后讲解一个Demo,最后Demo我会附上下载链接。


用代码实现的函数一

第一个函数通过描述两个view的参考线之间的约束来创建约束,例如有一个label和一个textfield。约束这样描述

label的右边参考线和textfield的右边参考线距离恒定为10

函数

 + (instancetype)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation
toItem:(id)view2
attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier
constant:(CGFloat)c
参数的意义:
参数 意义
view1 左手边的受约束视图
attr1 左手边的受约束视图的参考参数
relation 约束的关系
view2 右手边的受约束视图
multiplier The constant multiplied with the attribute on the right-hand side of the constraint as part of getting the modified attribute.
attr2 The constant added to the multiplied attribute value on the right-hand side of the constraint to yield the final modified attribute.

通常,multiplier的值为1.0。这个不太好翻译,我举个例子就懂了 。

举个例子
如果,我想要一个View的宽度为另一个View的一半,则

 [NSLayoutConstraint
constraintWithItem:self.view1
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:self.view2
attribute:NSLayoutAttributeWidth
multiplier:0.5
constant:0.0]];

这里有个计算公式

attribute1 == multiplier × attribute2 + constant
也就是说,在这里
view1.width = view2.width * 0.5 + 0.0

这样,更能够理解上述函数中两个参数的含义了吧。
再举个例子:
我想让一个View距离右上角(30,30)并且保持自己的长宽不变。实现代码

   NSLayoutConstraint * h_c = [NSLayoutConstraint constraintWithItem:self.view
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.testview
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:];
NSLayoutConstraint * v_c = [NSLayoutConstraint constraintWithItem:self.testview
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:];
NSLayoutConstraint * e_w = [NSLayoutConstraint constraintWithItem:self.testview
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeWidth
multiplier:1.0 constant:CGRectGetWidth(self.testview.frame)];
NSLayoutConstraint * e_h = [NSLayoutConstraint constraintWithItem:self.testview
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeHeight
multiplier:1.0 constant:CGRectGetHeight(self.testview.frame)];
[self.view addConstraints:@[h_c,v_c,e_h,e_w]];

效果如图:

用代码实现的方法二

方法二  使用可视化语言VFL

可视化语言的Apple文档链接如下 :
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage/VisualFormatLanguage.html

利用到的函数为:

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format
options:(NSLayoutFormatOptions)opts
metrics:(NSDictionary *)metrics
views:(NSDictionary *)views

参数的的意义

参数 意义
format NSString类型的可视语言描述
opts 描述可视化语言中对象的layout方向
metrics 描述可视化语言中String代表的常量值,字典类型,key为String,value为NSNumber类型
views 描述可视化语言中String代表的对象,字典类型,key为String,value为layout约束的对象

举个例子就懂了,例如,惰性初始化下面一个View,不难看出,这个View我没有指定大小,大小我要用约束来创建

 -(UIView *)testview{
if (!_testview) {
_testview = [[UIView alloc] init];
_testview.backgroundColor = [UIColor blueColor];
}
return _testview;
} - (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.testview];
}

然后,我用约束的方式,让View的大小恒定为100*100

    NSArray *c_v = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[testview(==100)]"
options:
metrics:nil
views:@{@"testview":self.testview}]; NSArray *c_h = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[testview(==100)]"
options:
metrics:nil
views:@{@"testview":self.testview}]; [self.view addConstraints:c_h];
[self.view addConstraints:c_v];
 

然后,我再把View约束到距离右上角(30*30)的位置

     NSArray *l_v = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-hdistance-[testview]"
options:
metrics:@{@"hdistance":@()}
views:@{@"testview":self.testview}]; NSArray *l_h = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[testview]-vdistance-|"
options:
metrics:@{@"vdistance":@()}
views:@{@"testview":self.testview}];

这样,约束后的效果如图 :


关于可视化语言的建议:

个人而言,比较喜欢用可视化语言的方式来出创建约束。而且也不用刻意去学,一开始使用的时候打开一个链接放在旁边,不会的时候参考下。多用几次,自然就会了。

三 一个Demo

我用上述两种方式实现类似的同一组约束,效果如下 :


这里,ImageView的中心始终在view的中心,两个button分别距离ImageView距离为标准距离8,并且分别左右对齐。

用方式一实现的代码:

 [self.view addSubview:self.imageview];
[self.imageview setTranslatesAutoresizingMaskIntoConstraints:NO];
NSLayoutConstraint * hc = [NSLayoutConstraint
constraintWithItem:self.view
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.imageview
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0.0];
NSLayoutConstraint * vc = [NSLayoutConstraint constraintWithItem:self.view
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.imageview
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0.0];
NSLayoutConstraint * equalW = [NSLayoutConstraint constraintWithItem:self.imageview
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:
multiplier:1.0
constant:CGRectGetWidth(self.imageview.frame)];
NSLayoutConstraint * equalH = [NSLayoutConstraint constraintWithItem:self.imageview
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:
multiplier:1.0
constant:CGRectGetHeight(self.imageview.frame)];
[self.view addConstraints:@[hc,vc,equalH,equalW]];
[self.view addSubview:self.button_1];
[self.button_1 setTranslatesAutoresizingMaskIntoConstraints:NO];
NSLayoutConstraint * b1_image_v = [NSLayoutConstraint constraintWithItem:self.imageview
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.button_1
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:8.0];
NSLayoutConstraint * b1_image_h = [NSLayoutConstraint constraintWithItem:self.button_1
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.imageview
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:0.0]; [self.view addConstraints:@[b1_image_h,b1_image_v]]; [self.view addSubview:self.button_2];
[self.button_2 setTranslatesAutoresizingMaskIntoConstraints:NO];
NSLayoutConstraint * b2_image_v = [NSLayoutConstraint constraintWithItem:self.button_2
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.imageview
attribute: NSLayoutAttributeBottom
multiplier:1.0
constant:8.0];
NSLayoutConstraint * b2_image_h = [NSLayoutConstraint constraintWithItem:self.button_2
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.imageview
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:0.0]; [self.view addConstraints:@[b2_image_h,b2_image_v]];
可视化语言VFL的代码
 [self.imageview setTranslatesAutoresizingMaskIntoConstraints:NO];
NSArray * v = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[superview]-(<=1)-[imageview]"
options:NSLayoutFormatAlignAllCenterX
metrics:nil
views:@{@"superview":self.view,@"imageview":self.imageview}];
NSArray * h = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[superview]-(<=1)-[imageview]"
options:NSLayoutFormatAlignAllCenterY
metrics:nil
views:@{@"superview":self.view,@"imageview":self.imageview}];
NSArray * ew = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[imageview(==imageviewWidth)]"
options:
metrics:@{@"imageviewWidth":@(CGRectGetHeight(self.imageview.frame))}
views:@{@"imageview":self.imageview}];
NSArray * eh = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageview(==imageviewHeight)]"
options:
metrics:@{@"imageviewHeight":@(CGRectGetWidth(self.imageview.frame))}
views:@{@"imageview":self.imageview}];
[self.view addConstraints:v];
[self.view addConstraints:h];
[self.view addConstraints:ew];
[self.view addConstraints:eh]; [self.view addSubview:self.button_1];
[self.button_1 setTranslatesAutoresizingMaskIntoConstraints:NO];
NSArray * b1_image = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[button1]-[imageview]"
options:NSLayoutFormatAlignAllLeft
metrics:nil
views:@{@"button1":self.button_1,
@"imageview":self.imageview}];
[self.view addConstraints:b1_image]; [self.view addSubview:self.button_2];
[self.button_2 setTranslatesAutoresizingMaskIntoConstraints:NO];
NSArray * b2_image = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[button2]-[imageview]"
options:NSLayoutFormatAlignAllRight
metrics:nil
views:@{@"button2":self.button_2,
@"imageview":self.imageview}];
[self.view addConstraints:b2_image];

最后,附上Demo的下载链接 :
CSDN下载

前两两篇关于如何在Storyboard上创建AutoLayout的详解
http://blog.csdn.net/hello_hwc/article/details/43982003
http://blog.csdn.net/hello_hwc/article/details/43967561

IOS AutoLayout详解(三)用代码实现(附Demo下载

【转】IOS AutoLayout详解(三)用代码实现(附Demo下载)的更多相关文章

  1. IOS SDK详解

    来源:http://blog.csdn.net/column/details/huangwenchen-ios-sdk.html?page=1#42803301 博客专栏>移动开发专栏>I ...

  2. iOS路由详解

    本文如题,路由详解,注定是一篇详细解释iOS路由原理及使用的文章,由于此时正在外地出差,无法详细一一写出,只能不定时的补充. 一.什么是iOS路由 路由一词来源于路由器,可以实现层级之间消息转发的功能 ...

  3. Android 之窗口小部件详解(三)  部分转载

    原文地址:http://blog.csdn.net/iefreer/article/details/4626274. (一) 应用程序窗口小部件App Widgets 应用程序窗口小部件(Widget ...

  4. SQL Server 表的管理_关于事务的处理的详解(案例代码)

    SQL Server 表的管理_关于事务的处理的详解(案例代码) 一.SQL 事务 1.1SQL 事务 ●事务是在数据库上按照一定的逻辑顺序执行的任务序列,既可以由用户手动执行,也可以由某种数据库程序 ...

  5. WebSocket安卓客户端实现详解(三)–服务端主动通知

    WebSocket安卓客户端实现详解(三)–服务端主动通知 本篇依旧是接着上一篇继续扩展,还没看过之前博客的小伙伴,这里附上前几篇地址 WebSocket安卓客户端实现详解(一)–连接建立与重连 We ...

  6. python设计模式之装饰器详解(三)

    python的装饰器使用是python语言一个非常重要的部分,装饰器是程序设计模式中装饰模式的具体化,python提供了特殊的语法糖可以非常方便的实现装饰模式. 系列文章 python设计模式之单例模 ...

  7. http500:服务器内部错误案例详解(服务器代码语法错误或者逻辑错误)

    http500:服务器内部错误案例详解(服务器代码语法错误或者逻辑错误) 一.总结 服务器内部错误可能是服务器中代码运行的时候的语法错误或者逻辑错误 二.http500:服务器内部错误案例详解 只是一 ...

  8. .NET DLL 保护措施详解(三)最终效果

    针对.NET DLL 保护措施详解所述思路完成最终的实现,以下为程序包下载地址 下载 注意: 运行环境为.net4.0,需要安装VS2015 C++可发行组件包vc_redist.x86.exe.然后 ...

  9. SQL Server 表的管理_关于数据增删查改的操作的详解(案例代码)

    SQL Server 表的管理_关于数据增删查改的操作的详解(案例代码)-DML 1.SQL INSERT INTO 语句(在表中插入) INSERT INTO 语句用于向表中插入新记录. SQL I ...

随机推荐

  1. android 上传图片到服务器Tomcat(Struts2)

    在做android开发的时候,有时你会用到图片的上传功能,在我的android项目中,我是选中图片,点击上传多张图片 android客户端上传图片部分的代码如下: package com.exampl ...

  2. Java开发手册

    <Java开发手册> 基本信息 作者: 桂颖    谷涛    出版社:电子工业出版社 ISBN:9787121209161 上架时间:2013-8-12 出版日期:2013 年7月 开本 ...

  3. HTML,CSS编码规范

    不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. HTML 语法 对于属性的定义,确保全部使用双引号,绝不要使用单引号. 为每个 HTML 页面的第一行添加标准模式(stand ...

  4. Welcome Back to C++ (Modern C++)

    http://msdn.microsoft.com/en-us/library/hh279654.aspx 看看你是古代还是现代Cpper重点强调 Stack-based scope instead ...

  5. Java基础之String,StringBuilder,StringBuffer

    在创建字符串的时候总是习惯性的使用String str = "...";,str = str+"abcd";也有听说过StringBuffer,StringBu ...

  6. HDOJ/HDU 1039 Easier Done Than Said?(字符串处理~)

    Problem Description Password security is a tricky thing. Users prefer simple passwords that are easy ...

  7. 排序Tip

    排序算法   所有排序算法汇总:http://en.wikipedia.org/wiki/Sort_algorithm counting sort 资料 :http://www.cs.miami.ed ...

  8. SPOJ 375 (树链剖分+线段树)

    题意:一棵包含N 个结点的树,每条边都有一个权值,要求模拟两种操作:(1)改变某条边的权值,(2)询问U,V 之间的路径中权值最大的边. 思路:最近比赛总是看到有树链剖分的题目,就看了论文,做了这题, ...

  9. Sublime Text 2/3如何支持中文GBK编码

    Sublime Text默认是只支持UTF8的编码,所以有些时候,当我们打开GBK文件时候,文件内会出先部分的乱码, 在菜单栏选择"Preferences"-->" ...

  10. ERROR 2003 (HY000): Can't connect to MySQL server on 'ip'(111)

    问题描述:  从一台linux远程连接另一台linux上的MySQL, 出现ERROR 2003 (HY000): Can't connect to MySQL server on 'ip'(111) ...