面试题：Objective-C在Mac OS界面设计中如何处理视图的布局约束

Question

在Mac OS的界面设计里，使用Objective-C时，通常有哪些方式来设置视图之间的布局约束？请举例说明Masonry框架在Objective-C中处理布局约束的基本用法。

Answer 1

在Mac OS界面设计使用Objective-C设置视图布局约束的方式

1. 使用Interface Builder（IB）：
   • 在Xcode的Interface Builder中，可以通过可视化的方式添加约束。例如，选中一个视图，然后使用Interface Builder的对齐和分布工具，如水平居中、垂直居中、与父视图边缘保持一定距离等，系统会自动生成相应的约束代码。
   • 还可以通过在IB中打开尺寸检查器（Size Inspector），手动设置视图的X、Y坐标，宽度和高度等约束值。
2. 使用NSLayoutConstraint类直接编写代码：
   • 创建约束对象并添加到视图。例如，假设有两个视图view1和view2，要使view2在view1下方且保持一定间距：

   NSView *view1 = [[NSView alloc] init];
   NSView *view2 = [[NSView alloc] init];
   [self.view addSubview:view1];
   [self.view addSubview:view2];
   
   // 使view2的顶部在view1底部下方10点
   NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view2
                                                               attribute:NSLayoutAttributeTop
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:view1
                                                               attribute:NSLayoutAttributeBottom
                                                              multiplier:1.0
                                                                constant:10.0];
   [self.view addConstraint:constraint];
   

3. 使用第三方布局框架，如Masonry：它简化了约束的编写，以链式调用的方式设置约束，使代码更简洁易读。

Masonry框架在Objective - C中处理布局约束的基本用法

1. 添加依赖：在项目中导入Masonry库，可以通过CocoaPods添加，在Podfile中添加pod 'Masonry'，然后执行pod install。
2. 基本布局设置：
   • 设置视图大小：

   #import "Masonry.h"
   NSView *view = [[NSView alloc] init];
   [self.view addSubview:view];
   [view mas_makeConstraints:^(MASConstraintMaker *make) {
       make.width.mas_equalTo(200);
       make.height.mas_equalTo(100);
   }];
   

   • 设置视图位置：

   NSView *view1 = [[NSView alloc] init];
   NSView *view2 = [[NSView alloc] init];
   [self.view addSubview:view1];
   [self.view addSubview:view2];
   [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
       make.top.equalTo(self.view.mas_top).offset(20);
       make.left.equalTo(self.view.mas_left).offset(20);
   }];
   [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
       make.top.equalTo(view1.mas_bottom).offset(20);
       make.left.equalTo(self.view.mas_left).offset(20);
   }];
   

   • 使视图在父视图中居中：

   NSView *centerView = [[NSView alloc] init];
   [self.view addSubview:centerView];
   [centerView mas_makeConstraints:^(MASConstraintMaker *make) {
       make.centerX.equalTo(self.view.mas_centerX);
       make.centerY.equalTo(self.view.mas_centerY);
   }];