iOS中的布局方法整理

最新推荐文章于 2025-06-30 10:10:49 发布

原创最新推荐文章于 2025-06-30 10:10:49 发布 · 4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#相对布局 #autolayout

iOS 专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍了iOS中的布局方法，重点讨论了绝对布局和相对布局，特别是Autolayout技术。Autolayout自iOS 6起引入，自iOS 7开始得到广泛推广，因其强大的屏幕适配能力成为苹果官方推荐的布局方式。文中还提到了添加约束的规则，VFL（可视化格式语言）的使用，并推荐了一些自动布局的第三方框架如Masonry、Keep Layout和ZXPAutoLayout，以及相关的学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般来说分为绝对布局和相对布局。
绝对布局一般通过 frame 改变组件的位置和大小，相对布局是参考组件周围的元素来确定组件的大小或位置，相对布局即约束和周围组件的距离来布局的。

可视化编程的相对布局一般用 al 来进行。

简单介绍一下Autolayout：
Autolayout是一种“自动布局”技术，专门用来布局UI界面的
Autolayout自iOS 6开始引入，由于Xcode 4的不给力，当时并没有
得到很大推广
自iOS 7（Xcode 5）开始，Autolayout的开发效率得到很大的提升
苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
Autolayout能很轻松地解决屏幕适配的问题

在Autolayout之前，有Autoresizing可以作屏幕适配，但局限性
较大，有些任务根本无法完成
相比之下，Autolayout的功能比Autoresizing强大很多

代码也可实现Autolayout：

利用NSLayoutConstraint类创建具体的约束对象
添加约束对象到相应的view上
- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;

代码实现Autolayout的注意点
要先禁止autoresizing功能，设置view的下面属性为NO
view.translatesAutoresizingMaskIntoConstraints = NO;
添加约束之前，一定要保证相关控件都已经在各自的父控件上
不用再给view设置frame

一个NSLayoutConstraint对象就代表一个约束

创建约束对象的常用方法
+(id)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 ：参照的控件
attr2 ：约束的类型（做怎样的约束）
multiplier ：乘数
c ：常量

自动布局有个核心公式
obj1.property1 =（obj2.property2 * multiplier）+ constant value

添加约束的规则：
在创建约束之后，需要将其添加到作用的view上
在添加时要注意目标view需要遵循以下规则：
1）对于两个同层级view之间的约束关系，添加到它们的父view上
2）对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
3）对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上

贴上代码实现约束的例子：

    // 1.添加控件
    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];

    // 2.约束蓝色
    // 2.1.高度
    NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40];
    [blueView addConstraint:blueHeight];
    // 2.2.左边间距
    CGFloat margin = 20;
    NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margin];
    [self.view addConstraint:blueLeft];
    // 2.3.顶部间距
    NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:margin];
    [self.view addConstraint:blueTop];
    // 2.4.右边间距
    NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-margin];
    [self.view addConstraint:blueRight];

    // 3.约束红色
    // 3.1.让红色右边 == 蓝色右边
    NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0];
    [self.view addConstraint:redRight];

    // 3.2.让红色高度 == 蓝色高度
    NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
    [self.view addConstraint:redHeight];

    // 3.3.让红色顶部 == 蓝色底部 + 间距
    NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:margin];
    [self.view addConstraint:redTop];

    // 3.4.让红色宽度 == 蓝色宽度 * 0.5
    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
    [self.view addConstraint:redWidth];

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

示例：

H:[cancelButton(72)]-12-[acceptButton(50)]
canelButton宽72，acceptButton宽50，它们之间间距12

H:[wideView(>=60@700)]
wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）

V:[redBox]-[yellowBox(==redBox)]
竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox

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

使用VFL来创建约束数组
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format 
options:(NSLayoutFormatOptions)opts 
metrics:(NSDictionary *)metrics 
views:(NSDictionary *)views;

format ：VFL语句
opts ：约束类型
metrics ：VFL语句中用到的具体数值
views ：VFL语句中用到的控件

创建一个字典（内部包含VFL语句中用到的控件）的快捷宏定义
NSDictionaryOfVariableBindings(...)

贴上 VFL生成约束示例代码：

    // 1.添加控件
    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];

    // 2.VFL生成约束
    NSDictionary *mertrics = @{@"margin" : @20}; // 参数\数值
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
    NSArray *conts = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];

    NSArray *conts2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView(==blueHeight)]-margin-|" options:0 metrics:@{@"blueHeight" : @40, @"margin" : @20} views:views];
    [self.view addConstraints:conts];
    [self.view addConstraints:conts2];

基于Autolayout的动画：

在修改了约束之后，只要执行下面代码，就能做动画效果
[UIView animateWithDuration:1.0 animations:^{
    [添加了约束的view layoutIfNeeded];
}];

另外介绍一些自动布局的框架：Masonry，keep layout，ZXPAutoLayout。这里就不一一讲解使用了，推荐几个教程。

ZXPAutoLayout：http://www.cocoachina.com/ios/20160113/14974.html
Masonry：http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/
Keep Layout：http://www.it165.net/pro/html/201503/35625.html

自动布局autolayout使用总结（源码含swift版本）：
http://blog.youkuaiyun.com/lihuiqwertyuiop/article/details/41643417
Xcode6中如何对scrollview进行自动布局（autolayout）：
http://www.cocoachina.com/ios/20141011/9871.html