iOS开发之 Autolayout 详解

其他 2018-06-06 21:59:26 阅读次数: 0

iOS开发之 Autolayout 详解

2018-05-24-1_HemKn1OC2bh7tUpK7_p0Ng

1. 概述

  1. Autolayout 是 Apple 自 iOS6 开始引入的旨在解决不同屏幕之间布局适配的技术
  2. 苹果官方推荐开发者使用 Autolayout 进行UI界面的布局
  3. Autolayout 有两个核心概念：1. 参照。 2. 约束
  4. 使用Autolayout的注意点：
    1. 添加约束之前需要保证控件已被添加到父控件中
    2. 不需要再给View设置frame
    3. 禁止 autoresizing 功能。

2. 代码实现 Autolayout

2.1 步骤：

  1. 把 View 添加到父控件上。

  2. 添加约束到相应的 View 上。

    - (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraints;
  3. 自动布局核心公式：
    obj1.property1 =（obj2.property2 * multiplier）+ constant value
NSLayoutConstraint
/**
view1 ：要约束的控件
attr1 ：约束的类型（做怎样的约束）
relation ：与参照控件之间的关系
view2 ：参照的控件
attr2 ：约束的类型（做怎样的约束）
multiplier ：乘数
c ：常量
*/
+ (instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

2.2 实例

添加一个左间距100 上间距200，宽150 高64 的红视图:
- (void)testAutolayout1 {
    UIView *redV = [[UIView alloc] init];
    redV.backgroundColor = [UIColor redColor];
    redV.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redV];
    /**
     view1 ：要约束的控件
     attr1 ：约束的类型（做怎样的约束）
     relation ：与参照控件之间的关系
     view2 ：参照的控件
     attr2 ：约束的类型（做怎样的约束）
     multiplier ：乘数
     c ：常量
     */
    /// 左间距100:
    NSLayoutConstraint *consLeft = [NSLayoutConstraint constraintWithItem:redV attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:100];
    [self.view addConstraint:consLeft];

    /// 上间距200:
    NSLayoutConstraint *consTop = [NSLayoutConstraint constraintWithItem:redV attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:200];
    [self.view addConstraint:consTop];

    /// 宽150:
    NSLayoutConstraint *consWidth = [NSLayoutConstraint constraintWithItem:redV attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:1.0 constant:150];
    [redV addConstraint:consWidth];

    /// 高64:
    NSLayoutConstraint *consHeight = [NSLayoutConstraint constraintWithItem:redV attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:64];
    [redV addConstraint:consHeight];
}
在上视图基础上添加一个与红视图右间距相同，高度相同，顶部距离红色视图间距20，宽度为红色视图一半的蓝色View
 UIView *blueV = [[UIView alloc] init];
    blueV.backgroundColor = [UIColor blueColor];
    blueV.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueV];

    /// 和 redV 右间距为0
    NSLayoutConstraint *b_consRight = [NSLayoutConstraint constraintWithItem:blueV attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:redV attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0];
    [self.view addConstraint:b_consRight];

    /// 和 redV 等高
    NSLayoutConstraint *b_consHeight = [NSLayoutConstraint constraintWithItem:blueV attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:redV attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
    [self.view addConstraint:b_consHeight];

    /// 宽度是 redV 的一半
    NSLayoutConstraint *b_consWidth = [NSLayoutConstraint constraintWithItem:blueV attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redV attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
    [self.view addConstraint:b_consWidth];

    /// 顶部距离 redV 20
    NSLayoutConstraint *b_consTop = [NSLayoutConstraint constraintWithItem:blueV attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redV attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20.0];
    [self.view addConstraint:b_consTop];

最终效果：
屏幕快照 2018-05-24 下午3.46.26

2.3 添加约束的规则

在创建约束之后，需要将其添加到作用的view上。
在添加时要注意目标view需要遵循以下规则：

（1）对于两个同层级view之间的约束关系，添加到它们的父view上
（2）对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
（3）对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上

3. VFL

VFL全称是Visual Format Language，翻译过来是“可视化格式语言”，是苹果公司为了简化Autolayout的编码而推出的抽象语言。

    /*
     format ：VFL语句
     opts ：约束类型
     metrics ：VFL语句中用到的具体数值
     views ：VFL语句中用到的控件
     */
+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *,id> *)views;

@{@"redV" : redV} 等价于 NSDictionaryOfVariableBindings(redV)

NSDictionary *views =

NSDictionaryOfVariableBindings(blueView, redView);

NSArray *conts2 =

[NSLayoutConstraint constraintsWithVisualFormat:

@"V:[blueView(==blueHeight)]-margin-|" options:0 metrics:

@{@"blueHeight" : @40, @"margin" : @20} views:views];

约束格式说明：

水平方向 　　　　　　 H:
垂直方向 　　　　　　 V:
Views　　　　　　　　 [view]
SuperView　　　　　　|
关系　　　　　　　　　>=,==,<=
空间,间隙　　　　　　　-
优先级　　　　　　　　@value

3.1 VFL 部分语法：

H:|-100-[redV(200)]-|

水平方向距离左边距100，宽度200

V:|-200-[redV(64)]-|

垂直方向距离顶部200，高度64

H:[redV(72)]-12-[blueV(50)]

水平方向redV 宽度72，blueV 宽度50，他们之间间距12

H:[redV(>=60@700)]

水平方向redV宽度大于等于60，优先级为700 （优先级最大1000）

扫描二维码关注公众号，回复： 1499743 查看本文章

V:[redBox]-[yellowBox(==redBox)]

竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox

H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）

3.2 VFL的语法

  • 标准间隔：[button]-[textField]
  • 宽约束：[button(>=50)]
  • 与父视图的关系：|-50-[purpleBox]-50-|
  • 垂直布局：V:[topField]-10-[bottomField]
  • Flush Views：[maroonView][buleView]
  • 权重：[button(100@20)]
  • 等宽：[button(==button2)]
  • Multiple Predicates：[flexibleButton(>=70,<=100)]

注意事项

创建这种字符串时需要注意一下几点：
* H:和V:每次都使用一个。
* 视图变量名出现在方括号中，例如[view]。
* 字符串中顺序是按照从顶到底，从左到右
* 视图间隔以数字常量出现，例如-10-。
* |表示父视图

3.3 使用Auto Layout时需要注意的点

  • 注意禁用Autoresizing Masks。对于每个需要使用Auto Layout的视图需要调用setTranslatesAutoresizingMaskIntoConstraints:NO
  • VFL语句里不能包含空格和>，<这样的约束
  • 布局原理是由外向里布局，最先屏幕尺寸，再一层一层往里决定各个元素大小。
  • 删除视图时直接使用removeConstraint和removeConstraints时需要注意这样删除是没法删除视图不支持的约束导致view中还包含着那个约束（使用第三方库时需要特别注意下）。解决这个的办法就是添加约束时用一个局部变量保存下，删除时进行比较删掉和先前那个，还有个办法就是设置标记，constraint.identifier = @“What you want to call”。

3.4 布局约束规则

表达布局约束的规则可以使用一些简单的数学术语，如下表

类型 描述 值
属性 视图位置 NSLayoutAttributeLeft, NSLayoutAttributeRight, NSLayoutAttributeTop, NSLayoutAttributeBottom
属性 视图前面后面 NSLayoutAttributeLeading, NSLayoutAttributeTrailing
属性 视图的宽度和高度 NSLayoutAttributeWidth, NSLayoutAttributeHeight
属性 视图中心 NSLayoutAttributeCenterX, NSLayoutAttributeCenterY
属性 视图的基线，在视图底部上方放置文字的地方 NSLayoutAttributeBaseline
属性 占位符，在与另一个约束的关系中没有用到某个属性时可以使用占位符 NSLayoutAttributeNotAnAttribute
关系 允许将属性通过等式和不等式相互关联 NSLayoutRelationLessThanOrEqual, NSLayoutRelationEqual, NSLayoutRelationGreaterThanOrEqual
数学运算 每个约束的乘数和相加性常数 CGFloat值

3.5 View的改变会调用哪些方法

  • 改变frame.origin不会掉用layoutSubviews
  • 改变frame.size会使 superVIew的layoutSubviews调用和自己view的layoutSubviews方法
  • 改变bounds.origin和bounds.size都会调用superView和自己view的layoutSubviews方法

3.6 VFL 实例：

- (void)testVFL {
    UIView *redV = [[UIView alloc] init];
    redV.backgroundColor = [UIColor redColor];
    redV.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redV];

    UIView *blueV = [[UIView alloc] init];
    blueV.backgroundColor = [UIColor blueColor];
    blueV.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueV];
    /*
     format ：VFL语句
     opts ：约束类型
     metrics ：VFL语句中用到的具体数值
     views ：VFL语句中用到的控件
     */
    //水平方向 redV 左右间距为20
    NSArray *cons1 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redV]-20-|" options:0 metrics:nil views:@{@"redV":redV}];
    [self.view addConstraints:cons1];

    //垂直方法redV距离顶部 100, redV 高度为64, blueV顶部距离redV 100 像素, blueV的高度等于redV
    NSArray *cons2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-margin-[redV(64)]-margin-[blueV(==redV)]" options:NSLayoutFormatAlignAllRight metrics:@{@"margin" : @100} views:NSDictionaryOfVariableBindings(redV,blueV)];
    [self.view addConstraints:cons2];

    NSLayoutConstraint *cons = [NSLayoutConstraint constraintWithItem:blueV attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redV attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
    [self.view addConstraint:cons];
}

运行结果：
2018-05-24_3.46.26

文中演示Demo 均已开源在 GitHub上，这是链接： XWAutolayoutDemo In Github

猜你喜欢

转载自blog.csdn.net/qiuxuewei2012/article/details/80437099
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022