zoukankan html css js c++ java

IOS Masonry的基本使用

Masonry是一个轻量级的布局框架，拥有自己的描述语法，采用更优雅的链式语法封装自动布局，简洁明了并具有高可读性，而且同时支持 iOS 和 Max OS X。Masonry是一个用代码写iOS或OS界面的库，可以代替Auto layout。Masonry的github地址：https://github.com/SnapKit/Masonry

本章内容

- Masonry配置

- Masonry使用

- Masonry实例

Masonry配置

- 推荐使用pods方式引入类库，pod 'Masonry'，若不知道pod如何使用，情况我的另一篇文章：提高ios开发效率的工具

- 引入头文件 #import "Masonry.h"

Masonry使用讲解

mas_makeConstraints 是给view添加约束，约束有几种，分别是边距，宽，高，左上右下距离，基准线。添加过约束后可以有修正，修正有offset（位移）修正和multipliedBy（倍率）修正。

语法一般是 make.equalTo or make.greaterThanOrEqualTo or make.lessThanOrEqualTo + 倍数和位移修正。

注意点1：使用 mas_makeConstraints方法的元素必须事先添加到父元素的中，例如[self.view addSubview:view];

注意点2： masequalTo 和 equalTo 区别：masequalTo 比equalTo多了类型转换操作，一般来说，大多数时候两个方法都是通用的，但是对于数值元素使用mas_equalTo。对于对象或是多个属性的处理，使用equalTo。特别是多个属性时，必须使用equalTo,例如 make.left.and.right.equalTo(self.view);

注意点3: 注意到方法with和and,这连个方法其实没有做任何操作，方法只是返回对象本身，这这个方法的左右完全是为了方法写的时候的可读性。make.left.and.right.equalTo(self.view);和make.left.right.equalTo(self.view);是完全一样的，但是明显的加了and方法的语句可读性更好点。

Masonry初级使用例子

 1 // exp1: 中心点与self.view相同，宽度为400*400
 2 -(void)exp1{
 3     UIView *view = [UIView new];
 4     [view setBackgroundColor:[UIColor redColor]];
 5     [self.view addSubview:view];
 6     [view mas_makeConstraints:^(MASConstraintMaker *make) {
 7          make.center.equalTo(self.view);
 8          make.size.mas_equalTo(CGSizeMake(400,400));
 9     }];
10 }
11 //exp2: 上下左右边距都为10
12 -(void)exp2{
13     UIView *view = [UIView new];
14     [view setBackgroundColor:[UIColor redColor]];
15     [self.view addSubview:view];
16     [view mas_makeConstraints:^(MASConstraintMaker *make) {
17         make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
18         //  make.left.equalTo(self.view).with.offset(10);
19         //  make.right.equalTo(self.view).with.offset(-10);
20         //  make.top.equalTo(self.view).with.offset(10);
21         //  make.bottom.equalTo(self.view).with.offset(-10);
22     }];
23 }
24 //exp3 让两个高度为150的view垂直居中且等宽且等间隔排列 间隔为10
25 -(void)exp3{
26     UIView *view1 = [UIView new];
27     [view1 setBackgroundColor:[UIColor redColor]];
28     [self.view addSubview:view1];
29     UIView *view2 = [UIView new];
30     [view2 setBackgroundColor:[UIColor redColor]];
31     [self.view addSubview:view2];
32     [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
33         make.centerY.mas_equalTo(self.view.mas_centerY);
34         make.height.mas_equalTo(150);
35         make.width.mas_equalTo(view2.mas_width);
36         make.left.mas_equalTo(self.view.mas_left).with.offset(10);
37         make.right.mas_equalTo(view2.mas_left).offset(-10);
38     }];
39     [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
40         make.centerY.mas_equalTo(self.view.mas_centerY);
41         make.height.mas_equalTo(150);
42         make.width.mas_equalTo(view1.mas_width);
43         make.left.mas_equalTo(view1.mas_right).with.offset(10);
44         make.right.equalTo(self.view.mas_right).offset(-10);
45     }];
46 }

Masonry高级使用例子1

iOS计算器使用Masorny布局：

  1 //高级布局练习 ios自带计算器布局
  2 -(void)exp4{
  3     //申明区域，displayView是显示区域，keyboardView是键盘区域
  4     UIView *displayView = [UIView new];
  5     [displayView setBackgroundColor:[UIColor blackColor]];
  6     [self.view addSubview:displayView];
  7     UIView *keyboardView = [UIView new];
  8     [self.view addSubview:keyboardView];
  9     //先按1：3分割 displView（显示结果区域）和 keyboardView（键盘区域）
 10     [displayView mas_makeConstraints:^(MASConstraintMaker *make) {
 11         make.top.equalTo(self.view.mas_top);
 12         make.left.and.right.equalTo(self.view);
 13         make.height.equalTo(keyboardView).multipliedBy(0.3f);
 14     }];
 15     [keyboardView mas_makeConstraints:^(MASConstraintMaker *make) {
 16         make.top.equalTo(displayView.mas_bottom);
 17         make.bottom.equalTo(self.view.mas_bottom);
 18         make.left.and.right.equalTo(self.view);
 19     }];
 20     //设置显示位置的数字为0
 21     UILabel *displayNum = [[UILabel alloc]init];
 22     [displayView addSubview:displayNum];
 23     displayNum.text = @"0";
 24     displayNum.font = [UIFont fontWithName:@"HeiTi SC" size:70];
 25     displayNum.textColor = [UIColor whiteColor];
 26     displayNum.textAlignment = NSTextAlignmentRight;
 27     [displayNum mas_makeConstraints:^(MASConstraintMaker *make) {
 28         make.left.and.right.equalTo(displayView).with.offset(-10);
 29         make.bottom.equalTo(displayView).with.offset(-10);
 30     }];
 31     //定义键盘键名称，？号代表合并的单元格
 32     NSArray *keys = @[@"AC",@"+/-",@"%",@"÷"
 33                      ,@"7",@"8",@"9",@"x"
 34                      ,@"4",@"5",@"6",@"-"
 35                      ,@"1",@"2",@"3",@"+"
 36                      ,@"0",@"?",@".",@"="];
 37     int indexOfKeys = 0;
 38     for (NSString *key in keys){
 39         //循环所有键
 40         indexOfKeys++;
 41         int rowNum = indexOfKeys %4 ==0? indexOfKeys/4:indexOfKeys/4 +1;
 42         int colNum = indexOfKeys %4 ==0? 4 :indexOfKeys %4;
 43         NSLog(@"index is:%d and row:%d,col:%d",indexOfKeys,rowNum,colNum);
 44         //键样式
 45         UIButton *keyView = [UIButton buttonWithType:UIButtonTypeCustom];
 46         [keyboardView addSubview:keyView];
 47         [keyView setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
 48         [keyView setTitle:key forState:UIControlStateNormal];
 49         [keyView.layer setBorderWidth:1];
 50         [keyView.layer setBorderColor:[[UIColor blackColor]CGColor]];
 51         [keyView.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldItalicMT" size:30]];
 52         //键约束
 53         [keyView mas_makeConstraints:^(MASConstraintMaker *make) {
 54             //处理 0 合并单元格
 55             if([key isEqualToString:@"0"] || [key isEqualToString:@"?"] ){
 56                 if([key isEqualToString:@"0"]){
 57                     [keyView mas_makeConstraints:^(MASConstraintMaker *make) {
 58                         make.height.equalTo(keyboardView.mas_height).with.multipliedBy(.2f);
 59                         make.width.equalTo(keyboardView.mas_width).multipliedBy(.5);
 60                         make.left.equalTo(keyboardView.mas_left);
 61                         make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.9f);
 62                     }];
 63                 }if([key isEqualToString:@"?"]){
 64                     [keyView removeFromSuperview];
 65                 }
 66             }
 67             //正常的单元格
 68             else{
 69                 make.width.equalTo(keyboardView.mas_width).with.multipliedBy(.25f);
 70                 make.height.equalTo(keyboardView.mas_height).with.multipliedBy(.2f);
 71                 //按照行和列添加约束，这里添加行约束
 72                 switch (rowNum) {
 73                     case 1:
 74                     {
 75                         make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.1f);
 76                         keyView.backgroundColor = [UIColor colorWithRed:205 green:205 blue:205 alpha:1];
 77                     }
 78                         break;
 79                     case 2:
 80                     {
 81                         make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.3f);
 82                     }
 83                         break;
 84                     case 3:
 85                     {
 86                         make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.5f);
 87                     }
 88                         break;
 89                     case 4:
 90                     {
 91                         make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.7f);
 92                     }
 93                         break;
 94                     case 5:
 95                     {
 96                         make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.9f);
 97                     }
 98                         break;
 99                     default:
100                         break;
101                 }
102                 //按照行和列添加约束，这里添加列约束
103                 switch (colNum) {
104                     case 1:
105                     {
106                         make.left.equalTo(keyboardView.mas_left);
107                     }
108                         break;
109                     case 2:
110                     {
111                         make.right.equalTo(keyboardView.mas_centerX);
112                     }
113                         break;
114                     case 3:
115                     {
116                         make.left.equalTo(keyboardView.mas_centerX);
117                     }
118                         break;
119                     case 4:
120                     {
121                         make.right.equalTo(keyboardView.mas_right);
122                         [keyView setBackgroundColor:[UIColor colorWithRed:243 green:127 blue:38 alpha:1]];
123                     }
124                         break;
125                     default:
126                         break;
127                 }
128             }
129         }];
130     }
131 }

本例子使用的baseline去控制高度位置，这似乎不是太准，如果想要精准控制高度位置，可以使用一行一行添加的方法，每次当前行的top去equelTo上一行的bottom。给个提示：

1 for（遍历所有行)
2     for（遍历所以列）
3     //当前行约束根据上一行去设置
4     ......

下一个例子中，使用上面类似的方法

Masonry高级使用例子2

根据设计图，使用masonry布局：

步骤1

步骤2

步骤1

 1 -(void)createUI{
 2     UIView *titleView = [UIView new];
 3     titleView.backgroundColor = [UIColor redColor];
 4     UIView *caredView = [UIView new];
 5     [self.view addSubview:caredView];
 6     UIView *brifeView = [UIView new];
 7     [self.view addSubview:brifeView];
 8     //self.view
 9     self.view.backgroundColor = [UIColor colorWithWhite:0.965 alpha:1.000];
10     //thrm
11     UIImageView *plantThrm = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"defalutPlantReferenceIcon"]];
12     [self.view addSubview:plantThrm];
13     [plantThrm mas_makeConstraints:^(MASConstraintMaker *make) {
14         make.left.and.top.equalTo(self.view).with.offset(10);
15     }];
16     //title
17        [self.view addSubview:titleView];
18        UIImageView *bgTitleView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"bg-plant-reference-title"]];
19     [titleView addSubview:bgTitleView];
20     [titleView mas_makeConstraints:^(MASConstraintMaker *make) {
21         make.right.equalTo(self.view.mas_right);
22         make.left.equalTo(plantThrm.mas_right).with.offset(20);
23         make.centerY.equalTo(plantThrm.mas_centerY);
24    }];
25     [bgTitleView mas_makeConstraints:^(MASConstraintMaker *make) {
26         make.edges.equalTo(titleView);
27     }];
28     UILabel *title = [[UILabel alloc]init];
29     title.textColor =  [UIColor whiteColor];
30     title.font = [UIFont fontWithName:@"Heiti SC" size:26];
31     title.text = _reference.name;
32     [titleView addSubview:title];
33     [title mas_makeConstraints:^(MASConstraintMaker *make) {
34         make.left.equalTo(titleView.mas_left).offset(10);
35         make.width.equalTo(titleView.mas_width);
36         make.centerY.equalTo(titleView.mas_centerY);
37     }];
38     //植物养护
39     UILabel *caredTitle = [[UILabel alloc]init];
40     caredTitle.textColor =  [UIColor colorWithRed:0.172 green:0.171 blue:0.219 alpha:1.000];
41     caredTitle.font = [UIFont fontWithName:@"Heiti SC" size:10];
42     caredTitle.text = @"植物养护";
43     [self.view addSubview:caredTitle];
44     [caredTitle mas_makeConstraints:^(MASConstraintMaker *make) {
45         make.top.equalTo(plantThrm.mas_bottom).with.offset(20);
46         make.left.and.right.equalTo(self.view).with.offset(10);
47         make.height.mas_equalTo(10);
48     }];
49     //将图层的边框设置为圆脚
50     caredView.layer.cornerRadius = 5;
51     caredView.layer.masksToBounds = YES;
52     //给图层添加一个有色边框
53     caredView.layer.borderWidth = 1;
54     caredView.layer.borderColor = [[UIColor colorWithWhite:0.521 alpha:1.000] CGColor];
55     caredView.backgroundColor = [UIColor whiteColor];
56     [caredView mas_makeConstraints:^(MASConstraintMaker *make) {
57         make.top.equalTo(caredTitle.mas_bottom).with.offset(5);
58         make.left.equalTo(self.view.mas_left).with.offset(10);
59         make.right.equalTo(self.view.mas_right).with.offset(-10);
60         make.height.equalTo(brifeView);
61     }];
62     //植物简介
63     UILabel *brifeTitle = [[UILabel alloc]init];
64     brifeTitle.textColor =  [UIColor colorWithRed:0.172 green:0.171 blue:0.219 alpha:1.000];
65     brifeTitle.font = [UIFont fontWithName:@"Heiti SC" size:10];
66     brifeTitle.text = @"植物简介";
67     [self.view addSubview:brifeTitle];
68     [brifeTitle mas_makeConstraints:^(MASConstraintMaker *make) {
69         make.top.equalTo(caredView.mas_bottom).with.offset(20);
70         make.left.and.right.equalTo(self.view).with.offset(10);
71         make.height.mas_equalTo(10);
72     }];
73     //将图层的边框设置为圆脚
74     brifeView.layer.cornerRadius = 5;
75     brifeView.layer.masksToBounds = YES;
76     //给图层添加一个有色边框
77     brifeView.layer.borderWidth = 1;
78     brifeView.layer.borderColor = [[UIColor colorWithWhite:0.521 alpha:1.000] CGColor];
79     brifeView.backgroundColor = [UIColor whiteColor];
80     [brifeView mas_makeConstraints:^(MASConstraintMaker *make) {
81         make.top.equalTo(brifeTitle.mas_bottom).with.offset(5);
82         make.left.equalTo(self.view.mas_left).with.offset(10);
83         make.right.equalTo(self.view.mas_right).with.offset(-10);
84         make.bottom.equalTo(self.view.mas_bottom).with.offset(-10);
85         make.height.equalTo(caredView);
86     }];
87 }

完成之后如下图步骤1

步骤2,在上面的基础上，增加植物养护部分ui构造的代码，思想是，先构造出四行，然后根据每行单独构造出行样式。

  1 //把块拆分为四行
  2 -(void)createIndexUIWithView:(UIView *)view{
  3     //拆分四行
  4     UIView *row1 = [UIView new];
  5     UIView *row2 = [UIView new];
  6     UIView *row3 = [UIView new];
  7     UIView *row4 = [UIView new];
  8     [view addSubview:row1];
  9     [view addSubview:row2];
 10     [view addSubview:row3];
 11     [view addSubview:row4];
 12     [row1 mas_makeConstraints:^(MASConstraintMaker *make) {
 13         make.right.and.left.equalTo(view);
 14         make.height.equalTo(view.mas_height).multipliedBy(0.25);
 15         make.top.equalTo(view.mas_top);
 16     }];
 17     [row2 mas_makeConstraints:^(MASConstraintMaker *make) {
 18         make.right.and.left.equalTo(view);
 19         make.top.equalTo(row1.mas_bottom);
 20         make.height.equalTo(view.mas_height).multipliedBy(0.25);
 21     }];
 22     [row3 mas_makeConstraints:^(MASConstraintMaker *make) {
 23         make.right.equalTo(view.mas_right);
 24         make.top.equalTo(row2.mas_bottom);
 25         make.height.equalTo(view.mas_height).multipliedBy(0.25);
 26         make.left.equalTo(view.mas_left);
 27     }];
 28     [row4 mas_makeConstraints:^(MASConstraintMaker *make) {
 29         make.right.and.left.equalTo(view);
 30         make.top.equalTo(row3.mas_bottom);
 31         make.height.equalTo(view.mas_height).multipliedBy(0.25);
 32     }];
 33     [self createIndexRowUI:PlantReferenceWaterIndex withUIView:row1];
 34     [self createIndexRowUI:PlantReferenceSumIndex withUIView:row2];
 35     [self createIndexRowUI:PlantReferenceTemperatureIndex withUIView:row3];
 36     [self createIndexRowUI:PlantReferenceElectrolyteIndex withUIView:row4];
 37 }
 38 //构造每行的UI
 39 -(void)createIndexRowUI:(PlantReferenceIndex) index withUIView:(UIView *)view{
 40     //index标题
 41     UILabel *indexTitle = [UILabel new];
 42     indexTitle.font = [UIFont fontWithName:@"HeiTi SC" size:14];
 43     indexTitle.textColor = [UIColor colorWithWhite:0.326 alpha:1.000];
 44     [view addSubview:indexTitle];
 45     [indexTitle mas_makeConstraints:^(MASConstraintMaker *make) {
 46         make.left.equalTo(view.mas_left).with.offset(20);
 47         make.centerY.equalTo(view.mas_centerY);
 48     }];
 49     switch (index) {
 50         case PlantReferenceWaterIndex:
 51         {
 52             indexTitle.text = @"水分";
 53             UIImageView * current;
 54             for(int i=1;i<=5;i++){
 55                 if(i<_reference.waterIndex){
 56                     current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_water_light"]];
 57                 }else{
 58                     current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_water_dark"]];
 59                 }
 60                 [view addSubview:current];
 61                 //间距12%，左边留空30%
 62                 [current mas_makeConstraints:^(MASConstraintMaker *make) {
 63                     make.left.equalTo(view.mas_right).with.multipliedBy(0.12*(i-1) +0.3);
 64                     make.centerY.equalTo(view.mas_centerY);
 65                 }];
 66             }
 67         }
 68               break;
 69         case PlantReferenceSumIndex:
 70         {
 71             indexTitle.text = @"光照";
 72             UIImageView * current;
 73             for(int i=1;i<=5;i++){
 74                 if(i<_reference.temperatureIndex){
 75                     current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_summer_light"]];
 76                 }else{
 77                     current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_summer_dark"]];
 78                 }
 79                 [view addSubview:current];
 80                 //间距12%，左边留空30%
 81                 [current mas_makeConstraints:^(MASConstraintMaker *make) {
 82                     make.left.equalTo(view.mas_right).with.multipliedBy(0.12*(i-1) +0.3);
 83                     make.centerY.equalTo(view.mas_centerY);
 84                 }];
 85             }
 86         }
 87               break;
 88         case PlantReferenceTemperatureIndex:
 89         {
 90             indexTitle.text = @"温度";
 91             UIImageView * current;
 92             for(int i=1;i<=5;i++){
 93                 if(i<_reference.sumIndex){
 94                     current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_temperature_light"]];
 95                 }else{
 96                     current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_temperature_dark"]];
 97                 }
 98                 [view addSubview:current];
 99                 //间距12%，左边留空30%
100                 [current mas_makeConstraints:^(MASConstraintMaker *make) {
101                     make.left.equalTo(view.mas_right).with.multipliedBy(0.12*(i-1) +0.3);
102                     make.centerY.equalTo(view.mas_centerY);
103                 }];
104             }
105         }
106               break;
107         case PlantReferenceElectrolyteIndex:
108         {
109             indexTitle.text = @"肥料";
110             UIImageView * current;
111             for(int i=1;i<=5;i++){
112                 if(i<_reference.electrolyteIndex){
113                     current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_electolyte_light"]];
114                 }else{
115                     current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_electolyte_dark"]];
116                 }
117                 [view addSubview:current];
118                 //间距12%，左边留空30%
119                 [current mas_makeConstraints:^(MASConstraintMaker *make) {
120                     make.left.equalTo(view.mas_right).with.multipliedBy(0.12*(i-1) +0.3);
121                     make.centerY.equalTo(view.mas_centerY);
122                 }];
123             }
124         }
125             break;
126         default:
127             break;
128     }
129 }
130 //在步骤1createui的基础上，做了一些微调。
131 -(void)createUI{
132     self.title = _reference.name;
133     UIView *titleView = [UIView new];
134     UIView *caredView = [UIView new];
135     [self.view addSubview:caredView];
136     UITextView *brifeView = [UITextView new];
137     [self.view addSubview:brifeView];
138     //self.view
139     self.view.backgroundColor = [UIColor colorWithWhite:0.965 alpha:1.000];
140     //thrm
141     UIImageView *plantThrm = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"defalutPlantReferenceIcon"]];
142     [self.view addSubview:plantThrm];
143     [plantThrm mas_makeConstraints:^(MASConstraintMaker *make) {
144         make.left.and.top.equalTo(self.view).with.offset(10);
145     }];
146     //title
147        [self.view addSubview:titleView];
148        UIImageView *bgTitleView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"bg-plant-reference-title"]];
149     [titleView addSubview:bgTitleView];
150     [titleView mas_makeConstraints:^(MASConstraintMaker *make) {
151         make.right.equalTo(self.view.mas_right);
152         make.left.equalTo(plantThrm.mas_right).with.offset(20);
153         make.centerY.equalTo(plantThrm.mas_centerY);
154    }];
155     [bgTitleView mas_makeConstraints:^(MASConstraintMaker *make) {
156         make.edges.equalTo(titleView);
157     }];
158     UILabel *title = [[UILabel alloc]init];
159     title.textColor =  [UIColor whiteColor];
160     title.font = [UIFont fontWithName:@"Heiti SC" size:26];
161     title.text = _reference.name;
162     [titleView addSubview:title];
163     [title mas_makeConstraints:^(MASConstraintMaker *make) {
164         make.left.equalTo(titleView.mas_left).offset(10);
165         make.width.equalTo(titleView.mas_width);
166         make.centerY.equalTo(titleView.mas_centerY);
167     }];
168     //植物养护
169     UILabel *caredTitle = [[UILabel alloc]init];
170     caredTitle.textColor =  [UIColor colorWithRed:0.172 green:0.171 blue:0.219 alpha:1.000];
171     caredTitle.font = [UIFont fontWithName:@"Heiti SC" size:10];
172     caredTitle.text = @"植物养护";
173     [self.view addSubview:caredTitle];
174     [caredTitle mas_makeConstraints:^(MASConstraintMaker *make) {
175         make.top.equalTo(plantThrm.mas_bottom).with.offset(20);
176         make.left.and.right.equalTo(self.view).with.offset(10);
177         make.height.mas_equalTo(10);
178     }];
179     //植物养护 数据
180     [self createIndexUIWithView:caredView];
181     //将图层的边框设置为圆脚
182     caredView.layer.cornerRadius = 5;
183     caredView.layer.masksToBounds = YES;
184     //给图层添加一个有色边框
185     caredView.layer.borderWidth = 1;
186     caredView.layer.borderColor = [[UIColor colorWithWhite:0.521 alpha:1.000] CGColor];
187     caredView.backgroundColor = [UIColor whiteColor];
188     [caredView mas_makeConstraints:^(MASConstraintMaker *make) {
189         make.top.equalTo(caredTitle.mas_bottom).with.offset(5);
190         make.left.equalTo(self.view.mas_left).with.offset(10);
191         make.right.equalTo(self.view.mas_right).with.offset(-10);
192         make.height.equalTo(brifeView);
193     }];
194     //植物简介
195     UILabel *brifeTitle = [[UILabel alloc]init];
196     brifeTitle.textColor =  [UIColor colorWithRed:0.172 green:0.171 blue:0.219 alpha:1.000];
197     brifeTitle.font = [UIFont fontWithName:@"Heiti SC" size:10];
198     brifeTitle.text = @"植物简介";
199     [self.view addSubview:brifeTitle];
200     [brifeTitle mas_makeConstraints:^(MASConstraintMaker *make) {
201         make.top.equalTo(caredView.mas_bottom).with.offset(20);
202         make.left.and.right.equalTo(self.view).with.offset(10);
203         make.height.mas_equalTo(10);
204     }];
205     //将图层的边框设置为圆脚
206     brifeView.layer.cornerRadius = 5;
207     brifeView.layer.masksToBounds = YES;
208     //给图层添加一个有色边框
209     brifeView.layer.borderWidth = 1;
210     brifeView.layer.borderColor = [[UIColor colorWithWhite:0.447 alpha:1.000] CGColor];
211     brifeView.backgroundColor = [UIColor whiteColor];
212     //文字样式
213 //    brifeView.textColor = [UIColor colorWithWhite:0.352 alpha:1.000];
214 //    brifeView.font = [UIFont fontWithName:@"HeiTi SC" size:12];
215     NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc]init];
216     paragraphStyle.lineHeightMultiple = 20.f;
217     paragraphStyle.maximumLineHeight = 25.f;
218     paragraphStyle.minimumLineHeight = 15.f;
219     paragraphStyle.alignment = NSTextAlignmentJustified;
220     NSDictionary *attributes = @{ NSFontAttributeName:[UIFont systemFontOfSize:12], NSParagraphStyleAttributeName:paragraphStyle, NSForegroundColorAttributeName:[UIColor colorWithWhite:0.447 alpha:1.000]};
221     //植物简介数据
222     //brifeView.text = _reference.brief;
223     brifeView.attributedText = [[NSAttributedString alloc] initWithString: _reference.brief attributes:attributes];
224     [brifeView mas_makeConstraints:^(MASConstraintMaker *make) {
225         make.top.equalTo(brifeTitle.mas_bottom).with.offset(5);
226         make.left.equalTo(self.view.mas_left).with.offset(10);
227         make.right.equalTo(self.view.mas_right).with.offset(-10);
228         make.bottom.equalTo(self.view.mas_bottom).with.offset(-10);
229         make.height.equalTo(caredView);
230     }];
231 }

完成之后如下图步骤2

原文转至 http://liuyanwei.jumppo.com/2015/06/14/ios-library-masonry.html

查看全文

相关阅读:
Samba 4.0 RC3 发布
 SymmetricDS 3.1.7 发布，数据同步和复制
 Express.js 3.0 发布，Node.js 的高性能封装
 GIFLIB 5.0.1 发布，C语言的GIF处理库
 jQuery UI 1.9.1 发布
 SVN Access Manager 0.5.5.14 发布 SVN 管理工具
 DynamicReports 3.0.3 发布 Java 报表工具
 HttpComponents HttpClient 4.2.2 GA 发布
 AppCan 2.0 正式发布，推移动应用云服务
 Ruby 2.0 的新功能已经冻结

原文地址：https://www.cnblogs.com/airy99/p/4615466.html