面试题：Objective-C 在 iOS 用户界面适配中如何处理不同屏幕尺寸的布局

Question

在 iOS 开发中，屏幕尺寸多种多样，使用Objective-C 进行用户界面适配时，阐述如何通过Auto Layout或Masonry框架来处理不同屏幕尺寸下的视图布局，举例说明关键代码实现。

Answer 1

使用Auto Layout进行界面适配

1. 纯代码方式：
   • 首先导入 UIKit 框架。
   • 创建视图并添加到父视图。
   • 使用 NSLayoutConstraint 类来创建约束。例如，创建一个红色的正方形视图并使其居中显示在屏幕上：

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIView *squareView = [[UIView alloc] init];
    squareView.backgroundColor = [UIColor redColor];
    [self.view addSubview:squareView];
    
    // 水平居中约束
    NSLayoutConstraint *centerXConstraint = [NSLayoutConstraint constraintWithItem:squareView
                                                                      attribute:NSLayoutAttributeCenterX
                                                                      relatedBy:NSLayoutRelationEqual
                                                                         toItem:self.view
                                                                      attribute:NSLayoutAttributeCenterX
                                                                     multiplier:1.0
                                                                       constant:0.0];
    
    // 垂直居中约束
    NSLayoutConstraint *centerYConstraint = [NSLayoutConstraint constraintWithItem:squareView
                                                                      attribute:NSLayoutAttributeCenterY
                                                                      relatedBy:NSLayoutRelationEqual
                                                                         toItem:self.view
                                                                      attribute:NSLayoutAttributeCenterY
                                                                     multiplier:1.0
                                                                       constant:0.0];
    
    // 宽度约束
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:squareView
                                                                     attribute:NSLayoutAttributeWidth
                                                                     relatedBy:NSLayoutRelationEqual
                                                                        toItem:nil
                                                                     attribute:NSLayoutAttributeNotAnAttribute
                                                                    multiplier:1.0
                                                                      constant:200.0];
    
    // 高度约束，使其为正方形
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:squareView
                                                                      attribute:NSLayoutAttributeHeight
                                                                      relatedBy:NSLayoutRelationEqual
                                                                         toItem:squareView
                                                                      attribute:NSLayoutAttributeWidth
                                                                     multiplier:1.0
                                                                       constant:0.0];
    
    [self.view addConstraints:@[centerXConstraint, centerYConstraint, widthConstraint, heightConstraint]];
    
    squareView.translatesAutoresizingMaskIntoConstraints = NO;
}

@end

2. 通过Interface Builder：
   • 在Storyboard或XIB中拖入视图。
   • 选中视图，使用Interface Builder的可视化工具添加约束。例如，选中一个按钮，点击 Pin 按钮添加水平和垂直间距约束到父视图边缘，还可以点击 Align 按钮设置居中对齐等。

使用Masonry框架进行界面适配

1. 导入Masonry框架：
   • 如果使用CocoaPods，在 Podfile 中添加 pod 'Masonry'，然后执行 pod install。
2. 关键代码实现：
   • 同样创建一个红色正方形视图并使其居中显示：

#import "ViewController.h"
#import "Masonry.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIView *squareView = [[UIView alloc] init];
    squareView.backgroundColor = [UIColor redColor];
    [self.view addSubview:squareView];
    
    [squareView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view.mas_centerX);
        make.centerY.equalTo(self.view.mas_centerY);
        make.width.mas_equalTo(200);
        make.height.equalTo(squareView.mas_width);
    }];
}

@end

Masonry使用链式语法，使布局代码更加简洁易读，通过 mas_makeConstraints 方法设置视图的各种约束关系，如 equalTo 表示相等关系，mas_equalTo 用于设置具体数值。