IOS 第三方库之-Masonry 基本用法

Masonry 基本用法

1，源码示例

1）创建一个view对象，使用约束居中显示，后面测试都使用这个view对象

UIView *view = [[UIViewalloc] init];     view.backgroundColor = [UIColorblackColor];     [self.viewaddSubview:view]; //使用autolayout之前必须将视图放到superview之上，否则会报错         [view mas_makeConstraints:^(MASConstraintMaker *make) {         make.center.equalTo(self.view); //使用self.view的中心点作为这个视图的中心点         make.size.mas_equalTo(CGSizeMake(300, 300)); //创建这个视图的大小     }];     /*      - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;      - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;      - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;      mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束否则会报错      mas_updateConstraints 针对上面的情况会更新在block中出现的约束不会导致出现两个相同约束的情况      mas_remakeConstraints 则会清除之前的所有约束仅保留最新的约束      三种函数善加利用就可以应对各种情况了      */     /*      其次 equalTo 和 mas_equalTo的区别在哪里呢? 可以看到 mas_equalTo只是对其参数进行了一个BOX操作(装箱) MASBoxValue的定义具体可以看看源代码太长就不贴出来了      mas_equalTo,所支持的类型除了NSNumber支持的那些数值类型之外就只支持CGPoint CGSize UIEdgeInsets           #define mas_equalTo(...)                 equalTo(MASBoxValue((__VA_ARGS__)))      #define mas_greaterThanOrEqualTo(...)    greaterThanOrEqualTo(MASBoxValue((__VA_ARGS__)))      #define mas_lessThanOrEqualTo(...)       lessThanOrEqualTo(MASBoxValue((__VA_ARGS__)))      #define mas_offset(...)                  valueOffset(MASBoxValue((__VA_ARGS__)))      */

 

2）创建一个view让它略小于父视图

UIView *sv1 = [[UIViewalloc] init];     sv1.backgroundColor = [UIColorredColor];     [view addSubview:sv1];     [sv1 mas_makeConstraints:^(MASConstraintMaker *make) { //        make.edges.mas_equalTo(view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));//以view父视图为参考，设置边界         //make.edges.mas_equalTo(UIEdgeInsetsMake(10, 10, 10, 10)); //默认以父视图为参考         /* 等价于 */         //分别设置上下左右的相对位置和偏移 //        make.top.equalTo(view).with.offset(10); //        make.right.equalTo(view).with.offset(-10); //        make.bottom.equalTo(view).with.offset(-10); //        make.left.equalTo(view).with.offset(10);         /* 等价于 */ //        make.left.and.top.equalTo(view).with.offset(10); //        make.right.and.bottom.equalTo(view).with.offset(-10);         /* 等价于 */ //        make.left.top.right.bottom.equalTo(view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));             }];     /*      那么为什么bottom和right里的offset是负数呢? 因为这里计算的是绝对的数值计算的bottom需要小鱼sv的底部高度所以要-10 同理用于right      这里有意思的地方是and和with 其实这两个函数什么事情都没做           - (MASConstraint *)with {      return self;      }      - (MASConstraint *)and {      return self;      }      但是用在这种链式语法中就非常的巧妙和易懂不得不佩服作者的心思(虽然我现在基本都会省略)      */

 

3）创建两个view，高度一定自动调整宽度和具体位置

UIView *sv2 = [[UIViewalloc] init];     sv2.backgroundColor = [UIColorpurpleColor];     [view addSubview:sv2];         UIView *sv3 = [[UIViewalloc] init];     sv3.backgroundColor = [UIColorwhiteColor];     [view addSubview:sv3];         UIView *sv4 = [[UIViewalloc] init];     sv4.backgroundColor = [UIColorblueColor];     [view addSubview:sv4];         int padding = 30;     [sv2 mas_makeConstraints:^(MASConstraintMaker *make) {         make.centerY.equalTo(view); //1，设置y轴         make.height.mas_equalTo(150); //2，设置高度         make.left.equalTo(view).with.offset(padding); //3，设置左边根据那个视图设置，偏移多少         make.right.equalTo(sv3.mas_left).with.offset(-padding); //4，设置右边根据那个视图左边框设置，偏移多少         make.width.equalTo(@[sv3, sv4]); //5，设置控件的宽度，设置和sv3相等，让他们自动计算宽度     }];         [sv3 mas_makeConstraints:^(MASConstraintMaker *make) {         make.centerY.equalTo(view);         make.height.mas_equalTo(150);         make.left.equalTo(sv2.mas_right).with.offset(padding);         make.right.equalTo(sv4.mas_left).with.offset(-padding);         make.width.equalTo(@[sv2, sv4]);     }];         [sv4 mas_makeConstraints:^(MASConstraintMaker *make) {         make.centerY.equalTo(view);         make.height.mas_equalTo(150);         make.left.equalTo(sv3.mas_right).with.offset(padding);         make.right.equalTo(view.mas_right).with.offset(-padding);         make.width.equalTo(@[sv3, sv2]);     }];

 

4）UIScrollView和Masonry

//4，UIScrollView     /* 遇到的问题      1，make.left.and.right.equalTo(scrollView);         make.width.equalTo(scrollView); //上面一句和这一句有什么区别？      这两句有什么区别，为什么可以共存？有什么不一样的？？？？？      2，中间层的container要加到scrollView上而不是scrollView的父视图上           3，      总结：         scrollView遇到Masonry，为了让scrollView的contentSize随着内容高度的变化而自动增高，一个解决方案就是，在scrollView上放一个UIView，将UIView的边界edges和width和scrollView保持相等，然后将要加在scrollView上的控件加到UIView上，最后设置UIView的top，bottom，width，edges 。一种理解的方法是，scrollView的边界edges就是我们可以在屏幕上看到的scrollView的大小，scrollView的可以滑动的距离，实际上是scrollView的width，height，或者top，bottom等属性；         edges 和 width，height，top，bottom，可以重复设置，不算重复定义；         在这个例子中设置了UIView的edges和scrollView边界相等，所以可以动态的在UIView中设置ScrollView的边界，反之亦然。      */     UIScrollView *scrollView = [[UIScrollViewalloc] init];     scrollView.backgroundColor = [UIColorwhiteColor];     [view addSubview:scrollView];     scrollView.pagingEnabled = YES;     [scrollView mas_makeConstraints:^(MASConstraintMaker *make) { //        make.edges.equalTo(view).with.insets(UIEdgeInsetsMake(5, 5, 5, 5));     }];         UIView *container = [[UIViewalloc] init];     container.backgroundColor = [UIColorblueColor];     [scrollView addSubview:container];         UIView *lastView = nil;     for (int i = 1; i < 30; i++) {         UIView *subView = [[UIViewalloc] init];         subView.backgroundColor = [UIColorcolorWithHue:( arc4random() % 256 / 256.0 )                                              saturation:( arc4random() % 128 / 256.0 ) + 0.5                                              brightness:( arc4random() % 128 / 256.0 ) + 0.5                                                   alpha:1];         [container addSubview:subView];         [subView mas_makeConstraints:^(MASConstraintMaker *make) {             make.left.and.right.equalTo(scrollView);             make.height.mas_equalTo(30);             if (lastView) {                 make.top.equalTo(lastView.mas_bottom);             }else{                 make.top.equalTo(scrollView.mas_top);             }         }];                 lastView = subView;     }         container.alpha = 01;     [container mas_makeConstraints:^(MASConstraintMaker *make) {         make.bottom.equalTo(lastView.mas_bottom);         make.top.equalTo(scrollView);         make.width.mas_equalTo(scrollView);         make.edges.mas_equalTo(UIEdgeInsetsMake(0, 0, 0, 0));//.insets(UIEdgeInsetsMake(0, 0, 0, 0));     }];     }

在UIScrollView上放置的view，最后只需要更新view的bottom和view的最底部的控件的底部相同即可，

 

5）另一种 让几个控件间隔相同的方法，，，，，未测试

/*  博主，给你合并下多个视图相隔相同的方法：  __weak typeof(self) weakSelf = self;    UIView * tempView = [[UIView alloc]init];  NSInteger count = 10;//设置一排view的个数  NSInteger margin = 10;//设置相隔距离  NSInteger height = 50;//设置view的高度  for (int i = 0; i < count; i ++) {  UIView * view = [[UIView alloc]init];  view.backgroundColor = [UIColor brownColor];  [self.view addSubview:view];  if (i == 0) {  [view mas_makeConstraints:^(MASConstraintMaker *make) {  make.left.equalTo(weakSelf.view).offset(margin);  make.centerY.equalTo(weakSelf.view);  make.height.mas_equalTo(height);  }];  }  else if (i == count – 1){  [view mas_makeConstraints:^(MASConstraintMaker *make) {  make.right.equalTo(weakSelf.view).offset(-margin);  make.left.equalTo(tempView.mas_right).offset(margin);  make.centerY.equalTo(tempView);  make.height.equalTo(tempView);  make.width.equalTo(tempView);  }];  }  else{  [view mas_makeConstraints:^(MASConstraintMaker *make) {  make.left.equalTo(tempView.mas_right).offset(margin);  make.centerY.equalTo(tempView);  make.height.equalTo(tempView);  make.width.equalTo(tempView);  }];  }  tempView = view;  [view layoutIfNeeded];  }  */