Masonry的使用

Masonry是一個輕量級的布局框架蛔屹，擁有自己的描述語法，采用更優(yōu)雅的鏈式語法封裝自動布局豁生，簡潔明了并具有高可讀性兔毒，而且同時支持 iOS 和 Max OS X。Masonry是一個用代碼寫iOS或OS界面的庫甸箱，可以代替Auto layout育叁。Masonry的github地址：https://github.com/SnapKit/Masonry

本章內(nèi)容

- Masonry配置

- Masonry使用

- Masonry實例

Masonry配置

- 推薦使用pods方式引入類庫，pod 'Masonry'芍殖，若不知道pod如何使用豪嗽，情況我的另一篇文章：提高ios開發(fā)效率的工具

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

Masonry使用講解

mas_makeConstraints 是給view添加約束，約束有幾種，分別是邊距龟梦，寬隐锭，高，左上右下距離计贰，基準線钦睡。添加過約束后可以有修正，修正有offset（位移）修正和multipliedBy（倍率）修正躁倒。

語法一般是 make.equalTo or make.greaterThanOrEqualTo or make.lessThanOrEqualTo + 倍數(shù)和位移修正荞怒。

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

注意點2： masequalTo 和 equalTo 區(qū)別：masequalTo 比equalTo多了類型轉(zhuǎn)換操作樱溉，一般來說挣输，大多數(shù)時候兩個方法都是通用的，但是對于數(shù)值元素使用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初級使用例子

// exp1: 中心點與self.view相同，寬度為400*400

-(void)exp1{

UIView *view = [UIView new];

[view setBackgroundColor:[UIColor redColor]];

[self.view addSubview:view];

[view mas_makeConstraints:^(MASConstraintMaker *make) {

make.center.equalTo(self.view);

make.size.mas_equalTo(CGSizeMake(400,400));

}];

}

//exp2: 上下左右邊距都為10

-(void)exp2{

UIView *view = [UIView new];

[view setBackgroundColor:[UIColor redColor]];

[self.view addSubview:view];

[view mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

//? make.left.equalTo(self.view).with.offset(10);

//? make.right.equalTo(self.view).with.offset(-10);

//? make.top.equalTo(self.view).with.offset(10);

//? make.bottom.equalTo(self.view).with.offset(-10);

}];

}

//exp3 讓兩個高度為150的view垂直居中且等寬且等間隔排列間隔為10

-(void)exp3{

UIView *view1 = [UIView new];

[view1 setBackgroundColor:[UIColor redColor]];

[self.view addSubview:view1];

UIView *view2 = [UIView new];

[view2 setBackgroundColor:[UIColor redColor]];

[self.view addSubview:view2];

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.mas_equalTo(self.view.mas_centerY);

make.height.mas_equalTo(150);

make.width.mas_equalTo(view2.mas_width);

make.left.mas_equalTo(self.view.mas_left).with.offset(10);

make.right.mas_equalTo(view2.mas_left).offset(-10);

}];

[view2 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.mas_equalTo(self.view.mas_centerY);

make.height.mas_equalTo(150);

make.width.mas_equalTo(view1.mas_width);

make.left.mas_equalTo(view1.mas_right).with.offset(10);

make.right.equalTo(self.view.mas_right).offset(-10);

}];

}

Masonry高級使用例子1

iOS計算器使用Masorny布局：

IOS自適應前段庫-Masonry的使用

//高級布局練習 ios自帶計算器布局

-(void)exp4{

//申明區(qū)域映企，displayView是顯示區(qū)域诡宗，keyboardView是鍵盤區(qū)域

UIView *displayView = [UIView new];

[displayView setBackgroundColor:[UIColor blackColor]];

[self.view addSubview:displayView];

UIView *keyboardView = [UIView new];

[self.view addSubview:keyboardView];

//先按1：3分割 displView（顯示結(jié)果區(qū)域）和 keyboardView（鍵盤區(qū)域）

[displayView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(self.view.mas_top);

make.left.and.right.equalTo(self.view);

make.height.equalTo(keyboardView).multipliedBy(0.3f);

}];

[keyboardView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(displayView.mas_bottom);

make.bottom.equalTo(self.view.mas_bottom);

make.left.and.right.equalTo(self.view);

}];

//設置顯示位置的數(shù)字為0

UILabel *displayNum = [[UILabel alloc]init];

[displayView addSubview:displayNum];

displayNum.text = @"0";

displayNum.font = [UIFont fontWithName:@"HeiTi SC" size:70];

displayNum.textColor = [UIColor whiteColor];

displayNum.textAlignment = NSTextAlignmentRight;

[displayNum mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.and.right.equalTo(displayView).with.offset(-10);

make.bottom.equalTo(displayView).with.offset(-10);

}];

//定義鍵盤鍵名稱锹雏，要拂？號代表合并的單元格

NSArray *keys = @[@"AC",@"+/-",@"%",@"÷"

,@"7",@"8",@"9",@"x"

,@"4",@"5",@"6",@"-"

,@"1",@"2",@"3",@"+"

,@"0",@"?",@".",@"="];

int indexOfKeys = 0;

for (NSString *key in keys){

//循環(huán)所有鍵

indexOfKeys++;

int rowNum = indexOfKeys %4 ==0? indexOfKeys/4:indexOfKeys/4 +1;

int colNum = indexOfKeys %4 ==0? 4 :indexOfKeys %4;

NSLog(@"index is:%d and row:%d,col:%d",indexOfKeys,rowNum,colNum);

//鍵樣式

UIButton *keyView = [UIButton buttonWithType:UIButtonTypeCustom];

[keyboardView addSubview:keyView];

[keyView setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

[keyView setTitle:key forState:UIControlStateNormal];

[keyView.layer setBorderWidth:1];

[keyView.layer setBorderColor:[[UIColor blackColor]CGColor]];

[keyView.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldItalicMT" size:30]];

//鍵約束

[keyView mas_makeConstraints:^(MASConstraintMaker *make) {

//處理 0 合并單元格

if([key isEqualToString:@"0"] || [key isEqualToString:@"?"] ){

if([key isEqualToString:@"0"]){

[keyView mas_makeConstraints:^(MASConstraintMaker *make) {

make.height.equalTo(keyboardView.mas_height).with.multipliedBy(.2f);

make.width.equalTo(keyboardView.mas_width).multipliedBy(.5);

make.left.equalTo(keyboardView.mas_left);

make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.9f);

}];

}if([key isEqualToString:@"?"]){

[keyView removeFromSuperview];

}

//正常的單元格

else{

make.width.equalTo(keyboardView.mas_width).with.multipliedBy(.25f);

make.height.equalTo(keyboardView.mas_height).with.multipliedBy(.2f);

//按照行和列添加約束抠璃，這里添加行約束

switch (rowNum) {

case 1:

{

make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.1f);

keyView.backgroundColor = [UIColor colorWithRed:205 green:205 blue:205 alpha:1];

}

break;

case 2:

{

make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.3f);

}

break;

case 3:

{

make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.5f);

}

break;

case 4:

{

make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.7f);

}

break;

case 5:

{

make.baseline.equalTo(keyboardView.mas_baseline).with.multipliedBy(.9f);

}

break;

default:

break;

}

//按照行和列添加約束，這里添加列約束

switch (colNum) {

case 1:

{

make.left.equalTo(keyboardView.mas_left);

}

break;

case 2:

{

make.right.equalTo(keyboardView.mas_centerX);

}

break;

case 3:

{

make.left.equalTo(keyboardView.mas_centerX);

}

break;

case 4:

{

make.right.equalTo(keyboardView.mas_right);

[keyView setBackgroundColor:[UIColor colorWithRed:243 green:127 blue:38 alpha:1]];

}

break;

default:

break;

}

}];

}

本例子使用的baseline去控制高度位置脱惰，這似乎不是太準搏嗡，如果想要精準控制高度位置，可以使用一行一行添加的方法拉一，每次當前行的top去equelTo上一行的bottom采盒。給個提示：

for（遍歷所有行)

for（遍歷所以列）

//當前行約束根據(jù)上一行去設置

......

下一個例子中，使用上面類似的方法

Masonry高級使用例子2

根據(jù)設計圖蔚润，使用masonry布局：

步驟1

IOS自適應前段庫-Masonry的使用

步驟2

IOS自適應前段庫-Masonry的使用

步驟1

-(void)createUI{

UIView *titleView = [UIView new];

titleView.backgroundColor = [UIColor redColor];

UIView *caredView = [UIView new];

[self.view addSubview:caredView];

UIView *brifeView = [UIView new];

[self.view addSubview:brifeView];

//self.view

self.view.backgroundColor = [UIColor colorWithWhite:0.965 alpha:1.000];

//thrm

UIImageView *plantThrm = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"defalutPlantReferenceIcon"]];

[self.view addSubview:plantThrm];

[plantThrm mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.and.top.equalTo(self.view).with.offset(10);

}];

//title

[self.view addSubview:titleView];

UIImageView *bgTitleView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"bg-plant-reference-title"]];

[titleView addSubview:bgTitleView];

[titleView mas_makeConstraints:^(MASConstraintMaker *make) {

make.right.equalTo(self.view.mas_right);

make.left.equalTo(plantThrm.mas_right).with.offset(20);

make.centerY.equalTo(plantThrm.mas_centerY);

}];

[bgTitleView mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(titleView);

}];

UILabel *title = [[UILabel alloc]init];

title.textColor =? [UIColor whiteColor];

title.font = [UIFont fontWithName:@"Heiti SC" size:26];

title.text = _reference.name;

[titleView addSubview:title];

[title mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.equalTo(titleView.mas_left).offset(10);

make.width.equalTo(titleView.mas_width);

make.centerY.equalTo(titleView.mas_centerY);

}];

//植物養(yǎng)護

UILabel *caredTitle = [[UILabel alloc]init];

caredTitle.textColor =? [UIColor colorWithRed:0.172 green:0.171 blue:0.219 alpha:1.000];

caredTitle.font = [UIFont fontWithName:@"Heiti SC" size:10];

caredTitle.text = @"植物養(yǎng)護";

[self.view addSubview:caredTitle];

[caredTitle mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(plantThrm.mas_bottom).with.offset(20);

make.left.and.right.equalTo(self.view).with.offset(10);

make.height.mas_equalTo(10);

}];

//將圖層的邊框設置為圓腳

caredView.layer.cornerRadius = 5;

caredView.layer.masksToBounds = YES;

//給圖層添加一個有色邊框

caredView.layer.borderWidth = 1;

caredView.layer.borderColor = [[UIColor colorWithWhite:0.521 alpha:1.000] CGColor];

caredView.backgroundColor = [UIColor whiteColor];

[caredView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(caredTitle.mas_bottom).with.offset(5);

make.left.equalTo(self.view.mas_left).with.offset(10);

make.right.equalTo(self.view.mas_right).with.offset(-10);

make.height.equalTo(brifeView);

}];

//植物簡介

UILabel *brifeTitle = [[UILabel alloc]init];

brifeTitle.textColor =? [UIColor colorWithRed:0.172 green:0.171 blue:0.219 alpha:1.000];

brifeTitle.font = [UIFont fontWithName:@"Heiti SC" size:10];

brifeTitle.text = @"植物簡介";

[self.view addSubview:brifeTitle];

[brifeTitle mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(caredView.mas_bottom).with.offset(20);

make.left.and.right.equalTo(self.view).with.offset(10);

make.height.mas_equalTo(10);

}];

//將圖層的邊框設置為圓腳

brifeView.layer.cornerRadius = 5;

brifeView.layer.masksToBounds = YES;

//給圖層添加一個有色邊框

brifeView.layer.borderWidth = 1;

brifeView.layer.borderColor = [[UIColor colorWithWhite:0.521 alpha:1.000] CGColor];

brifeView.backgroundColor = [UIColor whiteColor];

[brifeView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(brifeTitle.mas_bottom).with.offset(5);

make.left.equalTo(self.view.mas_left).with.offset(10);

make.right.equalTo(self.view.mas_right).with.offset(-10);

make.bottom.equalTo(self.view.mas_bottom).with.offset(-10);

make.height.equalTo(caredView);

}];

}

完成之后如下圖步驟1

IOS自適應前段庫-Masonry的使用

步驟2,在上面的基礎上磅氨，增加植物養(yǎng)護部分ui構(gòu)造的代碼，思想是嫡纠，先構(gòu)造出四行悍赢，然后根據(jù)每行單獨構(gòu)造出行樣式决瞳。

//把塊拆分為四行

-(void)createIndexUIWithView:(UIView *)view{

//拆分四行

UIView *row1 = [UIView new];

UIView *row2 = [UIView new];

UIView *row3 = [UIView new];

UIView *row4 = [UIView new];

[view addSubview:row1];

[view addSubview:row2];

[view addSubview:row3];

[view addSubview:row4];

[row1 mas_makeConstraints:^(MASConstraintMaker *make) {

make.right.and.left.equalTo(view);

make.height.equalTo(view.mas_height).multipliedBy(0.25);

make.top.equalTo(view.mas_top);

}];

[row2 mas_makeConstraints:^(MASConstraintMaker *make) {

make.right.and.left.equalTo(view);

make.top.equalTo(row1.mas_bottom);

make.height.equalTo(view.mas_height).multipliedBy(0.25);

}];

[row3 mas_makeConstraints:^(MASConstraintMaker *make) {

make.right.equalTo(view.mas_right);

make.top.equalTo(row2.mas_bottom);

make.height.equalTo(view.mas_height).multipliedBy(0.25);

make.left.equalTo(view.mas_left);

}];

[row4 mas_makeConstraints:^(MASConstraintMaker *make) {

make.right.and.left.equalTo(view);

make.top.equalTo(row3.mas_bottom);

make.height.equalTo(view.mas_height).multipliedBy(0.25);

}];

[self createIndexRowUI:PlantReferenceWaterIndex withUIView:row1];

[self createIndexRowUI:PlantReferenceSumIndex withUIView:row2];

[self createIndexRowUI:PlantReferenceTemperatureIndex withUIView:row3];

[self createIndexRowUI:PlantReferenceElectrolyteIndex withUIView:row4];

}

//構(gòu)造每行的UI

-(void)createIndexRowUI:(PlantReferenceIndex) index withUIView:(UIView *)view{

//index標題

UILabel *indexTitle = [UILabel new];

indexTitle.font = [UIFont fontWithName:@"HeiTi SC" size:14];

indexTitle.textColor = [UIColor colorWithWhite:0.326 alpha:1.000];

[view addSubview:indexTitle];

[indexTitle mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.equalTo(view.mas_left).with.offset(20);

make.centerY.equalTo(view.mas_centerY);

}];

switch (index) {

case PlantReferenceWaterIndex:

{

indexTitle.text = @"水分";

UIImageView * current;

for(int i=1;i<=5;i++){? ? ? ? ? ? ? ? if(i<_reference.waterIndex){? ? ? ? ? ? ? ? ? ? current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_water_light"]];? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_water_dark"]];? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? [view addSubview:current];? ? ? ? ? ? ? ? //間距12%，左邊留空30%? ? ? ? ? ? ? ? [current mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? ? ? ? ? ? ? make.left.equalTo(view.mas_right).with.multipliedBy(0.12*(i-1) +0.3);? ? ? ? ? ? ? ? ? ? make.centerY.equalTo(view.mas_centerY);? ? ? ? ? ? ? ? }];? ? ? ? ? ? }? ? ? ? }? ? ? ? ? ? ? break;? ? ? ? case PlantReferenceSumIndex:? ? ? ? {? ? ? ? ? ? indexTitle.text = @"光照";? ? ? ? ? ? UIImageView * current;? ? ? ? ? ? for(int i=1;i<=5;i++){? ? ? ? ? ? ? ? if(i<_reference.temperatureIndex){? ? ? ? ? ? ? ? ? ? current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_summer_light"]];? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_summer_dark"]];? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? [view addSubview:current];? ? ? ? ? ? ? ? //間距12%左权，左邊留空30%? ? ? ? ? ? ? ? [current mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? ? ? ? ? ? ? make.left.equalTo(view.mas_right).with.multipliedBy(0.12*(i-1) +0.3);? ? ? ? ? ? ? ? ? ? make.centerY.equalTo(view.mas_centerY);? ? ? ? ? ? ? ? }];? ? ? ? ? ? }? ? ? ? }? ? ? ? ? ? ? break;? ? ? ? case PlantReferenceTemperatureIndex:? ? ? ? {? ? ? ? ? ? indexTitle.text = @"溫度";? ? ? ? ? ? UIImageView * current;? ? ? ? ? ? for(int i=1;i<=5;i++){? ? ? ? ? ? ? ? if(i<_reference.sumIndex){? ? ? ? ? ? ? ? ? ? current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_temperature_light"]];? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_temperature_dark"]];? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? [view addSubview:current];? ? ? ? ? ? ? ? //間距12%，左邊留空30%? ? ? ? ? ? ? ? [current mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? ? ? ? ? ? ? make.left.equalTo(view.mas_right).with.multipliedBy(0.12*(i-1) +0.3);? ? ? ? ? ? ? ? ? ? make.centerY.equalTo(view.mas_centerY);? ? ? ? ? ? ? ? }];? ? ? ? ? ? }? ? ? ? }? ? ? ? ? ? ? break;? ? ? ? case PlantReferenceElectrolyteIndex:? ? ? ? {? ? ? ? ? ? indexTitle.text = @"肥料";? ? ? ? ? ? UIImageView * current;? ? ? ? ? ? for(int i=1;i<=5;i++){? ? ? ? ? ? ? ? if(i<_reference.electrolyteIndex){? ? ? ? ? ? ? ? ? ? current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_electolyte_light"]];? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? current = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon_electolyte_dark"]];? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? [view addSubview:current];? ? ? ? ? ? ? ? //間距12%痴颊，左邊留空30%? ? ? ? ? ? ? ? [current mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? ? ? ? ? ? ? make.left.equalTo(view.mas_right).with.multipliedBy(0.12*(i-1) +0.3);? ? ? ? ? ? ? ? ? ? make.centerY.equalTo(view.mas_centerY);? ? ? ? ? ? ? ? }];? ? ? ? ? ? }? ? ? ? }? ? ? ? ? ? break;? ? ? ? default:? ? ? ? ? ? break;? ? } } //在步驟1createui的基礎上赏迟，做了一些微調(diào)。 -(void)createUI{? ? self.title = _reference.name;? ? UIView *titleView = [UIView new];? ? UIView *caredView = [UIView new];? ? [self.view addSubview:caredView];? ? UITextView *brifeView = [UITextView new];? ? [self.view addSubview:brifeView];? ? //self.view? ? self.view.backgroundColor = [UIColor colorWithWhite:0.965 alpha:1.000];? ? //thrm? ? UIImageView *plantThrm = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"defalutPlantReferenceIcon"]];? ? [self.view addSubview:plantThrm];? ? [plantThrm mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? make.left.and.top.equalTo(self.view).with.offset(10);? ? }];? ? //title? ? ? ? [self.view addSubview:titleView];? ? ? ? UIImageView *bgTitleView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"bg-plant-reference-title"]];? ? [titleView addSubview:bgTitleView];? ? [titleView mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? make.right.equalTo(self.view.mas_right);? ? ? ? make.left.equalTo(plantThrm.mas_right).with.offset(20);? ? ? ? make.centerY.equalTo(plantThrm.mas_centerY);? ? }];? ? [bgTitleView mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? make.edges.equalTo(titleView);? ? }];? ? UILabel *title = [[UILabel alloc]init];? ? title.textColor =? [UIColor whiteColor];? ? title.font = [UIFont fontWithName:@"Heiti SC" size:26];? ? title.text = _reference.name;? ? [titleView addSubview:title];? ? [title mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? make.left.equalTo(titleView.mas_left).offset(10);? ? ? ? make.width.equalTo(titleView.mas_width);? ? ? ? make.centerY.equalTo(titleView.mas_centerY);? ? }];? ? //植物養(yǎng)護? ? UILabel *caredTitle = [[UILabel alloc]init];? ? caredTitle.textColor =? [UIColor colorWithRed:0.172 green:0.171 blue:0.219 alpha:1.000];? ? caredTitle.font = [UIFont fontWithName:@"Heiti SC" size:10];? ? caredTitle.text = @"植物養(yǎng)護";? ? [self.view addSubview:caredTitle];? ? [caredTitle mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? make.top.equalTo(plantThrm.mas_bottom).with.offset(20);? ? ? ? make.left.and.right.equalTo(self.view).with.offset(10);? ? ? ? make.height.mas_equalTo(10);? ? }];? ? //植物養(yǎng)護數(shù)據(jù)? ? [self createIndexUIWithView:caredView];? ? //將圖層的邊框設置為圓腳? ? caredView.layer.cornerRadius = 5;? ? caredView.layer.masksToBounds = YES;? ? //給圖層添加一個有色邊框? ? caredView.layer.borderWidth = 1;? ? caredView.layer.borderColor = [[UIColor colorWithWhite:0.521 alpha:1.000] CGColor];? ? caredView.backgroundColor = [UIColor whiteColor];? ? [caredView mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? make.top.equalTo(caredTitle.mas_bottom).with.offset(5);? ? ? ? make.left.equalTo(self.view.mas_left).with.offset(10);? ? ? ? make.right.equalTo(self.view.mas_right).with.offset(-10);? ? ? ? make.height.equalTo(brifeView);? ? }];? ? //植物簡介? ? UILabel *brifeTitle = [[UILabel alloc]init];? ? brifeTitle.textColor =? [UIColor colorWithRed:0.172 green:0.171 blue:0.219 alpha:1.000];? ? brifeTitle.font = [UIFont fontWithName:@"Heiti SC" size:10];? ? brifeTitle.text = @"植物簡介";? ? [self.view addSubview:brifeTitle];? ? [brifeTitle mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? make.top.equalTo(caredView.mas_bottom).with.offset(20);? ? ? ? make.left.and.right.equalTo(self.view).with.offset(10);? ? ? ? make.height.mas_equalTo(10);? ? }];? ? //將圖層的邊框設置為圓腳? ? brifeView.layer.cornerRadius = 5;? ? brifeView.layer.masksToBounds = YES;? ? //給圖層添加一個有色邊框? ? brifeView.layer.borderWidth = 1;? ? brifeView.layer.borderColor = [[UIColor colorWithWhite:0.447 alpha:1.000] CGColor];? ? brifeView.backgroundColor = [UIColor whiteColor];? ? //文字樣式 //? ? brifeView.textColor = [UIColor colorWithWhite:0.352 alpha:1.000]; //? ? brifeView.font = [UIFont fontWithName:@"HeiTi SC" size:12];? ? NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc]init];? ? paragraphStyle.lineHeightMultiple = 20.f;? ? paragraphStyle.maximumLineHeight = 25.f;? ? paragraphStyle.minimumLineHeight = 15.f;? ? paragraphStyle.alignment = NSTextAlignmentJustified;? ? NSDictionary *attributes = @{ NSFontAttributeName:[UIFont systemFontOfSize:12], NSParagraphStyleAttributeName:paragraphStyle, NSForegroundColorAttributeName:[UIColor colorWithWhite:0.447 alpha:1.000]};? ? //植物簡介數(shù)據(jù)? ? //brifeView.text = _reference.brief;? ? brifeView.attributedText = [[NSAttributedString alloc] initWithString: _reference.brief attributes:attributes];? ? [brifeView mas_makeConstraints:^(MASConstraintMaker *make) {? ? ? ? make.top.equalTo(brifeTitle.mas_bottom).with.offset(5);? ? ? ? make.left.equalTo(self.view.mas_left).with.offset(10);? ? ? ? make.right.equalTo(self.view.mas_right).with.offset(-10);? ? ? ? make.bottom.equalTo(self.view.mas_bottom).with.offset(-10);? ? ? ? make.height.equalTo(caredView);? ? }]; }

完成之后如下圖步驟2

IOS自適應前段庫-Masonry的使用

最后編輯于：2017.12.04 00:42:15

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末蠢棱，一起剝皮案震驚了整個濱河市锌杀，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌泻仙，老刑警劉巖糕再，帶你破解...
沈念sama閱讀 219,366評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異玉转，居然都是意外死亡突想，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,521評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門究抓，熙熙樓的掌柜王于貴愁眉苦臉地迎上來猾担，“玉大人，你說我怎么就攤上這事刺下“筻冢” “怎么了？”我有些...
開封第一講書人閱讀 165,689評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵橘茉，是天一觀的道長工腋。經(jīng)常有香客問我，道長畅卓，這世上最難降的妖魔是什么擅腰？我笑而不...
開封第一講書人閱讀 58,925評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮髓介，結(jié)果婚禮上惕鼓，老公的妹妹穿的比我還像新娘。我一直安慰自己唐础，他們只是感情好箱歧，可當我...
茶點故事閱讀 67,942評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著一膨，像睡著了一般呀邢。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上豹绪，一...
開封第一講書人閱讀 51,727評論 1贊 305
城市分裂傳說
那天价淌，我揣著相機與錄音申眼，去河邊找鬼。笑死蝉衣，一個胖子當著我的面吹牛括尸，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播病毡，決...
沈念sama閱讀 40,447評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼濒翻，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了啦膜？” 一聲冷哼從身側(cè)響起有送，我...
開封第一講書人閱讀 39,349評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎僧家，沒想到半個月后雀摘，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,820評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡八拱，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,990評論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年阵赠，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片乘粒。...
茶點故事閱讀 40,127評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡豌注，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出灯萍，到底是詐尸還是另有隱情轧铁，我是刑警寧澤，帶...
沈念sama閱讀 35,812評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布旦棉，位于F島的核電站齿风，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏绑洛。R本人自食惡果不足惜救斑，卻給世界環(huán)境...
茶點故事閱讀 41,471評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望真屯。院中可真熱鬧脸候，春花似錦、人聲如沸绑蔫。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,017評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽配深。三九已至携添，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間篓叶，已是汗流浹背烈掠。一陣腳步聲響...
開封第一講書人閱讀 33,142評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工羞秤，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人左敌。一個月前我還...
沈念sama閱讀 48,388評論 3贊 373
代替公主和親
正文我出身青樓瘾蛋，卻偏偏與公主長得像，于是被迫代替她去往敵國和親矫限。傳聞我的和親對象是個殘疾皇子瘦黑，可洞房花燭夜當晚...
茶點故事閱讀 45,066評論 2贊 355

Masonry的使用

推薦閱讀更多精彩內(nèi)容