目录
前言
这篇文章继续讲解iOS中Auto Layout的高级用法。
一、特定尺寸类别的布局
我们可以使用Size Class描述设备屏幕尺寸和界面方向的概念。它允许开发者为不同的屏幕大小和方向设计不同的布局,使得应用程序在各种设备和屏幕配置上都能呈现良好的用户界面。
1.Size Class分类
在 iOS 中,Size Class分为两种类型:
1.宽度 Size Class(Width Size Class) :描述屏幕的宽度。
2.高度 Size Class(Height Size Class):描述屏幕的高度。
每种Size Class又可以分为三种状态:
- 紧凑(Compact)**:表示屏幕尺寸较小或狭窄的情形,适用于 iPhone 处于竖屏状态或 iPad 处于分屏模式时的一部分屏幕。
- 常规(Regular)**:表示屏幕尺寸较大,适用于 iPad、iPhone Plus 设备横屏状态或 iPhone 在大屏设备上的竖屏状态。
- 未定义(Unspecified)**:主要在一些特定的情况下使用,表示没有指定的尺寸分类。
2.Size Class的使用场景
在 iOS 开发中,你可以使用Size Class来适配不同的屏幕和设备,尤其是在使用 Auto Layout 时。借助Size Class,你可以为不同的设备设计不同的界面布局。例如,在 iPhone 设备上使用紧凑布局,在 iPad 设备上使用常规布局,以确保用户在不同设备上获得最佳体验。
3.Size Class 示例
在 Interface Builder(Xcode 的界面设计工具)中,Size Class允许你为不同的设备配置单独的布局。例如,你可以为 iPhone 竖屏(Compact Width x Regular Height)设置一种布局,为 iPad 设备或 iPhone 横屏(Regular Width x Regular Height)设置另一种布局。
例如,假设你有一个视图布局在竖屏 iPhone 上显示为单列,但在横屏或 iPad 上希望显示为双列。你可以根据不同的Size Class,为这两个场景设置不同的约束。
Size Class 组合
常见的 `Size Class` 组合包括:
1.Compact Width x Compact Height: 适用于 iPhone 在横屏时的显示状态。
2.Compact Width x Regular Heigh: 适用于 iPhone 在竖屏时的显示状态。
3.Regular Width x Regular Height: 适用于 iPad 在横屏或竖屏时的显示状态,或者 iPhone Plus 在横屏时的显示状态。
4.Regular Width x Compact Height: 比较少见,适用于 iPhone Plus 在横屏状态下的一些特殊情况。
4.如何检测 Size Class
在代码中,你可以通过UITraitCollection来检测当前的Size Class,从而根据设备的屏幕尺寸和方向来调整界面布局。
例如,在UIViewController中可以这样检测:
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
[super traitCollectionDidChange:previousTraitCollection];
if (self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassCompact) {
// 当前宽度 Size Class 为 Compact
} else if (self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassRegular) {
// 当前宽度 Size Class 为 Regular
}
if (self.traitCollection.verticalSizeClass == UIUserInterfaceSizeClassCompact) {
// 当前高度 Size Class 为 Compact
} else if (self.traitCollection.verticalSizeClass == UIUserInterfaceSizeClassRegular) {
// 当前高度 Size Class 为 Regular
}
}
这个方法会在设备方向改变或大小发生变化时被调用,从而允许你根据新的 `Size Class` 来调整布局。
5.使用 Size Class 的最佳实践
1.为不同设备配置不同的布局:通过Size Class,你可以为 iPhone 和 iPad 等设备配置不同的界面布局。
2.适应多任务分屏模式:在 iPad 的分屏模式下,你的应用程序界面可能需要适应不同大小的屏幕部分,Size Class可以帮助你实现这种适配。
3. 结合 Auto Layout:Size Class 与 Auto Layout 是强大的组合,通过它们,你可以为不同设备和屏幕方向设置灵活的布局和约束。
4. 定制控件样式:你可以为不同的Size Class定制控件的外观和样式,使得你的应用在不同设备上都有一致且良好的用户体验。
5.示例代码
以下是一个简单的 iOS 应用 Demo,展示了如何根据不同的 Size Class 来调整界面布局。这个示例会根据设备的 Size Class 改变视图的背景颜色以及布局方式。
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) UIView *topView;
@property (nonatomic, strong) UIView *bottomView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 初始化两个视图
self.topView = [[UIView alloc] init];
self.topView.translatesAutoresizingMaskIntoConstraints = NO;
self.topView.backgroundColor = [UIColor redColor];
self.bottomView = [[UIView alloc] init];
self.bottomView.translatesAutoresizingMaskIntoConstraints = NO;
self.bottomView.backgroundColor = [UIColor blueColor];
[self.view addSubview:self.topView];
[self.view addSubview:self.bottomView];
// 默认布局
[self setupConstraintsForCompactWidthAndRegularHeight];
}
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
[super traitCollectionDidChange:previousTraitCollection];
// 检测Size Class并根据不同的组合更新布局
if (self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassCompact &&
self.traitCollection.verticalSizeClass == UIUserInterfaceSizeClassRegular) {
[self setupConstraintsForCompactWidthAndRegularHeight];
} else if (self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassRegular &&
self.traitCollection.verticalSizeClass == UIUserInterfaceSizeClassRegular) {
[self setupConstraintsForRegularWidthAndRegularHeight];
}
}
#pragma mark - Constraints Setup
- (void)setupConstraintsForCompactWidthAndRegularHeight {
// 移除所有约束
[NSLayoutConstraint deactivateConstraints:self.view.constraints];
// 竖直方向布局,两个视图上下排列
[NSLayoutConstraint activateConstraints:@[
[self.topView.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor],
[self.topView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
[self.topView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
[self.topView.heightAnchor constraintEqualToConstant:200],
[self.bottomView.topAnchor constraintEqualToAnchor:self.topView.bottomAnchor],
[self.bottomView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
[self.bottomView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
[self.bottomView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor]
]];
// 更新背景颜色
self.topView.backgroundColor = [UIColor redColor];
self.bottomView.backgroundColor = [UIColor blueColor];
}
- (void)setupConstraintsForRegularWidthAndRegularHeight {
// 移除所有约束
[NSLayoutConstraint deactivateConstraints:self.view.constraints];
// 水平方向布局,两个视图并排排列
[NSLayoutConstraint activateConstraints:@[
[self.topView.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor],
[self.topView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],
[self.topView.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier:0.5],
[self.topView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor],
[self.bottomView.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor],
[self.bottomView.leadingAnchor constraintEqualToAnchor:self.topView.trailingAnchor],
[self.bottomView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],
[self.bottomView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor]
]];
// 更新背景颜色
self.topView.backgroundColor = [UIColor greenColor];
self.bottomView.backgroundColor = [UIColor yellowColor];
}
@end
在这个例子中:
1. 视图布局:
topView 和 bottomView 是两个用于展示的视图,颜色和布局根据设备的 Size Class 改变。
2. traitCollectionDidChange: 方法:
当设备的 Size Class 发生变化时(例如从竖屏切换到横屏),系统会调用这个方法。在这里,根据不同的 Size Class 组合来选择不同的布局。
3. 布局方式:
Compact Width and Regular Height: 竖屏时,两个视图上下排列。
Regular Width and Regular Height: 横屏时,两个视图左右排列。
4. 激活和移除约束:
在每次更新布局时,首先移除之前的约束,然后添加新的约束。这确保了布局能根据 Size Class 正确调整。
二、使用自适应大小的表视图单元格
当我们是用UITableViewCell的时候,如果想要使用AutoLayout布局,比如设置tableView的rowHeight为UITableViewAutomaticDimension。
tableView.estimatedRowHeight = 85.0
tableView.rowHeight = UITableViewAutomaticDimension