手写代码自动实现自动布局,即Auto Layout的使用,有需要的朋友可以参考下。

这里要注意几点:

    1. 对子视图的约束,若是基于父视图,要通过父视图去添加约束。

    1. 对子视图进行自动布局调整,首先对UIView的一个属性设置,这是因为如果我们用Interface Builder,勾选Ues Autolayout,这时autoresizingMask就会被Auto Layout 取代,在手写代码时,我们就需要手动控制,代码如下

      [_shadow setTranslatesAutoresizingMaskIntoConstraints:NO]

    1. 在添加约束前,要先将子视图添加到父视图上。

      以下为例,oneImgView 上添加子视图shadow,对shadow进行约束

@property (nonatomic, strong) UIImageView *shadow;
@property (nonatomic, strong) UIImageView *oneImgView;
[_shadow setTranslatesAutoresizingMaskIntoConstraints:NO]; // 使用自动布局
[self.oneImgView addSubview:_shadow]; // 添加约束前要先将子视图添加到父视图上
NSLayoutConstraint *constraint = [NSLayoutConstraint
constraintWithItem:_shadow
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:self.oneImgView
attribute:NSLayoutAttributeWidth
multiplier:
constant:];
[self.oneImgView addConstraint:constraint]; constraint = [
NSLayoutConstraint
constraintWithItem:_shadow
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.oneImgView
attribute:NSLayoutAttributeBottom
multiplier:1.0f
constant:0.0f
];
[self.oneImgView addConstraint:constraint];
constraint = [
NSLayoutConstraint
constraintWithItem:_shadow
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeHeight
multiplier:1.0f
constant:58.0f
];
[self.oneImgView addConstraint:constraint];
constraint = [
NSLayoutConstraint
constraintWithItem:_shadow
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.oneImgView
attribute:NSLayoutAttributeLeft
multiplier:1.0f
constant:0.0f
];
[self.oneImgView addConstraint:constraint];

关于函数

    +(instancetype)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation
toItem:(id)view2 attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier     constant:(CGFloat)c;

苹果的官方文档是这么描述的。

/* Create constraints explicitly.  Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant"
If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute.
*/

所以你只需要记住view1.attr1 = view2.attr2 * multiplier + constant就可以了

  可视化格式语言约束(VFL)

除此之外iOS 8推出了一种新的约束方式——可视化格式语言约束,这种约束方式和中国古代的象形文字很相似。它可以一次添加多个约束,而且很直观,但不是所有的约束都可以满足的,维护也有一定的难度

代码为例,如果我要实现shadow 距离父视图左边界为20,宽为40,距离顶部20,高度最小30,不能超过100

     
     NSArray *constraints = nil;
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[_shadow(==40)]|" options:NSLayoutFormatAlignAllLeft metrics:nil views:NSDictionaryOfVariableBindings(_shadow)];
[self.oneImgView addConstraints:constraints];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[_shadow(>=58)@100]" options:NSLayoutFormatAlignAllLeft metrics:nil views:NSDictionaryOfVariableBindings(_shadow)];
[self.oneImgView addConstraints:constraints];

    1. format:这里是你的VFL语句,比如:@”H:|[_shadow]|”(注意“-”默认父子视图之间表示20px,同级视图之间表示8px,但是如果是“-10-”则表示前后相距10,短线距离忽略)
    1. options:默认写0,跟据需求去选择你想要的枚举
    1. metrics:
      字典,
      你的VFL语句中使用了动态参数时,将参数名和对应的值为键值对写在字典中,比如:@”H:|-[_shadow(==width)]-|”,表示这个
      _shadow的宽度为width,这是字典里面找到key对就的值,如果没有找到这个值,app就会crash.
    1. views:字典,你的VLF语句中使用到得所有view,用这个宏去添加NSDictionaryOfVariableBindings(view1,view2,view3…)

      上面代码中VFL语句为:@”H:|[_shadow]|”,其中“|”表示父视图的边界

以下为VLF语句

|: 表示父视图

-:表示距离

V: :表示垂直

H: :表示水平

>= :表示视图间距、宽度和高度必须大于或等于某个值

<= :表示视图间距、宽度和高度必须小宇或等于某个值

== :表示视图间距、宽度或者高度必须等于某个值

@ :>=、<=、== 限制 最大为 1000

以下为例

|-[view]-|: 视图处在父视图的左右边缘内

|-[view] : 视图处在父视图的左边缘

|[view] : 视图和父视图左边对齐

-[view]- : 设置视图的宽度高度

|-30.0-[view]-30.0-|: 表示离父视图 左右间距 30

[view(200.0)] : 表示视图宽度为 200.0

|-[view(view1)]-[view1]-| :表示视图宽度一样,并且在父视图左右边缘内

V:|-[view(50.0)] : 视图高度为 50

V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示到父视图左边的距离为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为 padding。

[wideView(>=60@700)] :视图的宽度为至少为60 不能超过 700

如果没有声明方向默认为 水平 V:

手写代码自动实现自动布局,即Auto Layout的使用的更多相关文章

  1. ClownFish:比手写代码还快的通用数据访问层

    http://www.cnblogs.com/fish-li/archive/2012/07/17/ClownFish.html 阅读目录 开始 ClownFish是什么? 比手写代码还快的执行速度 ...

  2. 手写代码UI,xib和StoryBoard间的的优劣比较

    在UI制作方面,逐渐分化三种主要流派:使用代码手写UI:使用单个xib文件组织viewController或者view:使用StoryBoard来通过单个或很少的几个文件构建UI.三种方式各有优劣,也 ...

  3. UI到底应该用xib/storyboard完成,还是用手写代码来完成?

    UI到底应该用xib/storyboard完成,还是用手写代码来完成? 文章来源:http://blog.csdn.net/libaineu2004/article/details/45488665 ...

  4. 2019前端面试系列——JS高频手写代码题

    实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...

  5. 前端面试手写代码——call、apply、bind

    1 call.apply.bind 用法及对比 1.1 Function.prototype 三者都是Function原型上的方法,所有函数都能调用它们 Function.prototype.call ...

  6. 如果选择构建ui界面方式,手写代码,xib和StoryBoard间的博弈

    代码手写UI这种方法经常被学院派的极客或者依赖多人合作的大型项目大规模使用. 大型多人合作项目使用代码构建UI,主要是看中纯代码在版本管理时的优势,检查追踪改动以及进行代码合并相对容易一些. 另外,代 ...

  7. .netER的未来路,关于基础是否重要和应该自己手写代码吗?

    http://www.cnblogs.com/onepiece_wang/p/5558341.html#!comments 引用"基础知识的学习,一开始可能是背书,但是在后续若干年的工作过程 ...

  8. Appium初始化设置:手写代码连接手机、appium-desktop连接手机

    一.包名获取的三种方式 1)找开发要2)mac使用命令:adb logcat | grep START win使用命令:adb logcat | findstr START 或者可以尝试使用第3条命令 ...

  9. gcd手写代码及STL中的使用方法

    一.手写代码 inline int gcd(int x,int y){ if(y==0) return x; else return(gcd(y,x%y)); } 二.STL中的使用方法 注:在STL ...

随机推荐

  1. js兼容注意事项--仅供参考

    做BS开发就难免会用到javascript,而每个浏览器对javascript的支持有不同.这就需要我们程序员去兼容他们,不然有些浏览器就无法运行我们的代码.就会造来客户的投诉,如果让BoSS知道了, ...

  2. 原生态js,鼠标按下后,经过了那些单元格

    本来是要判断那些单元格被选中,结果发现行不通,只能判断鼠标按下后,经过了那些单元格 之所以发出来,是觉得案例还有很多有意思的地方 onmouseover  的持续触发,导致了很多重复元素 由于将事件绑 ...

  3. 优雅地使用Windows

    优雅地使用Windows 理财推荐:收益还行,安全性比余额宝高,只能自己的卡转进转出所以被盗也不怕,重要的是快速取现实时到账呢 1 现金宝 :点击进入现金宝 或者百度现金宝 2 百度理财 8.baid ...

  4. Gunicorn 文档翻译

    服务器模式 Gunicorn 基于 pre-fork 模式,这意味着有一个主进程管理工作的子进程.主进程对客户端的工作业务有了解.所有的请求和响应都是工作子进程处理. 主进程 主进程是一个简单的循环, ...

  5. BZOJ3282——Tree

    1.题目大意:动态树问题,点修改,链查询xor和 裸题一道.. #include <stack> #include <cstdio> #include <cstdlib& ...

  6. 迟来的Android的Camera开发总结

    这是好久前写的项目,但一直没有去总结.刚好在准备找工作这段时间来总结自己做过的东西,学到的东西. 写Android的自定义的相机应用时,首先要知道一些Camera开发必须知道的尺寸,不然在调试的时候, ...

  7. [codevs3729]飞扬的小鸟

    [codevs3729]飞扬的小鸟 试题描述 输入 输出 输出文件名为 bird.out. 共两行. 第一行,包含一个整数,如果可以成功完成游戏,则输出 1,否则输出 0. 第二行,包含一个整数,如果 ...

  8. Ubuntu下编译安装OpenCV 2.4.7并读取摄像头[转]

    主要参考: 1.http://www.ozbotz.org/opencv-installation/ 2.http://www.ozbotz.org/opencv-install-troublesho ...

  9. php之CI框架多语言的用法

    public function index() { // 加载语言包,可以加载多个 $this->lang->load('email'); echo $this->lang-> ...

  10. 线段树区间更新&&求和poj3486

    给出了一个序列,你需要处理如下两种询问. ≤ c ≤ ). "Q a b" 询问[a, b]区间中所有值的和. Input 第一行包含两个整数N, Q. ≤ N,Q ≤ . 第二行 ...