【Masonry】使用技巧 - 篇一

从别人项目得到的灵感 : 请看以下代码 

 1 UIColor *darkColor = [UIColor colorWithHexString:@"0x28303b"];
　　　　// 1. 确定宽高
 2     CGFloat buttonWidth = kScreen_Width * 0.4;
 3     CGFloat buttonHeight = kScaleFrom_iPhone5_Desgin(38); 6     

　　　　// 2. 设置按钮基本属性
 7     self.registerBtn = ({ 
 8         UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
 9         [button addTarget:self action:@selector(registerBtnClicked) forControlEvents:UIControlEventTouchUpInside];
10         
11         button.backgroundColor = darkColor;
12         button.titleLabel.font = [UIFont boldSystemFontOfSize:20];
13         [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
14         [button setTitle:@"注册" forState:UIControlStateNormal];
15         
16         button.layer.masksToBounds = YES;
17         button.layer.cornerRadius = buttonHeight/2;
18         button;
19     });
20     self.loginBtn = ({ 
21         UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
22         [button addTarget:self action:@selector(loginBtnClicked) forControlEvents:UIControlEventTouchUpInside];
23         
24         button.backgroundColor = [UIColor clearColor];
25         button.titleLabel.font = [UIFont boldSystemFontOfSize:20];
26         [button setTitleColor:darkColor forState:UIControlStateNormal];
27         [button setTitle:@"登录" forState:UIControlStateNormal];
28         
29         button.layer.masksToBounds = YES;
30         button.layer.cornerRadius = buttonHeight/2;
31         button.layer.borderWidth = 1.0;
32         button.layer.borderColor = darkColor.CGColor;
33         button;
34     });
35     
　　　　// 3.添加控件
36     [self.view addSubview:self.registerBtn];
37     [self.view addSubview:self.loginBtn];
38     
　　　　// 4.设置约束
39     [self.registerBtn mas_makeConstraints:^(MASConstraintMaker *make) {
40         make.size.mas_equalTo(CGSizeMake(buttonWidth, buttonHeight)); 
41         make.right.equalTo(self.view.mas_centerX).offset(-paddingToCenter);
42         make.bottom.equalTo(self.view).offset(-paddingToBottom);
43     }];
44     [self.loginBtn mas_makeConstraints:^(MASConstraintMaker *make) {
45         make.size.mas_equalTo(CGSizeMake(buttonWidth, buttonHeight));
46         make.left.equalTo(self.view.mas_centerX).offset(paddingToCenter);
47         make.bottom.equalTo(self.view).offset(-paddingToBottom);
48     }];

 

四部曲,一气呵成, 语义也非常清晰.

接下来可以详细看看Masonry框架的用法. 

总的来说，我觉得Autolayout的关键就是“Constraint（约束）”。其实就是以下两点：

  1. 从显式设置frame的属性，到利用约束控制View的大小、位置。
  2. 思考如何布局时，重点从单个的View，到整体所有View之间的相互关系。

既然没有了具体设置View的frame属性，也就是说，系统会在运行时，通过我们设定的“约束”，计算出每个View的frame，再去绘制屏幕内容。

也就是说，我们设置的Constraint，要能体现出View的位置（x、y坐标）、大小（宽高）。

所以千言万语就是一句话 , 想想你的UI是怎样设定Frame的

 

 

解释一些句子 : 

 

 

posted @ 2016-03-01 10:24  Travin-C  阅读(566)  评论(0)  编辑  收藏  举报