常用第三方框架-Masonry（ios）和SnapKit(swift)

来源：互联网发布：php供求发布系统源码编辑：程序博客网时间：2024/05/17 00:57

Masonry的简单使用

首先，在正式使用Masonry之前,我们先来看看在xib中我们是如何使用AutoLayout

从图中我们可以看出,只要设置相应得局限，控制好父视图与子视图之间的关系就应该很ok的拖出你需要的需求。这里就不详细讲解具体拖拽的方法.....

然后,我们按着上图的属性来看看如何简单得使用Masonry

这里是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;    //高
@property (nonatomic, strong, readonly) MASConstraint *centerX; //横向居中
@property (nonatomic, strong, readonly) MASConstraint *centerY; //纵向居中
@property (nonatomic, strong, readonly) MASConstraint *baseline; //文本基线

属性有了,接着我们应该怎么在视图中添加约束呢，Masonry给我们提供了3个方法

//新增约束
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
//更新约束
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
//清楚之前的所有约束,只会保留最新的约束
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

合理的利用这个3个函数，基本上可以应对任何情况了

准备工作已经完成，我们来看几个小demo

1.居中一个view

    // 防止block中的循环引用
    __weak typeof (self) weakSelf = self;
    // 初始化一个View
    UIView *bgView = [[UIView alloc]init];
    bgView.backgroundColor = [UIColor redColor];
    [self.view addSubview:bgView];
    // 使用mas_makeConstraints添加约束
    [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(weakSelf.view);
        make.size.mas_equalTo(CGSizeMake(200, 200));
    }]；

效果图1

是不是很简单，这里有一点要必须注意下，添加约束前必须要把view添加到视图上。

那我要是不想固定他得宽高呢，让view的大小根据间距来控制怎么做

我们来设置一个基于父视图间距为10的view

[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(weakSelf.view);
make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));
}]；

这样就ok了！！！

make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));

等同于
    make.top.equalTo(weakSelf.view).with.offset(10);
    make.left.equalTo(weakSelf.view).with.offset(10);
    make.bottom.equalTo(weakSelf.view).with.offset(-10);
    make.right.equalTo(weakSelf.view).with.offset(-10);

2.多个view

2个view横向居中，第二个view距离第一个view间距为10

    UIView *view1 = [[UIButton alloc]init];
    view1.backgroundColor = [UIColor redColor];
    [self.view addSubview:view1];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(90, 90));
        make.centerX.equalTo(weakSelf.view);
        make.top.width.offset(90);
    }];

    UIView *view2 = [[UILabel alloc]init];
    view2.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view2];
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(100, 100));
        make.centerX.equalTo(view1);
        make.top.equalTo(view1.mas_bottom).with.offset(20);
    }];

效果图2

大家有没有看到第二个view代码中

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

view1.mas_bottom 是什么意思呢？如果只写view1，Masonry会默认是view1中最上面开始算起，也就是view2 间距view1 Y轴开始20的间距

通过这个也就可以很方便的设置view同另一个view之间上下左右的间距了

大家不妨试试view.mas_top view.mas_left view.mas_right 的效果是什么样得了

下面我附上一个完整的界面demo,大家可以看看

效果图3

代码如下：

- (void)setupFrame {
    __weak typeof(self) weakSelf = self;

    //上传头像
    UIButton *iconBtn = [[UIButton alloc]init];
    [iconBtn setCornerRadius:45];
    [iconBtn setBackgroundImage:[UIImage imageNamed:@"huantouxiang"] forState:UIControlStateNormal];
    [iconBtn addTarget:self action:@selector(iconButton) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:iconBtn];
    self.iconBtn = iconBtn;

    [self.iconBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(90, 90));
        make.centerX.equalTo(weakSelf.view);
        make.top.width.offset(90);
    }];

    //上传社区头像文字提醒
    UILabel *iconLabel = [[UILabel alloc]init];
    iconLabel.textColor = c3;
    iconLabel.text = @"上传社团头像";
    iconLabel.font = [UIFont systemFontOfSize:15];
    [self.view addSubview:iconLabel];

    [iconLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(iconBtn);
        make.top.equalTo(iconBtn.mas_bottom).with.offset(20);
    }];

    //社团编辑图标
    UIImageView *editIcon = [[UIImageView alloc]init];
    editIcon.image = [UIImage imageNamed:@"bianxie"];
    [self.view addSubview:editIcon];

    [editIcon mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(25, 20));
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.top.equalTo(iconLabel.mas_bottom).with.offset(30);
    }];

    //社团名
    UITextField *nameText = [[UITextField alloc]init];
    nameText.placeholder = @"请填写社区名(社团名最多6个字)";
    [self.view addSubview:nameText];
    self.nameText = nameText;

    [nameText mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(@20);
        make.centerY.equalTo(editIcon);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.left.equalTo(editIcon.mas_right).with.offset(5);
    }];

    //分割线
    UIImageView *xian = [[UIImageView alloc]init];
    xian.backgroundColor = DBColor(226, 226, 226);
    [self.view addSubview:xian];

    [xian mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(@1);
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.top.equalTo(editIcon.mas_bottom).with.offset(5);
    }];

    //选择标签
    UILabel *tagLabel = [[UILabel alloc]init];
    tagLabel.text = @"选择标签";
    tagLabel.textColor = c3;
    tagLabel.font = [UIFont systemFontOfSize:15];
    [self.view addSubview:tagLabel];

    [tagLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(@20);
        make.width.mas_equalTo(@60);
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.top.equalTo(xian).with.offset(35);
    }];

    //跳转标签选择
    UITextField *tagText = [[UITextField alloc]init];
    tagText.placeholder = @"美容颜";
    tagText.borderStyle=UITextBorderStyleRoundedRect;
    tagText.delegate = self;
    [tagText addTarget:self action:@selector(textTag) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:tagText];

    [tagText mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(tagLabel);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.left.equalTo(tagLabel.mas_right).with.offset(5);
    }];

    //tagView
    self.tagView = ({
        SKTagView *view = [SKTagView new];
        view.backgroundColor = [UIColor clearColor];
        view.padding    = UIEdgeInsetsMake(0, 0, 0, 0);
        view.insets    = 15;
        view.lineSpace = 10;
        __weak SKTagView *weakView = view;
        view.didClickTagAtIndex = ^(NSUInteger index){
            //Remove tag
            [weakView removeTagAtIndex:index];
        };
        view;
    });
    [self.view addSubview:self.tagView];
    [self.tagView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.top.equalTo(tagText.mas_bottom).with.offset(10);
    }];

    //label标识语
    UILabel *label = [[UILabel alloc]init];
    label.font = [UIFont systemFontOfSize:13];
    label.textColor = [UIColor redColor];
    label.text = @"PS:成员和视频越多得社团越容易被发现!";
    [self.view addSubview:label];

    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.top.equalTo(self.tagView.mas_bottom).with.offset(20);
    }];

    UIButton *commitBtn = [[UIButton alloc]init];
    [commitBtn setCornerRadius:5];
    [commitBtn setBorderWidth:1 color:DBTextThemeColor];
    [commitBtn setTitleColor:DBTextThemeColor forState:UIControlStateNormal];
    commitBtn.titleLabel.font = [UIFont systemFontOfSize:15];
    [commitBtn setTitle:@"确认发布" forState:UIControlStateNormal];
    [commitBtn addTarget:self action:@selector(commitButton) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:commitBtn];

    [commitBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(@30);
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.top.equalTo(label.mas_bottom).with.offset(50);
    }];
}
Swift编程之SnapKit基本使用
SanpKit最新版本支持了Swift3，Swift2迁移至3的时候只需要先更新至最新版本然后进入你的工程（注意是工程，而不是workspace）搜索:snp_然后替换为:snp.
--以下是原文--
SnapKit是大神@Robert Payne写的Masonry的Swift版本,其使用方式也与Masonry的使用方法极其类似.本文主要介绍一下在Swift中SnapKit的简单使用.
导入Swift:
1),通过cocoapdos安装,如果不会用cocoapods的话可以去看看code4app的这篇博客
Podfile配置如下:
platform :ios, '8.0'use_frameworks!target '你的工程名称' dopod 'SnapKit'end
2),直接将SnapKit拖进工程目录,到SnapKit的Github点击Download Zip按钮下载SnapKit工程文件,解压后把其中的SnapKit.xcodeproj文件直接拖进工程即可.切记确保SnapKit工程下的所有需要的支持文件全都被拖过去了.(SnapKit工程本身不支持iOS7或之前的系统,如果需要支持iOS7的话请考虑此方法导入.)
简单使用
举个小栗子,使一个相对当前View居中并且大小为200*100
        let redView = UIView()        redView.backgroundColor = UIColor.redColor()        self.view.addSubview(redView)        redView.snp_makeConstraints { (make) in            make.edges.equalTo(self.view).inset(UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20))//将redView的边界约束为self.view并且每条边都是20的偏移        }
效果图:

QQ20160404-3.png

当然,完全支持横屏,我这里就不放图片了.
与上面使用的edges相似的其他属性:
边界: left,right,top,bottom,edges,leading,trailing
(left与leading的区别,left始终代表view的左边,而leading代表view的布局起点,如果是从左到右布局则代表view的左边,其他的以此类推)
尺寸,大小:width,height,size
(如果需要在.equalTo或其他函数中使用这些属性,则要使用其对应的snp_top,snp_bottom.....版本)
优先级:priority,一般用在约束语句链的最后面,例如
make.bottom.equalTo(self.view).priorityLow()//低优先级//也可以使用priority()方法传入具体优先级的级别,(0-1000)
与equalTo相似的其他约束函数:
小于等于:lessThanOrEqualTo
大于等于:greaterThanOrEqualTo
我最经常使用lessThanOrEqualTo或者greaterThanOrEqualTo是针对于UILabel的约束,如果有这么个需求:文字长度如果短于某个值,则让label适应文字宽度,如果长于这个值的话,则让label的宽度固定,高度适应其文本,那么这里的"小于等于"就派上用场了,看代码:
        self.label.text = "这是一个很长的字符串"         self.label.numberOfLines = 0        self.view.addSubview(self.label)        label.snp_makeConstraints { (make) in            make.center.equalTo(self.view)            make.width.lessThanOrEqualTo(self.view).offset(-50)//只需要约束宽度即可,这里约束的最大宽度为屏幕宽度-50,事实上如果没有其他需求的话针对于一个label来说只需要确定一个位置,不需要大小就可以认定这是一个完整的约束.(此技能目前我只知道针对于UILabel,UIImageView,UIButton有效)        }
然后我们在控制器的touchesBegan里面这么写
            self.label.text! += self.label.text!
在初始状态的label:

QQ20160404-1.png

多点几下就是这样

QQ20160404-2.png
约束更新&重做约束:
SnapKit内置snp_updateConstraints方法用来更新约束.其内部写法与加约束的方式一致,需要注意的是,所谓的更新也就意味着砸原有的基础上进行修改,所以说更新约束必须要和加约束的时候相对应,比如说你在snp_makeConstraints中给一个View加了一个针对于center的约束,在更新约束时就只能修改针对于这个center的约束,否则的话你只能得到一个警报
重做约束,snp_remakeConstraints,这个理解起来就很简单了,实现这个方法之后会移除view之前所有的约束然后重新添加约束.
(更新约束之后如果需要立即体现出来的话,可以先对更新约束的父View调用setNeedsLayout()使父view进入需要更新布局的状态,其次再layoutIfNeeded()更新布局,如果需要动画的话,把layoutIfNeeded()放到动画过程里面即可)
SnapKit中没有类似于Masonry中的给一组View进行约束的方法.
一些小Tips
对于在UIScrollView上使用自动布局,scrollView的子视图务必四周都对scrollView进行约束,原因很简单:scrollView的滑动是依赖其属性contentSize,如果这个size小于scrollView视图本身的话就不能滑动,添加子视图的时候对四周做约束就相当于把contentSize"撑"开了,帮助其确定子控件也就是其contentSize大小.
AutoLayout针对于UILabel,UIImageView,UIButton来说,只需要确定其位置(x轴与y轴),便可以算是一个完整的约束,不同的是UILabel会根据其文字内容来确定控件大小,UIButton在没有标题的情况下同样如此,UIImageView以及设置了image的UIButton,一般会根据图片的大小来确定控件大小,所以对于带image的button以及UIImageView来说,最好还是要加上针对于四周的约束.
补充一点,有时候我们的需求是,不管是横屏还是竖屏,View刚好在导航栏下面,我们都知道导航栏加上状态栏是64的高度,而横屏状态下是没有状态栏的,针对这一点其实Masonry还有SnapKit都有针对这种情况的解决方案.在SnapKit的UIViewController+SnapKit.swift文件中,给UIViewController加了这样几个属性:
snp_topLayoutGuideTop//顾名思义,这里的topLayoutGuide一般指的是导航栏snp_topLayoutGuideBottomsnp_bottomLayoutGuideTop//这里的bottomLayoutGuide一般指的是Tabbarsnp_bottomLayoutGuideBottom那么guideTop,guideBottom就是针对导航栏或者tabbar的顶部与底部
PS.第一次在简书写文章,也是新手,如果有出错的地方,希望能指出，我会进行修改！

阅读全文

0 0