Masonry学习之Distribute View

最新推荐文章于 2026-03-08 03:39:14 发布

原创最新推荐文章于 2026-03-08 03:39:14 发布 · 2.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

Masonry 专栏收录该内容

14 篇文章

订阅专栏

本文通过四个实例展示了使用Masonry实现视图的同轴等间距分布布局，包括水平和垂直分布。详细介绍了不同方式下设置视图间距、头部和尾部间距的方法，强调了在水平和垂直布局中参数的计算方向差异。

四个效果图：
这里写图片描述

这里写图片描述

综合上面几幅图，该例子要展示的就是多个视图的同轴等间距分布布局。

代码说明：
四个视图对象存储到数组中，以四种不同的方式进行布局。

方式一：

[arr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:5 tailSpacing:5];
            [arr makeConstraints:^(MASConstraintMaker *make) {
                make.top.equalTo(@60);
                make.height.equalTo(@60);
            }];

视图组水平分布布局，视图间固定间距20，视图组头部间距5，视图组尾部间距5，视图组top间距60，视图组高度60。

方式二：

[arr mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedSpacing:20 leadSpacing:5 tailSpacing:5];
            [arr makeConstraints:^(MASConstraintMaker *make) {
                make.left.equalTo(@0);
                make.width.equalTo(@60);
            }];

视图组垂直分布布局，视图间固定间距20，视图组头部间距5，视图组尾部间距5，视图组left间距0，视图组宽度60。

方式三：

[arr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:30 leadSpacing:200 tailSpacing:30];
            [arr makeConstraints:^(MASConstraintMaker *make) {
                make.top.equalTo(@60);
                make.height.equalTo(@60);
            }];

视图组水平分布布局，视图固定长度30，视图组头部间距200，视图组尾部间距30，视图组top间距60，视图组高度60。

方式四：

[arr mas_distributeViewsAlongAxis:MASAxisTypeVertical withFixedItemLength:30 leadSpacing:30 tailSpacing:200];
            [arr makeConstraints:^(MASConstraintMaker *make) {
                make.left.equalTo(@0);
                make.width.equalTo(@60);
            }];

视图组垂直分布布局，视图固定长度30，视图组头部间距30，视图组尾部间距200，视图组左间距0，视图组宽度60。

注意：

视图组等间距分布布局方法：

- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedSpacing:(CGFloat)fixedSpacing leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;

- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedItemLength:(CGFloat)fixedItemLength leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;