zoukankan      html  css  js  c++  java
  • iOS开发-Masonry简易教程

    关于iOS布局自动iPhone6之后就是AutoLayOut,AutoLayOut固然非常好用,不过有时候我们需要在页面手动进行页面布局,VFL算是一种选择,如果对VFL不是很熟悉可以参考iOS开发-VFL(Visual format language)和AutolayoutVFL不复杂,理解起来很容易,实际开发中用的特别熟还好,要是第一次看估计要花点功夫才能搞定。Masonry算是VFL的简化版,用的人比较多,之前项目中用过一次,对手动写页面的开发来说算是福利。

     基础知识

    首先我们看一个常见的问题将一个子View放在的UIViewController的某个位置,通过设置边距来实现,效果如下:

    如果通过VFL我们代码会是这样的:

        UIView *superview                               = self.view;
    
        UIView *view1                                   = [[UIView alloc] init];
        view1.translatesAutoresizingMaskIntoConstraints = NO;
        view1.backgroundColor                           = [UIColor redColor];
        [superview addSubview:view1];
    
        UIEdgeInsets padding                            = UIEdgeInsetsMake(200, 50, 200, 50);
    
        [superview addConstraints:@[
    
                                    //约束
                                    [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],
    
                                    ]];

    只是简单的设置了一个边距,如果视图的关系比较复杂,维护起来会是一个很痛苦的事情,我们看一下Masonry是如何实现的,导入Masonry.h头文件,约束的代码:

        UIView  *childView=[UIView new];
        [childView setBackgroundColor:[UIColor redColor]];
        //先将子View加入在父视图中
        [self.view addSubview:childView];
        __weak typeof(self) weakSelf = self;
        UIEdgeInsets padding = UIEdgeInsetsMake(200, 50, 200, 50);
        [childView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.equalTo(weakSelf.view).with.insets(padding);
        }];
    

    通过mas_makeConstraints设置边距有种鸟枪换炮的感觉,我们即将开启一段新的旅程,可以紧接着看下面比较实用的功能~

    实用知识

    1.View设置大小 

        UIView  *childView=[UIView new];
        [childView setBackgroundColor:[UIColor redColor]];
        //先将子View加入在父视图中
        [self.view addSubview:childView];
        __weak typeof(self) weakSelf = self;
        [childView mas_makeConstraints:^(MASConstraintMaker *make) {
            //设置大小
            make.size.mas_equalTo(CGSizeMake(100, 100));
            //居中
            make.center.equalTo(weakSelf.view);
        }];

    效果如下:

      

    这里友情其实一个小内容,目前我们设置约束都是通过mas_makeConstraints用来创建约束,mas_updateConstraints用来更新约束,mas_remakeConstraints重置约束,清除之前的约束,保留最新的约束,如果想深入解释下,可以阅读下面的英文解释~

    /**
     *  Creates a MASConstraintMaker with the callee view.
     *  Any constraints defined are added to the view or the appropriate superview once the block has finished executing
     *
     *  @param block scope within which you can build up the constraints which you wish to apply to the view.
     *
     *  @return Array of created MASConstraints
     */
    - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
    
    /**
     *  Creates a MASConstraintMaker with the callee view.
     *  Any constraints defined are added to the view or the appropriate superview once the block has finished executing.
     *  If an existing constraint exists then it will be updated instead.
     *
     *  @param block scope within which you can build up the constraints which you wish to apply to the view.
     *
     *  @return Array of created/updated MASConstraints
     */
    - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
    
    /**
     *  Creates a MASConstraintMaker with the callee view.
     *  Any constraints defined are added to the view or the appropriate superview once the block has finished executing.
     *  All constraints previously installed for the view will be removed.
     *
     *  @param block scope within which you can build up the constraints which you wish to apply to the view.
     *
     *  @return Array of created/updated MASConstraints
     */
    - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
    

    2.设置高度,这里设置左右边距,因此不设置宽度,如果想单独设置width可参考高度的设置方式:

        UIView  *childView=[UIView new];
        [childView setBackgroundColor:[UIColor greenColor]];
        //先将子View加入在父视图中
        [self.view addSubview:childView];
        __weak typeof(self) weakSelf = self;
        [childView mas_makeConstraints:^(MASConstraintMaker *make) {
            //距离顶部44
            make.top.equalTo(weakSelf.view.mas_top).with.offset(44);
            //距离左边30
            make.left.equalTo(weakSelf.view.mas_left).with.offset(30);
            //距离右边30,注意是负数
            make.right.equalTo(weakSelf.view.mas_right).with.offset(-30);
            //高度150
            make.height.mas_equalTo(@150);
        }];
    

    3.子视图之间的位置设置:

        UIView  *childView=[UIView new];
        [childView setBackgroundColor:[UIColor greenColor]];
        //先将子View加入在父视图中
        [self.view addSubview:childView];
        __weak typeof(self) weakSelf = self;
        [childView mas_makeConstraints:^(MASConstraintMaker *make) {
            //距离顶部44
            make.top.equalTo(weakSelf.view.mas_top).with.offset(44);
            //距离左边30
            make.left.equalTo(weakSelf.view.mas_left).with.offset(30);
            //距离右边30,注意是负数
            make.right.equalTo(weakSelf.view.mas_right).with.offset(-30);
            //高度150
            make.height.mas_equalTo(@150);
        }];
        //地址:http://www.cnblogs.com/xiaofeixiang/
        UIView *nextView=[UIView new];
        [nextView setBackgroundColor:[UIColor redColor]];
        [self.view addSubview:nextView];
        [nextView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(childView.mas_bottom).with.offset(30);
            make.right.equalTo(childView.mas_right).with.offset(-30);
            make.width.mas_equalTo(@100);
            make.height.mas_equalTo(@100);
        }];
    

    4.链式写法,算是一个便利的写法:

        UIView  *childView=[UIView new];
        [childView setBackgroundColor:[UIColor greenColor]];
        //先将子View加入在父视图中
        [self.view addSubview:childView];
        __weak typeof(self) weakSelf = self;
        [childView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.and.left.mas_equalTo(weakSelf.view).with.offset(100);
            make.bottom.and.right.mas_equalTo(weakSelf.view).with.offset(-100);
            //第二种写法更简单,相对于就是父视图
    //        make.top.and.left.mas_equalTo(100);
    //        make.bottom.and.right.mas_equalTo(-100);
        }];
        
        UILabel *label=[UILabel new];
        [label setText:@"博客园-FlyElephant"];
        [label setTextColor:[UIColor redColor]];
        [label setTextAlignment:NSTextAlignmentCenter];
        [self.view addSubview:label];
        [label mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(weakSelf.view).with.offset(10);
            make.height.mas_equalTo(20);
            make.right.mas_equalTo(weakSelf.view).with.offset(-10);
            make.bottom.mas_equalTo(weakSelf.view).with.offset(-50);
        }];
    

     

    网上关于Masonry的教程很多,给的例子的也很多,这几种情况基本上满足了开发中的需求,不会有太多的出入,算是一个简易版的教程,Masonry的中属性和iOS中的属性是有对应的关系,不过因为很简单,基本上没怎么看,下图是一个对照关系:

  • 相关阅读:
    SQL练习题9:获取所有部门当前(dept_manager.to_date='9999-01-01')manager的当前(salaries.to_date='9999-01-01')薪水情况,给出dept_no, emp_no以及salary(请注意,同一个人可能有多条薪水情况记录)
    SQL练习题8:找出所有员工当前(to_date='9999-01-01')具体的薪水salary情况,对于相同的薪水只显示一次,并按照逆序显示
    数据仓库、数据集市、数据湖、数据中台概念理解
    SQL练习题七:查找薪水变动超过15次的员工号emp_no以及其对应的变动次数t
    SQL练习题6:查找所有员工入职时候的薪水情况,给出emp_no以及salary, 并按照emp_no进行逆序(请注意,一个员工可能有多次涨薪的情况)
    SQL练习五:查找所有员工的last_name和first_name以及对应部门编号dept_no,也包括暂时没有分配具体部门的员工(请注意输出描述里各个列的前后顺序)
    SQL练习题四:查找所有已经分配部门的员工的last_name和first_name以及dept_no(请注意输出描述里各个列的前后顺序)
    SQL练习题三: 查找各个部门当前(dept_manager.to_date='9999-01-01')领导当前(salaries.to_date='9999-01-01')薪水详情以及其对应部门编号dept_no (注:请以salaries表为主表进行查询,输出结果以salaries.emp_no升序排序,并且请注意输出结果里面dept_no列是最后一列)
    SQL练习题二:查找入职员工时间排名倒数第三的员工所有信息,为了减轻入门难度,目前所有的数据里员工入职的日期都不是同一天
    [CF1379E]Inverse Genealogy
  • 原文地址:https://www.cnblogs.com/xiaofeixiang/p/5127825.html
Copyright © 2011-2022 走看看