黑马程序员技术交流社区

标题: 【iOS技术分享】Autolayout不用发愁：教你使用Masonry（二） [打印本页]

---

作者: Simpon    时间: 2016-5-6 17:45
标题: 【iOS技术分享】Autolayout不用发愁：教你使用Masonry（二）


接下来在分享3个小案例：
1. [初级] 让两个高度为150的view垂直居中且等宽且等间隔排列 间隔为10(自动计算其宽度)

1. int padding1 = 10;
   
2. [sv2 mas_makeConstraints:^(MASConstraintMaker *make) {
   
3.     make.centerY.mas_equalTo(sv.mas_centerY);
   
4.     make.left.equalTo(sv.mas_left).with.offset(padding1);
   
5.     make.right.equalTo(sv3.mas_left).with.offset(-padding1);
   
6.     make.height.mas_equalTo(@150);
   
7.     make.width.equalTo(sv3);
   
8. }];
   
9. [sv3 mas_makeConstraints:^(MASConstraintMaker *make) {
   
10.     make.centerY.mas_equalTo(sv.mas_centerY);
    
11.     make.left.equalTo(sv2.mas_right).with.offset(padding1);
    
12.     make.right.equalTo(sv.mas_right).with.offset(-padding1);
    
13.     make.height.mas_equalTo(@150);
    
14.     make.width.equalTo(sv2);
    
15. }];

复制代码

代码效果


这里我们在两个子view之间互相设置的约束 可以看到他们的宽度在约束下自动的被计算出来了
2. [中级] 在UIScrollView顺序排列一些view并自动计算contentSize

1. UIScrollView *scrollView = [UIScrollView new];
   
2. scrollView.backgroundColor = [UIColor whiteColor];
   
3. [sv addSubview:scrollView];
   
4. [scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
   
5.     make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(5,5,5,5));
   
6. }];
   
7. UIView *container = [UIView new];
   
8. [scrollView addSubview:container];
   
9. [container mas_makeConstraints:^(MASConstraintMaker *make) {
   
10.     make.edges.equalTo(scrollView);
    
11.     make.width.equalTo(scrollView);
    
12. }];
    
13. int count = 10;
    
14. UIView *lastView = nil;
    
15. for ( int i = 1 ; i <= count ; ++i )
    
16. {
    
17.     UIView *subv = [UIView new];
    
18.     [container addSubview:subv];
    
19.     subv.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )
    
20.                                       saturation:( arc4random() % 128 / 256.0 ) + 0.5
    
21.                                       brightness:( arc4random() % 128 / 256.0 ) + 0.5
    
22.                                            alpha:1];
    
23.      
    
24.     [subv mas_makeConstraints:^(MASConstraintMaker *make) {
    
25.         make.left.and.right.equalTo(container);
    
26.         make.height.mas_equalTo(@(20*i));
    
27.          
    
28.         if ( lastView )
    
29.         {
    
30.             make.top.mas_equalTo(lastView.mas_bottom);
    
31.         }
    
32.         else
    
33.         {
    
34.             make.top.mas_equalTo(container.mas_top);
    
35.         }
    
36.     }];
    
37.      
    
38.     lastView = subv;
    
39. }
    
40. [container mas_makeConstraints:^(MASConstraintMaker *make) {
    
41.     make.bottom.equalTo(lastView.mas_bottom);
    
42. }];

复制代码

代码效果：

尾部效果：



从scrollView的scrollIndicator可以看出 scrollView的内部已如我们所想排列好了
这里的关键就在于container这个view起到了一个中间层的作用 能够自动的计算uiscrollView的contentSize
3. [高级] 横向或者纵向等间隙的排列一组view
很遗憾 autoLayout并没有直接提供等间隙排列的方法(Masonry的官方demo中也没有对应的案例) 但是参考案例3 我们可以通过一个小技巧来实现这个目的 为此我写了一个Category

1. @implementation UIView(Masonry_LJC)
   
2. - (void) distributeSpacingHorizontallyWith:(NSArray*)views
   
3. {
   
4.     NSMutableArray *spaces = [NSMutableArray arrayWithCapacity:views.count+1];
   
5.      
   
6.     for ( int i = 0 ; i < views.count+1 ; ++i )
   
7.     {
   
8.         UIView *v = [UIView new];
   
9.         [spaces addObject:v];
   
10.         [self addSubview:v];
    
11.          
    
12.         [v mas_makeConstraints:^(MASConstraintMaker *make) {
    
13.             make.width.equalTo(v.mas_height);
    
14.         }];
    
15.     }   
    
16.      
    
17.     UIView *v0 = spaces[0];
    
18.      
    
19.     __weak __typeof(&*self)ws = self;
    
20.      
    
21.     [v0 mas_makeConstraints:^(MASConstraintMaker *make) {
    
22.         make.left.equalTo(ws.mas_left);
    
23.         make.centerY.equalTo(((UIView*)views[0]).mas_centerY);
    
24.     }];
    
25.      
    
26.     UIView *lastSpace = v0;
    
27.     for ( int i = 0 ; i < views.count; ++i )
    
28.     {
    
29.         UIView *obj = views[i];
    
30.         UIView *space = spaces[i+1];
    
31.          
    
32.         [obj mas_makeConstraints:^(MASConstraintMaker *make) {
    
33.             make.left.equalTo(lastSpace.mas_right);
    
34.         }];
    
35.          
    
36.         [space mas_makeConstraints:^(MASConstraintMaker *make) {
    
37.             make.left.equalTo(obj.mas_right);
    
38.             make.centerY.equalTo(obj.mas_centerY);
    
39.             make.width.equalTo(v0);
    
40.         }];
    
41.          
    
42.         lastSpace = space;
    
43.     }
    
44.      
    
45.     [lastSpace mas_makeConstraints:^(MASConstraintMaker *make) {
    
46.         make.right.equalTo(ws.mas_right);
    
47.     }];
    
48.      
    
49. }
    
50. - (void) distributeSpacingVerticallyWith:(NSArray*)views
    
51. {
    
52.     NSMutableArray *spaces = [NSMutableArray arrayWithCapacity:views.count+1];
    
53.      
    
54.     for ( int i = 0 ; i < views.count+1 ; ++i )
    
55.     {
    
56.         UIView *v = [UIView new];
    
57.         [spaces addObject:v];
    
58.         [self addSubview:v];
    
59.          
    
60.         [v mas_makeConstraints:^(MASConstraintMaker *make) {
    
61.             make.width.equalTo(v.mas_height);
    
62.         }];
    
63.     }
    
64.      
    
65.      
    
66.     UIView *v0 = spaces[0];
    
67.      
    
68.     __weak __typeof(&*self)ws = self;
    
69.      
    
70.     [v0 mas_makeConstraints:^(MASConstraintMaker *make) {
    
71.         make.top.equalTo(ws.mas_top);
    
72.         make.centerX.equalTo(((UIView*)views[0]).mas_centerX);
    
73.     }];
    
74.      
    
75.     UIView *lastSpace = v0;
    
76.     for ( int i = 0 ; i < views.count; ++i )
    
77.     {
    
78.         UIView *obj = views[i];
    
79.         UIView *space = spaces[i+1];
    
80.          
    
81.         [obj mas_makeConstraints:^(MASConstraintMaker *make) {
    
82.             make.top.equalTo(lastSpace.mas_bottom);
    
83.         }];
    
84.          
    
85.         [space mas_makeConstraints:^(MASConstraintMaker *make) {
    
86.             make.top.equalTo(obj.mas_bottom);
    
87.             make.centerX.equalTo(obj.mas_centerX);
    
88.             make.height.equalTo(v0);
    
89.         }];
    
90.          
    
91.         lastSpace = space;
    
92.     }
    
93.      
    
94.     [lastSpace mas_makeConstraints:^(MASConstraintMaker *make) {
    
95.         make.bottom.equalTo(ws.mas_bottom);
    
96.     }];
    
97. }
    
98. @end

复制代码

简单的来测试一下

1. UIView *sv11 = [UIView new];
   
2. UIView *sv12 = [UIView new];
   
3. UIView *sv13 = [UIView new];
   
4. UIView *sv21 = [UIView new];
   
5. UIView *sv31 = [UIView new];
   
6. sv11.backgroundColor = [UIColor redColor];
   
7. sv12.backgroundColor = [UIColor redColor];
   
8. sv13.backgroundColor = [UIColor redColor];
   
9. sv21.backgroundColor = [UIColor redColor];
   
10. sv31.backgroundColor = [UIColor redColor];
    
11. [sv addSubview:sv11];
    
12. [sv addSubview:sv12];
    
13. [sv addSubview:sv13];
    
14. [sv addSubview:sv21];
    
15. [sv addSubview:sv31];
    
16. //给予不同的大小 测试效果
    
17. [sv11 mas_makeConstraints:^(MASConstraintMaker *make) {
    
18.     make.centerY.equalTo(@[sv12,sv13]);
    
19.     make.centerX.equalTo(@[sv21,sv31]);
    
20.     make.size.mas_equalTo(CGSizeMake(40, 40));
    
21. }];
    
22. [sv12 mas_makeConstraints:^(MASConstraintMaker *make) {
    
23.     make.size.mas_equalTo(CGSizeMake(70, 20));
    
24. }];
    
25. [sv13 mas_makeConstraints:^(MASConstraintMaker *make) {
    
26.     make.size.mas_equalTo(CGSizeMake(50, 50));
    
27. }];
    
28. [sv21 mas_makeConstraints:^(MASConstraintMaker *make) {
    
29.     make.size.mas_equalTo(CGSizeMake(50, 20));
    
30. }];
    
31. [sv31 mas_makeConstraints:^(MASConstraintMaker *make) {
    
32.     make.size.mas_equalTo(CGSizeMake(40, 60));
    
33. }];
    
34. [sv distributeSpacingHorizontallyWith:@[sv11,sv12,sv13]];
    
35. [sv distributeSpacingVerticallyWith:@[sv11,sv21,sv31]];
    
36. [sv showPlaceHolderWithAllSubviews];
    
37. [sv hidePlaceHolder];

复制代码

代码效果


perfect! 简洁明了的达到了我们所要的效果
这里所用的技巧就是 使用空白的占位view来填充我们目标view的旁边 这点通过图上的空白标注可以看出来
Masonry源码下载

精华推荐:

黑马程序员：为苹果与iOS开发者的前景正名

与君共勉 --- 记黑马22期同学成长经验。

【持续更新】2016年最全最新的iOS视频+软件+源码+面试/技术

关于iOS 10最新的课程视频及demo第三弹，火速发布了

---

作者: wendaogds    时间: 2016-5-7 23:01
厉害厉害,真犀利/.666哥

---

作者: heima_heimahaha    时间: 2016-5-20 21:03
Autolayout不用发愁

---

作者: 爱文字的青春    时间: 2017-3-7 14:51
搞起来  学起来  大家一起来

---

作者: 18150091472    时间: 2017-5-11 16:56
6666666666

---

作者: li010    时间: 2017-9-7 10:36
fffffffffffffffffffffffff

---

作者: baby14    时间: 2018-7-5 07:23
多谢分享

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2