zoukankan      html  css  js  c++  java

  • Masonry的简单使用

     

    介绍

    Masonry源码

    在其官网上也进行了很多的介绍,在下面会写出我自己的一些见解.如果使用过iOS中系统的NSLayoutConstraints已经知道非常麻烦

    如下代码就是系统的约束

    UIView *superview = self;

UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor greenColor];
[superview addSubview:view1];

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[superview addConstraints:@[

    //view1 constraints
    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeTop
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeTop
                                multiplier:1.0
                                  constant:padding.top],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeLeft
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeLeft
                                multiplier:1.0
                                  constant:padding.left],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeBottom
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeBottom
                                multiplier:1.0
                                  constant:-padding.bottom],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeRight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeRight
                                multiplier:1
                                  constant:-padding.right],

 ]];

    安装

    1. 直接进入github进行源码下载
    2. 使用CocoaPod进行下载

    使用

    在上面介绍的时候我们看到系统要创建一个试图,距离上下左右都是10的这样一个约束需要写上很多代码,然而现在是使用Masonry的效果

    UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
    make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
    make.right.equalTo(superview.mas_right).with.offset(-padding.right);
}];

    甚至我们这样写得更加简洁

    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview).with.insets(padding);
}];

    接下来我们来观看下Masonry中的一些常用属性

    // 左侧
@property (nonatomic, strong, readonly) MASConstraint *left;
// 顶部
@property (nonatomic, strong, readonly) MASConstraint *top;
// 右侧
@property (nonatomic, strong, readonly) MASConstraint *right;
// 底部
@property (nonatomic, strong, readonly) MASConstraint *bottom;
// 首部
@property (nonatomic, strong, readonly) MASConstraint *leading;
// 尾部
@property (nonatomic, strong, readonly) MASConstraint *trailing;
// 宽
@property (nonatomic, strong, readonly) MASConstraint *width;
// 高
@property (nonatomic, strong, readonly) MASConstraint *height;
// 中心点x
@property (nonatomic, strong, readonly) MASConstraint *centerX;
// 中心点y
@property (nonatomic, strong, readonly) MASConstraint *centerY;
// 文本基线
@property (nonatomic, strong, readonly) MASConstraint *baseline;

    居中显示视图

    UIView *myView = [[UIView alloc] init];
myView.backgroundColor = [UIColor blueColor];
[self.view addSubview:myView];
    
[myView mas_makeConstraints:^(MASConstraintMaker *make) {
   // 设置当前center和父视图的center一样
   make.center.mas_equalTo(self.view);
   // 设置当前视图的大小
   make.size.mas_equalTo(CGSizeMake(300, 300));
}];

    效果图
    Masonry-1
    可以看到我们已经创建出一个位置居中,并且视图大小为300×300

    设置视图并排

    UIView *view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor redColor];
[myView addSubview:view1];
    
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor yellowColor];
[myView addSubview:view2];
    
    
int padding = 10;
    
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
   // 设置其位于父视图的Y的中心位置
   make.centerY.mas_equalTo(myView.mas_centerY);
   // 设置其左侧和父视图偏移10个像素
   make.left.equalTo(myView).with.offset(padding);
   // 设置其右侧和view2偏移10个像素
   make.right.equalTo(view2.mas_left).with.offset(-padding);
   // 设置高度
   make.height.mas_equalTo(@120);
   // 设置其宽度
   make.width.equalTo(view2);
}];
    
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
   make.centerY.mas_equalTo(myView.mas_centerY);
   make.left.equalTo(view1.mas_right).with.offset(padding);
   make.right.equalTo(myView).with.offset(-padding);
   make.height.mas_equalTo(view1);
   make.width.equalTo(view1);
}];

    效果图:
    Masonry-2

    提醒一下,以下代码等价

    make.left.equalTo(myView).with.offset(padding);
// 等价于
make.left.equalTo(myView.mas_left).with.offset(padding);

    也就是说默认情况下括号里面只写了视图的时候,其自动帮你添加当前masxxx(代表前面你需要设置的约束的位置).比如上面两行代码设置的make.left,当括号里面只写了myView的时候,会自动追加为myView.mas_left。

    多个视图间隔相同

    注意下面设置宽度的时候是传递的数组,这样才能让多个视图进行等距离显示

    
UIView *view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor redColor];
[myView addSubview:view1];
    
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor yellowColor];
[myView addSubview:view2];
    
UIView *view3 = [[UIView alloc] init];
view3.backgroundColor = [UIColor greenColor];
[self.view addSubview:view3];
    
    
int padding = 10;

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
   // 设置中心点
   make.centerY.mas_equalTo(myView);
   // 设置左侧距离父视图10
   make.left.equalTo(myView).with.offset(padding);
   // 设置右侧距离和view2的左侧相隔10
   make.right.equalTo(view2.mas_left).with.offset(-padding);
   // 设置高度
   make.height.mas_equalTo(@150);
   // 宽度设置和view2以及view3相同
   make.width.equalTo(@[view2, view3]);
}];
    
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
   make.centerY.mas_equalTo(myView);
   make.height.mas_equalTo(view1);
   make.width.equalTo(@[view1, view3]);
}];

[view3 mas_makeConstraints:^(MASConstraintMaker *make) {
   make.centerY.mas_equalTo(myView);
   make.left.equalTo(view2.mas_right).with.offset(padding);
   make.right.equalTo(myView).with.offset(-padding);
   make.height.mas_equalTo(view1);
   make.width.equalTo(@[view2, view1]);
}];

    效果图:
    Masonry-3

    Posted in iOS

    Post navigation

    One thought on “Masonry简单使用”

      1. 一名来自xxx公司的iOS开发者说道：
        2015年4月30日 16:54

        博主，给你合并下多个视图相隔相同的方法：
        __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];
        }

        回复
         
        转载：http://archerzz.ninja/ios/masonry-code.html
  • 相关阅读:
    自动装配有哪些局限性?
    zk 节点宕机如何处理？
    Zookeeper 的 java 客户端都有哪些？
    BeanFactory – BeanFactory 实现举例？
    Spring 配置文件?
    什么是 Spring IOC 容器？
    Spring 框架中的单例 bean 是线程安全的吗?
    ApplicationContext 通常的实现是什么?
    什么是通知Advice？
    spring 支持哪些 ORM 框架?
  • 原文地址：https://www.cnblogs.com/106dapeng/p/4831974.html
Copyright © 2011-2022 走看看