浅谈autolayout

Autolayout是基于约束的,描述性的布局系统。

关键词:

  • 基于约束 - 和以往定义frame的位置和尺寸不同,AutoLayout的位置确定是以所谓相对位置的约束来定义的,比如x坐标为superView的中心,y坐标为屏幕底部上方10像素等
  • 描述性 - 约束的定义和各个view的关系使用接近自然语言或者可视化语言(稍后会提到)的方法来进行描述
  • 布局系统 - 即字面意思,用来负责界面的各个元素的位置。

总而言之,AutoLayout为开发者提供了一种不同于传统对于UI元素位置指定的布局方法。以前,不论是在IB里拖放,还是在代码中写,每个UIView都会有自己的frame属性,来定义其在当前视图中的位置和尺寸。使用AutoLayout的话,就变为了使用约束条件来定义view的位置和尺寸。这样的最大好处是一举解决了不同分辨率和屏幕尺寸下view的适配问题,另外也简化了旋转时view的位置的定义,原来在底部之上10像素居中的view,不论在旋转屏幕或是更换设备(iPad或者iPhone5或者以后可能出现的mini
iPad)的时候,始终还在底部之上10像素居中的位置,不会发生变化。 总结:使用约束条件来描述布局,view的frame会依据这些约束来进行计算。

本文将从三个方面对autolayout的使用进行说明:

1. 基于xib或者storyboard的自动布局;2. 用VFL代码的自动布局;3. 用第三方类库的代码实现的自动布局。

Demo:

1. 在控制器View底部添加两个View,1个蓝色,1个红色;

2. 两个View宽度,高度永远相等;

3. 举例父控件左边,右边,下边间距和两个View之间的间距相等,且均为20px。

运行效果图:

竖屏:

横屏:

基于xib或者storyboard的自动布局

1. 蓝色View添加的约束如下(距离父控件的左边,下边均为20px,自己的高度为50px):

2. 蓝色View添加的约束如下(距离父控件的右边,下边均为20,距离蓝色View的右边距离也为20)

3. 添加两者之间的相对约束

按住Control键,并且从红色View拖拽鼠标到蓝色View,会弹出如上界面,然后分别选择"Equal Widths" 和 "Equal Heights", 这样就能保证他们宽高永远一致了。

如果你像在代码中改变约束的值,也可以通过拖线的形式来实现。 比如:我想在程序中动态的修改两个View的高度,使他们的高度变成100。

然后添加以下代码即可:

self.viewHeight.constant = 100;

上面的代码执行完毕,蓝色和红色的View高度均变为100了,因为他们是相互约束的。

用VFL(Visual format language)代码的自动布局。Apple的工程师很有爱,发明了这种哭笑不得的象形文字。感觉它就是种解析方式。

UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];

    // 占位所用
    NSDictionary *metrics = @{@"margin":@20};
    //NSDictionary *views = @{@"blueView":blueView,@"redView":redView};
    // 下面的写法等价于上面的写法
    NSDictionary *views = NSDictionaryOfVariableBindings(redView,blueView);
    NSArray *constraint1 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[blueView(==redView)]-margin-[redView]-margin-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:metrics views:views];

    [self.view addConstraints:constraint1];

    // 小括号里面的参数(水平方向定宽度,垂直方向定高度)
    NSArray *constraint2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView(==40)]-margin-|" options:0 metrics:metrics views:views];
    [self.view addConstraints:constraint2];

看到上面的写法,真是一眼难尽啊!!!

H:|-margin-[blueView(==redView)]-margin-[redView]-margin-|

像这样的写法,可读性真是太差了。大家可作为了解,本人就不解释了。

用第三方类库的代码实现的自动布局

这里,我介绍两款:

一个是UIView+AutoLayout, 它是一个UIView的分类。下载地址:https://github.com/smileyborg/UIView-AutoLayout

代码实现:

[self.redView autoSetDimension:ALDimensionHeight toSize:50];
    [self.redView autoPinEdgeToSuperviewEdge:ALEdgeLeft withInset:20];
    [self.redView autoPinEdgeToSuperviewEdge:ALEdgeBottom withInset:20];

    [self.blueView autoMatchDimension:ALDimensionHeight toDimension:ALDimensionHeight ofView:self.redView];
    [self.blueView autoPinEdgeToSuperviewEdge:ALEdgeRight withInset:20];
    [self.blueView autoPinEdgeToSuperviewEdge:ALEdgeBottom withInset:20];
    [self.blueView autoPinEdge:ALEdgeLeft toEdge:ALEdgeRight ofView:self.redView withOffset:20];
    [self.blueView autoMatchDimension:ALDimensionWidth toDimension:ALDimensionWidth ofView:self.redView];

对比VFL,可读性真是好多了。

另一个是 Masonry, 更加的面向对象了,而且很多都是用block实现的。 下载地址:https://github.com/SnapKit/Masonry

代码实现:

__weak typeof(self) ws = self;
    UIView *sv1 = [[UIView alloc] init];
    sv1.backgroundColor = [UIColor redColor];
    [self.view addSubview:sv1];

    UIView *sv2 = [[UIView alloc] init];
    sv2.backgroundColor = [UIColor blueColor];
    [self.view addSubview:sv2];

    CGFloat padding = 20;

    [sv1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.mas_equalTo(ws.view.mas_bottom).with.offset(-padding);
        make.left.mas_equalTo(ws.view.mas_left).with.offset(padding);
        make.right.mas_equalTo(sv2.mas_left).with.offset(-padding);
        make.height.mas_equalTo(50);
    }];

    [sv2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.mas_equalTo(ws.view.mas_bottom).with.offset(-padding);
        make.right.mas_equalTo(ws.view.mas_right).with.offset(-padding);
        make.height.mas_equalTo(sv1.mas_height);
        make.width.mas_equalTo(sv1.mas_width);
    }];

时间: 2024-08-16 15:43:26

浅谈autolayout的相关文章

iOS AutoLayout自动布局中级开发教程(1)-浅谈autolayout

何为autoLayout(自动布局,相对布局)? 按照我粗浅的理解,autolayout就是描述用来描述视图(控件)与视图之间的关系的一种工具; 当然,这种关系包括,子视图与子视图(如一个view上的两个button),子视图与父视图的关系(如一个Button距离他的父视图view右边界的距离);有大小关系(等高等宽),边界距离关系,有中心点(centerX 和 centerY)关系也有比例缩放(ratio)关系; autolayout的原理实际上是基于数学的一次方程求解,最终算出 约束值;按照

.net中对象序列化技术浅谈

.net中对象序列化技术浅谈 2009-03-11 阅读2756评论2 序列化是将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象.这两个过程结合起来,可以轻松地存储和传输数 据.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象.反之,反序列化根据流重新构造对象.此外还可以将对象序列化后保存到本地,再次运行的时候可以从本地文件 中“恢复”对象到序列化之前的状态.在.net中有提供了几种序列化的方式:二进制序列化

浅谈——页面静态化

现在互联网发展越来越迅速,对网站的性能要求越来越高,也就是如何应对高并发量.像12306需要应付上亿人同时来抢票,淘宝双十一--所以,如何提高网站的性能,是做网站都需要考虑的. 首先网站性能优化的方面有很多:1,使用缓存,最传统的一级二级缓存:2,将服务和数据库分开,使用不同的服务器,分工更加明确,效率更加高:3,分布式,提供多台服务器,利用反向代理服务器nginx进行反向代理,将请求分散开来:4,数据库的读写分离,不同的数据库,将读操作和写操作分开,并实时同步即可:5,分布式缓存,使用memc

单页应用SEO浅谈

单页应用SEO浅谈 前言 单页应用(Single Page Application)越来越受web开发者欢迎,单页应用的体验可以模拟原生应用,一次开发,多端兼容.单页应用并不是一个全新发明的技术,而是随着互联网的发展,满足用户体验的一种综合技术. SEO 一直以来,搜索引擎优化(SEO)是开发者容易忽略的部分.SEO是针对搜索(Google.百度.雅虎搜索等)在技术细节上的优化,例如语义.搜索关键词与内容相关性.收录量.搜索排名等.SEO也是同行.市场竞争常用的的营销手段.Google.百度的搜

浅谈html标签

浅谈html各常用标签用法 标题标签:<h1>-<h6>来表示,使标题字体变粗. <br />换行标记 <hr />水平分隔符 &nbsp空格符 &copy版权符 <a href>a标签超链接 href可接链接地址 <p>段落标签<blockquote>引用标签及可用做缩进 <table>表格中的<ul>无序列表<ol>有序列表<dl>自定义列表<row

浅谈二维中的树状数组与线段树

一般来说,树状数组可以实现的东西线段树均可胜任,实际应用中也是如此.但是在二维中,线段树的操作变得太过复杂,更新子矩阵时第一维的lazy标记更是麻烦到不行. 但是树状数组在某些询问中又无法胜任,如最值等不符合区间减法的询问.此时就需要根据线段树与树状数组的优缺点来选择了. 做一下基本操作的对比,如下图. 因为线段树为自上向下更新,从而可以使用lazy标记使得矩阵的更新变的高校起来,几个不足就是代码长,代码长和代码长. 对于将将矩阵内元素变为某个值,因为树状数组自下向上更新,且要满足区间加法等限制

[nRF51822] 14、浅谈蓝牙低功耗(BLE)的几种常见的应用场景及架构(科普类干货)

蓝牙在短距离无线通信领域占据举足轻重的地位—— 从手机.平板.PC到车载设备, 到耳机.游戏手柄.音响.电视, 再到手环.电子秤.智能医疗器械(血糖仪.数字血压计.血气计.数字脉搏/心率监视器.数字体温计.耳温枪.皮肤水分计等), 再到智能家居等领域均占有一席之地. 而蓝牙低功耗(BLE)是在蓝牙4.0协议上修改以适用低功耗应用场景的一种蓝牙协议. 随着上一股智能消费类电子大潮的到来,BLE的各种应用也像雨后春笋般在市场上铺开. 如果想 紧跟蓝牙协议的最新动态 ,可以在https://www.b

浅谈C++容器动态内存管理的优化

在信息学竞赛中,C++的容器的用途非常广泛,但经常因常数过大而超时.怎样才能提高它们的效率呢? 我们知道,容器是存储同一类对象的对象,既然"对象"我们无法改变,那么我们只能从"存储"入手,不难想到,不同容器在实现上的根本区别是它们对应着不同的内存组织方式,内存管理无疑是这种实现的核心,所以优化内存管理是加快容器效率的最好途径之一. 一.内存分配器简介 怎样才能优化内存管理呢?很简单,C++为我们提供了这样的接口,我们可以通过自定义容器模板中的最后一个allocato

张小龙浅谈微信公众平台的意义

腾讯高级副总裁张小龙表示:微信公众平台,就是在移动互联网时代,让企业和个人以更简捷的形式提供服务给有需要的人. 张小龙浅谈微信公众平台的意义,布布扣,bubuko.com