iOS开发基础11-屏幕适配、Autolayout及 Masonry 框架
在 iOS 开发中,适配性、布局和分辨率是至关重要的概念。通过理解这些概念,可以编写出兼容性更强、视觉效果更佳的应用。本文将详细介绍适配、点和像素、Autoresizing、Autolayout 及 Masonry 框架,并分析其底层逻辑。
一、适配
1. 什么是适配?
在软件开发中,适配指的是让应用能够适应并兼容各种不同的情况。
2. 移动开发中的适配种类
2.1 系统适配
针对不同版本的操作系统进行适配。例如,某些 API 在 iOS 的新版本中引入或废弃了,需要进行版本判断来适配不同的系统版本。
2.2 屏幕适配
针对不同大小的屏幕尺寸和屏幕比例进行适配。通过响应式设计和动态布局,使应用在不同设备上都能有良好的展示效果。
二、点和像素
1. 在用户眼中
屏幕是由无数个像素(Pixel)组成的,像素越多,屏幕越清晰。
2. 在开发者眼中
在 iOS 开发中,屏幕是由无数个点(Point)组成的。一个点由一个或多个像素组成。像素密度(PPI或DPI)越高,屏幕越清晰。
三、Autoresizing简介
1. Autoresizing 的历史
在 Autolayout 之前,iOS 开发者使用 Autoresizing 来进行屏幕适配。但 Autoresizing 的局限性较大,无法完成复杂的布局任务。相比之下,Autolayout 的功能更强大。
2. Autoresizing 的核心概念
- 参照(Reference):确定控件相对于哪个父控件来设置位置和大小。
- 约束(Constraint):定义控件与其父控件之间的关系。
3. Autoresizing 的实现
如下图所示的六根线:
- 四周线的作用:勾选上某一根线,代表当前控件到父控件的距离是固定的。
- 中间两条线的作用:勾选上中间的水平线,控件的宽度会随着父控件的宽度等比拉伸。勾选上垂直线,控件高度会等比拉伸。
- 父子关系的约束:Autoresizing 仅能约束父子控件之间的关系,不能约束兄弟控件。
示例代码
// 1. 创建父控件
UIView *greenView = [[UIView alloc] init];
greenView.frame = CGRectMake(0, 0, 200, 200);
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView];
// 2. 创建子控件
UIView *redView = [[UIView alloc] init];
redView.frame = CGRectMake(0, 0, 100, 100);
redView.backgroundColor = [UIColor redColor];
[greenView addSubview:redView];
// 3. 设置子控件的autoresizing
redView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
底层逻辑分析
- 固定距离和伸缩:根据设置,子控件与父控件的距离或尺寸可以固定,也可以等比例伸缩。
- 基于父子关系:所有约束都基于控件层次关系,不能处理兄弟控件之间的约束。
四、Autolayout简介
1. Autolayout 的背景
Autolayout 是 iOS 6 引入的一种“自动布局”技术,专门用于布局 UI 界面。随着开发工具的迭代,Autolayout 得到了广泛应用。
2. Storyboard 中的约束
2.1 约束的概念
每在 Storyboard 中添加一个设置,就相当于添加了一个约束。
2.2 约束错误
- 红色箭头:代表约束错误,开发者必须解决,这不一定影响运行,但会导致布局不正确。
- 黄色箭头:代表警告,表示控件预览位置或尺寸与约束位置不符,可以忽略但需要处理。
3. Autolayout 动画
修改约束后,使用以下代码实现动画:
[UIView animateWithDuration:1.0 animations:^{
[view layoutIfNeeded];
}];
4. NSLayoutConstraint (代码实现 Autolayout)
创建约束对象
使用 NSLayoutConstraint
类创建约束对象:
+(id)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation
toItem:(id)view2
attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier
constant:(CGFloat)c;
示例代码
UIView *redView = [[UIView alloc] init];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];
NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:100];
NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:100];
[self.view addConstraints:@[widthConstraint, heightConstraint]];
底层逻辑分析
- 公式:Autolayout 的核心计算方式为:
obj1.property1 = (obj2.property2 * multiplier) + constant
- 添加约束:约束添加到作用 view 的父视图上,以确保约束所需的上下文存在。
五、VFL 语言
1. 什么是 VFL 语言
VFL(Visual Format Language)是一种可视化格式语言,旨在简化 Autolayout 的代码编写。
2. VFL 示例
H:[cancelButton(72)]-12-[acceptButton(50)]
表示 cancelButton
宽度为 72,acceptButton
宽度为 50,两者间距为 12。
3. 使用 VFL 创建约束
示例代码
UIButton *cancelButton = [[UIButton alloc] init];
cancelButton.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:cancelButton];
UIButton *acceptButton = [[UIButton alloc] init];
acceptButton.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:acceptButton];
NSDictionary *views = NSDictionaryOfVariableBindings(cancelButton, acceptButton);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[cancelButton(72)]-12-[acceptButton(50)]"
options:0
metrics:nil
views:views];
[self.view addConstraints:constraints];
底层逻辑分析
VFL 通过简单的字符串表示复杂的布局逻辑,大大简化了代码可读性和编写复杂约束的繁琐程度。
六、Masonry
1. Masonry 是什么
Masonry 是一个流行的第三方 Autolayout 框架,通过链式语法以优雅的方式编写 Autolayout 代码,提高开发效率。
2. 安装与使用
代码示例
// 添加 Masonry 到项目中
#import "Masonry.h"
// 使用 Masonry 实现一个简单的布局
UIView *superview = self.view;
UIButton *button = [[UIButton alloc] init];
[superview addSubview:button];
[button mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(50);
make.height.mas_equalTo(50);
make.center.equalTo(superview);
}];
特性解释
- mas_equalTo 和 equalTo:
mas_equalTo
具有自动包装功能,而equalTo
不具有。添加宏#define MAS_SHORTHAND_GLOBALS
后,两者无差别。 - mas_width 和 width:
mas_width
是属性值,用于equalTo
,而width
是make
的一个属性。添加宏#define MAS_SHORTHAND
后,可简写。
3. Masonry 的可读性提升
- (MASConstraint *)with {
return self;
}
- (MASConstraint *)and {
return self;
}
这些方法是为了提高代码可读性,尽管不是必要的,但有助于理解约束关系。
结论
通过上述内容,我们详细介绍了 iOS 开发中适配、点和像素、Autoresizing、Autolayout 和 Masonry 框架的知识点和应用。这些工具和概念是编写兼容性好、布局灵活、视觉效果优美的 iOS 应用的基础。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!