剖析 Masonry 等间隔排列多个控件的奥秘：巧妙布局与自由定制

2023-11-05 18:19:48

Masonry 简介

Masonry 是 iOS 开发中一款颇受欢迎的 Auto Layout 框架。它可以帮助开发者轻松创建复杂的界面布局，并支持多种约束类型，如等宽高、等间隔等。使用 Masonry，开发者可以快速构建出美观且响应式强的用户界面。

等间隔排列控件

Masonry 提供了两种 API 来实现等间隔排列控件：固定间隔不固定宽高和固定宽高不固定间隔。

固定间隔不固定宽高

当需要控件等间隔排列时，可以使用 mas_makeConstraints 方法设置控件之间的间距。例如，以下代码将三个控件水平排列，每个控件之间间隔 10 像素：

[self.view mas_makeConstraints:^(MASConstraintMaker *make) {
  make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];

[self.view1 mas_makeConstraints:^(MASConstraintMaker *make) {
  make.left.equalTo(self.view).with.offset(10);
  make.top.equalTo(self.view).with.offset(10);
  make.width.equalTo(@100);
  make.height.equalTo(@100);
};

[self.view2 mas_makeConstraints:^(MASConstraintMaker *make) {
  make.left.equalTo(self.view1.mas_right).with.offset(10);
  make.top.equalTo(self.view).with.offset(10);
  make.width.equalTo(@100);
  make.height.equalTo(@100);
};

[self.view3 mas_makeConstraints:^(MASConstraintMaker *make) {
  make.left.equalTo(self.view2.mas_right).with.offset(10);
  make.top.equalTo(self.view).with.offset(10);
  make.width.equalTo(@100);
  make.height.equalTo(@100);
};

固定宽高不固定间隔

当需要控件等宽高排列时，可以使用 mas_distributeViewsAlongAxis 方法。例如，以下代码将三个控件水平排列，每个控件宽度为 100 像素，高度为 100 像素，控件之间等宽间隔：

[self.view mas_makeConstraints:^(MASConstraintMaker *make) {
  make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
}];

[self.view1 mas_makeConstraints:^(MASConstraintMaker *make) {
  make.left.equalTo(self.view).with.offset(10);
  make.top.equalTo(self.view).with.offset(10);
  make.width.equalTo(@100);
  make.height.equalTo(@100);
};

[self.view2 mas_makeConstraints:^(MASConstraintMaker *make) {
  make.left.equalTo(self.view1.mas_right).with.offset(10);
  make.top.equalTo(self.view).with.offset(10);
  make.width.equalTo(@100);
  make.height.equalTo(@100);
};

[self.view3 mas_makeConstraints:^(MASConstraintMaker *make) {
  make.left.equalTo(self.view2.mas_right).with.offset(10);
  make.top.equalTo(self.view).with.offset(10);
  make.width.equalTo(@100);
  make.height.equalTo(@100);
};

[self.view distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:10 leadSpacing:10 tailSpacing:10];