Objective-C中的Size Class与Trait Collection适配
一、Size Class 与 Trait Collection 基础概念
1.1 Size Class 简介
在 iOS 开发中，苹果引入了 Size Class 的概念，以帮助开发者更方便地处理不同设备屏幕尺寸和方向变化的布局问题。Size Class 把屏幕的尺寸范围抽象为两种类型：宽度（Width）和高度（Height），每种类型又分为紧凑（Compact）和常规（Regular）两种状态。这样就组合出了四种基本的 Size Class 组合：
- Compact Width, Compact Height：典型场景如 iPhone 在竖屏时的小尺寸屏幕，空间相对紧凑。
- Compact Width, Regular Height：例如 iPhone 在横屏时，宽度变得紧凑，而高度仍有较多空间。
- Regular Width, Regular Height：iPad 在竖屏和横屏时大多属于这种情况，有较为充裕的宽度和高度空间。
- Regular Width, Compact Height：这种组合相对少见，但在一些特定设备或分屏场景下可能出现。
Size Class 提供了一种统一的方式来描述不同设备的屏幕特征，开发者可以基于这些特征来设计和调整界面布局，从而在各种设备上都能提供良好的用户体验。
1.2 Trait Collection 概述
Trait Collection 是与 Size Class 紧密相关的一个概念。它是一个包含了多个特征（traits）的集合，这些特征不仅仅局限于 Size Class，还可以包括其他设备相关的信息，如显示缩放比例、用户界面风格（如 Dark Mode）等。
在 Objective - C 中，UITraitCollection 类用于表示 Trait Collection。每个视图（UIView）和视图控制器（UIViewController）都有一个 traitCollection 属性，通过这个属性可以获取当前环境下的 Trait Collection。当设备的某些特征发生变化时，例如屏幕旋转导致 Size Class 改变，系统会自动更新相关视图和视图控制器的 traitCollection。
二、Size Class 与 Trait Collection 的应用场景
2.1 自适应布局
在设计用户界面时，自适应布局是 Size Class 和 Trait Collection 的一个重要应用场景。例如，在一个新闻应用中，在 iPhone 的竖屏（Compact Width, Regular Height）下，文章标题可能显示为一行，图片在标题下方；而在 iPad 的横屏（Regular Width, Regular Height）下，标题和图片可能并排显示，以充分利用更宽的屏幕空间。
通过检测 Size Class 的变化，开发者可以在 UIViewController 的 traitCollectionDidChange: 方法中调整视图的布局约束。下面是一个简单的示例代码，展示如何在 Size Class 变化时调整两个视图的布局：
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) UIView *leftView;
@property (nonatomic, strong) UIView *rightView;
@property (nonatomic, strong) NSLayoutConstraint *leftViewWidthConstraint;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.leftView = [[UIView alloc] init];
self.leftView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.leftView];
self.rightView = [[UIView alloc] init];
self.rightView.backgroundColor = [UIColor blueColor];
[self.view addSubview:self.rightView];
[self.leftView.translatesAutoresizingMaskIntoConstraints setValue:@NO];
[self.rightView.translatesAutoresizingMaskIntoConstraints setValue:@NO];
NSLayoutConstraint *leftViewLeadingConstraint = [NSLayoutConstraint constraintWithItem:self.leftView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:20];
NSLayoutConstraint *leftViewTopConstraint = [NSLayoutConstraint constraintWithItem:self.leftView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:20];
NSLayoutConstraint *rightViewLeadingConstraint = [NSLayoutConstraint constraintWithItem:self.rightView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.leftView
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:20];
NSLayoutConstraint *rightViewTopConstraint = [NSLayoutConstraint constraintWithItem:self.rightView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:20];
NSLayoutConstraint *rightViewTrailingConstraint = [NSLayoutConstraint constraintWithItem:self.rightView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:-20];
NSLayoutConstraint *rightViewBottomConstraint = [NSLayoutConstraint constraintWithItem:self.rightView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-20];
self.leftViewWidthConstraint = [NSLayoutConstraint constraintWithItem:self.leftView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:100];
[self.view addConstraints:@[leftViewLeadingConstraint, leftViewTopConstraint, rightViewLeadingConstraint, rightViewTopConstraint, rightViewTrailingConstraint, rightViewBottomConstraint, self.leftViewWidthConstraint]];
}
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
[super traitCollectionDidChange:previousTraitCollection];
if (self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassRegular) {
self.leftViewWidthConstraint.constant = 200;
} else {
self.leftViewWidthConstraint.constant = 100;
}
[self.view layoutIfNeeded];
}
@end
在上述代码中，ViewController 初始化了两个视图 leftView 和 rightView，并添加了布局约束。在 traitCollectionDidChange: 方法中，根据当前 traitCollection 的水平 Size Class 来调整 leftView 的宽度，实现了自适应布局。
2.2 资源加载
另一个重要的应用场景是资源加载。不同的 Size Class 可能需要加载不同尺寸的图片、视频或其他资源。例如，对于大屏幕设备（Regular Width, Regular Height），可以加载更高分辨率的图片以提供更好的视觉效果；而对于小屏幕设备（Compact Width, Compact Height），加载低分辨率的图片可以节省内存和网络流量。
在 Objective - C 中，可以使用 UIImage 的 imageNamed:inBundle:compatibleWithTraitCollection: 方法来根据 Trait Collection 加载合适的图片。假设项目中有两个不同尺寸的图片 image_small.png 和 image_large.png，可以按照以下方式加载：
UIImage *image;
if (self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassRegular &&
self.traitCollection.verticalSizeClass == UIUserInterfaceSizeClassRegular) {
image = [UIImage imageNamed:@"image_large" inBundle:nil compatibleWithTraitCollection:self.traitCollection];
} else {
image = [UIImage imageNamed:@"image_small" inBundle:nil compatibleWithTraitCollection:self.traitCollection];
}
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[self.view addSubview:imageView];
通过这种方式，根据设备的 Size Class 动态加载合适的资源，提高了应用在不同设备上的性能和用户体验。
三、深入理解 Trait Collection 的继承与合并
3.1 Trait Collection 的继承
在视图层级结构中，UITraitCollection 存在继承关系。每个视图从其父视图继承 traitCollection，除非该视图自己的某些特征被明确设置。例如，一个子视图默认会继承其父视图的 Size Class、显示缩放比例等特征。
假设我们有一个 UIViewController，其视图上添加了一个 UIView，这个 UIView 又添加了一个子视图 UILabel。当设备的屏幕旋转导致 UIViewController 的 traitCollection 中的 Size Class 发生变化时，这个变化会沿着视图层级向下传递，UIView 和 UILabel 都会接收到新的 traitCollection。
在代码中，可以通过以下方式验证 Trait Collection 的继承关系：
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) UIView *containerView;
@property (nonatomic, strong) UILabel *label;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.containerView = [[UIView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:self.containerView];
self.label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 200, 50)];
[self.containerView addSubview:self.label];
NSLog(@"ViewController Trait Collection: %@", self.traitCollection);
NSLog(@"Container View Trait Collection: %@", self.containerView.traitCollection);
NSLog(@"Label Trait Collection: %@", self.label.traitCollection);
}
@end
运行上述代码，会发现 ViewController、containerView 和 label 的 traitCollection 在初始状态下是相同的。当设备屏幕旋转或其他导致 traitCollection 变化的事件发生时，它们的 traitCollection 也会同步变化。
3.2 Trait Collection 的合并
有时候，视图可能需要合并来自不同源的 Trait Collection。例如，一个视图可能需要结合其父视图的 traitCollection 和自身特定的 traitCollection 来确定最终的布局和显示效果。
UITraitCollection 提供了 initWithTraitsFromCollections: 方法来实现 Trait Collection 的合并。假设我们有一个自定义视图 CustomView，它希望在特定条件下覆盖从父视图继承的 Size Class：
#import "CustomView.h"
@implementation CustomView
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
// 假设这里有一些初始化操作
}
return self;
}
- (UITraitCollection *)traitCollection {
UITraitCollection *parentTraitCollection = [super traitCollection];
// 假设满足某个条件，需要自定义 Size Class
if (someCondition) {
UITraitCollection *customSizeClassTrait = [UITraitCollection traitCollectionWithHorizontalSizeClass:UIUserInterfaceSizeClassCompact verticalSizeClass:UIUserInterfaceSizeClassCompact];
return [UITraitCollection initWithTraitsFromCollections:@[parentTraitCollection, customSizeClassTrait]];
} else {
return parentTraitCollection;
}
}
@end
在上述代码中，CustomView 重写了 traitCollection 方法。在方法中，首先获取父视图的 traitCollection，然后根据某个条件，如果需要自定义 Size Class，就创建一个包含自定义 Size Class 的 UITraitCollection，并通过 initWithTraitsFromCollections: 方法将父视图的 traitCollection 和自定义的 traitCollection 合并。这样，CustomView 就可以在特定条件下展示出与父视图不同的基于 Size Class 的布局和显示效果。
四、处理复杂的 Trait Collection 变化
4.1 多特征变化处理
在实际应用中，Trait Collection 可能包含多个特征同时变化的情况。例如，当设备从竖屏切换到横屏时，不仅 Size Class 会发生变化，显示方向也会改变。同时，在支持 Dark Mode 的设备上，用户切换系统外观模式时，Trait Collection 中的用户界面风格特征也会改变。
开发者需要在 traitCollectionDidChange: 方法中综合处理这些变化。以下是一个处理 Size Class 和 Dark Mode 变化的示例代码：
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) UIView *contentView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.contentView = [[UIView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:self.contentView];
[self updateViewAppearance];
}
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
[super traitCollectionDidChange:previousTraitCollection];
[self updateViewAppearance];
}
- (void)updateViewAppearance {
if (self.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
self.contentView.backgroundColor = [UIColor blackColor];
} else {
self.contentView.backgroundColor = [UIColor whiteColor];
}
if (self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassRegular) {
// 调整布局，例如增加视图间距
// 这里假设 self.contentView 中有多个子视图，通过调整约束来增加间距
// 实际应用中需要根据具体布局进行调整
for (UIView *subview in self.contentView.subviews) {
// 这里只是示例，实际要根据子视图的布局约束进行调整
NSLayoutConstraint *constraint = [subview.constraints firstObject];
constraint.constant += 10;
}
} else {
// 恢复布局
for (UIView *subview in self.contentView.subviews) {
NSLayoutConstraint *constraint = [subview.constraints firstObject];
constraint.constant -= 10;
}
}
[self.contentView layoutIfNeeded];
}
@end
在上述代码中，ViewController 监听 traitCollection 的变化，在 traitCollectionDidChange: 方法中调用 updateViewAppearance 方法。updateViewAppearance 方法根据 traitCollection 中的 userInterfaceStyle 来改变 contentView 的背景颜色，同时根据 horizontalSizeClass 来调整 contentView 中子视图的布局。
4.2 动态注册 Trait Collection 变化通知
除了在 UIViewController 的 traitCollectionDidChange: 方法中处理 Trait Collection 变化外，开发者还可以通过动态注册通知的方式来监听 Trait Collection 的变化。这种方式在某些情况下更加灵活，例如当一个视图模型（ViewModel）需要监听 Trait Collection 变化时，而该视图模型并不直接继承自 UIViewController 或 UIView。
首先，在需要监听通知的地方注册通知：
#import "MyViewModel.h"
@implementation MyViewModel
- (instancetype)init {
self = [super init];
if (self) {
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(traitCollectionDidChangeNotification:)
name:UITraitCollectionDidChangeNotification
object:nil];
}
return self;
}
- (void)dealloc {
[[NSNotificationCenter defaultCenter] removeObserver:self];
}
- (void)traitCollectionDidChangeNotification:(NSNotification *)notification {
UITraitCollection *newTraitCollection = notification.object;
// 处理 Trait Collection 变化逻辑
if (newTraitCollection.horizontalSizeClass == UIUserInterfaceSizeClassRegular) {
// 例如调整数据展示方式
} else {
// 恢复数据展示方式
}
}
@end
在上述代码中，MyViewModel 类在初始化时注册了 UITraitCollectionDidChangeNotification 通知，并在收到通知时处理 Trait Collection 的变化。这种方式使得非视图相关的类也能够响应 Trait Collection 的变化，从而实现更灵活的业务逻辑。
五、与 Auto Layout 的协同工作
5.1 Auto Layout 基础回顾
在深入探讨 Size Class 和 Trait Collection 与 Auto Layout 的协同工作之前，先简要回顾一下 Auto Layout 的基本概念。Auto Layout 是 iOS 开发中用于创建自适应用户界面的一种布局系统。它通过定义视图之间的约束关系来确定视图的位置和大小。
约束可以分为以下几种类型：
- 对齐约束：例如将一个视图的左边缘与另一个视图的左边缘对齐。
- 尺寸约束：指定视图的宽度、高度或长宽比。
- 间距约束：定义两个视图之间的间距。
通过组合这些约束，开发者可以创建出在不同设备屏幕尺寸和方向下都能正确显示的界面。
5.2 Size Class 与 Auto Layout 结合
Size Class 与 Auto Layout 紧密结合，使得开发者能够为不同的 Size Class 定义不同的布局。在 Interface Builder 中，可以为不同的 Size Class 分别设置视图的约束。例如，在 iPhone 的竖屏（Compact Width, Regular Height）下，一个按钮可能位于屏幕底部居中；而在 iPad 的横屏（Regular Width, Regular Height）下，该按钮可能位于屏幕右上角。
在代码中，也可以根据 Size Class 动态修改约束。回到之前的 ViewController 示例代码，我们可以进一步完善，通过不同的约束来实现更复杂的布局切换：
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) UIView *leftView;
@property (nonatomic, strong) UIView *rightView;
@property (nonatomic, strong) NSLayoutConstraint *leftViewWidthConstraint;
@property (nonatomic, strong) NSLayoutConstraint *leftViewTrailingConstraint;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.leftView = [[UIView alloc] init];
self.leftView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.leftView];
self.rightView = [[UIView alloc] init];
self.rightView.backgroundColor = [UIColor blueColor];
[self.view addSubview:self.rightView];
[self.leftView.translatesAutoresizingMaskIntoConstraints setValue:@NO];
[self.rightView.translatesAutoresizingMaskIntoConstraints setValue:@NO];
NSLayoutConstraint *leftViewLeadingConstraint = [NSLayoutConstraint constraintWithItem:self.leftView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:20];
NSLayoutConstraint *leftViewTopConstraint = [NSLayoutConstraint constraintWithItem:self.leftView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:20];
self.leftViewTrailingConstraint = [NSLayoutConstraint constraintWithItem:self.leftView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:self.rightView
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:-20];
NSLayoutConstraint *rightViewTopConstraint = [NSLayoutConstraint constraintWithItem:self.rightView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:20];
NSLayoutConstraint *rightViewTrailingConstraint = [NSLayoutConstraint constraintWithItem:self.rightView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:-20];
NSLayoutConstraint *rightViewBottomConstraint = [NSLayoutConstraint constraintWithItem:self.rightView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-20];
self.leftViewWidthConstraint = [NSLayoutConstraint constraintWithItem:self.leftView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:100];
[self.view addConstraints:@[leftViewLeadingConstraint, leftViewTopConstraint, self.leftViewTrailingConstraint, rightViewTopConstraint, rightViewTrailingConstraint, rightViewBottomConstraint, self.leftViewWidthConstraint]];
}
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
[super traitCollectionDidChange:previousTraitCollection];
if (self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassRegular) {
self.leftViewWidthConstraint.constant = 200;
[self.view removeConstraint:self.leftViewTrailingConstraint];
NSLayoutConstraint *newLeftViewTrailingConstraint = [NSLayoutConstraint constraintWithItem:self.leftView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:-20];
[self.view addConstraint:newLeftViewTrailingConstraint];
} else {
self.leftViewWidthConstraint.constant = 100;
[self.view removeConstraint:self.leftViewTrailingConstraint];
self.leftViewTrailingConstraint = [NSLayoutConstraint constraintWithItem:self.leftView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:self.rightView
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:-20];
[self.view addConstraint:self.leftViewTrailingConstraint];
}
[self.view layoutIfNeeded];
}
@end
在上述代码中，ViewController 根据 horizontalSizeClass 的变化，不仅调整了 leftView 的宽度，还通过添加和移除约束来改变 leftView 的 trailing 约束，从而实现了不同 Size Class 下的布局切换。
5.3 Trait Collection 与 Auto Layout 中的优先级
在 Auto Layout 中，每个约束都有一个优先级（Priority）。优先级用于解决约束之间的冲突，当多个约束不能同时满足时，优先级高的约束会优先得到满足。
Trait Collection 与约束优先级结合，可以实现更精细的布局控制。例如，在小尺寸屏幕（Compact Width, Compact Height）下，可能希望某些视图的尺寸约束优先级较高，以确保这些视图在有限的空间内能够正确显示；而在大尺寸屏幕（Regular Width, Regular Height）下，其他的间距约束或对齐约束优先级可能更高。
假设我们有一个视图 mainView，在不同的 Size Class 下，希望 mainView 的宽度约束和高度约束的优先级不同：
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) UIView *mainView;
@property (nonatomic, strong) NSLayoutConstraint *mainViewWidthConstraint;
@property (nonatomic, strong) NSLayoutConstraint *mainViewHeightConstraint;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.mainView = [[UIView alloc] init];
self.mainView.backgroundColor = [UIColor greenColor];
[self.view addSubview:self.mainView];
[self.mainView.translatesAutoresizingMaskIntoConstraints setValue:@NO];
self.mainViewWidthConstraint = [NSLayoutConstraint constraintWithItem:self.mainView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:200];
self.mainViewHeightConstraint = [NSLayoutConstraint constraintWithItem:self.mainView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:100];
[self.view addConstraints:@[self.mainViewWidthConstraint, self.mainViewHeightConstraint]];
}
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
[super traitCollectionDidChange:previousTraitCollection];
if (self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassCompact) {
self.mainViewWidthConstraint.priority = UILayoutPriorityRequired;
self.mainViewHeightConstraint.priority = UILayoutPriorityDefaultLow;
} else {
self.mainViewWidthConstraint.priority = UILayoutPriorityDefaultHigh;
self.mainViewHeightConstraint.priority = UILayoutPriorityRequired;
}
[self.view layoutIfNeeded];
}
@end
在上述代码中，根据 horizontalSizeClass 的不同，调整了 mainView 的宽度约束和高度约束的优先级。在紧凑宽度的 Size Class 下，宽度约束优先级为最高（UILayoutPriorityRequired），高度约束优先级较低；而在常规宽度的 Size Class 下，高度约束优先级为最高，宽度约束优先级为较高（UILayoutPriorityDefaultHigh）。这样可以确保在不同的 Size Class 下，mainView 的布局能够根据空间情况进行合理调整。
通过 Size Class、Trait Collection 与 Auto Layout 的协同工作，开发者能够创建出在各种 iOS 设备上都能提供良好用户体验的自适应界面。无论是简单的布局调整还是复杂的多特征处理，都可以通过这些技术的结合来实现。在实际开发中，需要根据应用的具体需求和设计，灵活运用这些技术，以打造出高效、美观且易用的应用界面。