iOS-基础视图约束--Masonry的简单使用总结

更深月色半人家,北斗阑干南斗斜<小火猴>

简介:

<strong>Masonry<strong> 是一个轻量级的布局框架 ( 是一个用代码写iOS或OS界面的第三方库,可以代替Auto layout。是目前最流行的AutoLayout框架.) 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Mac OS X。能实现 AutoLayout 的效果,也就是给我们想要的 View 视图进行约束,以满足不同尺寸设备和其他场景的屏幕适配.

下面是操作的一些属性,我们可以在AutoLayout 里面对应找到可以结合思考

@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;//文本基线```

---------------------
####简单的语法总结:
>with和and
基本没用过,方法的结果是返回对象本身,就是对其没有任何的操作.有人说就是为了代码的可读性,我道行太浅感觉有与没有差别不大.

-----
>mas_equalTo 和 equalTo 区别:
masequalTo 比equalTo多了类型转换操作,一般来说,大多数时候两个方法都是 通用的,但是对于数值元素使用mas_equalTo。对于对象或是多个属性的处理,使用equalTo。
>>mas_equalTo:这个方法会对参数进行封装( 可以跟数据和对象 )
 equalTo:这个方法不会对参数进行封装( 后面括号里面必须是对象 )
现在的 mas_equalTo: > equalTo:

------
>mas_makeConstraints 负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错
>>给view添加约束,约束方式有几种,分别是边距,宽,高,左上右下距离,基准线。添加过约束后可以有修正,修正有offset(位移)修正和multipliedBy(倍率)修正。(语法有`make.equalTo or make.greaterThan Or EqualTo or make.lessThanOrEqualTo + 倍数和位移修正`。使用 mas_makeConstraints方法的元素必须事先添加到父元素的中)

>mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束

------------
####使用的步骤:
>1.把Masonry的文件包拉进工程
2.在需要的地方引入头文件 `#import "Masonry.h"`
3.建立视图并添加到父视图之中
4.调用Masonry封装的方法进行约束

---------------
####简单例子太难得我现在也短时间写不出来
1.首先写个宏定义:

 ```object
#define MS(MyWeakSelf)  __weak __typeof(&*self)MyWeakSelf = self;

解释下:这是一个带参数的宏定义,前面 MS(MyWeakSelf)代替后面的__weak __typeof(&*self)MyWeakSelf = self; 其实就是定义一个与当前self同一个类型的变量(名为你输入的参数)并且是用__weak修饰的.其目的为了在Block里面进行视图的一些操作.

2.创建视图并添加到父视图上
// 一个背景蓝色的View长宽均是400中心在屏幕中心

UIView *centerViewBlue = [UIView new];
    centerViewBlue.backgroundColor = [UIColor blueColor];
    [self.view addSubview:centerViewBlue];

3.使用Masonry方法进行约束


 MS(MS);// 先走一下这个宏定义方法 相当于弱引用MS替代self

// mas_makeConstraints:这个方法只会添加新的约束
    [centerViewBlue mas_makeConstraints:^(MASConstraintMaker *make) {

// 在这个block里面利用make对象创建新的约束
// 尺寸约束
   make.size.mas_equalTo(CGSizeMake(400, 400));

// 位置约束
        make.centerX.mas_equalTo(MS.view.mas_centerX);
        make.centerY.mas_equalTo(MS.view.mas_centerY);
//等价 :make.center.mas_equalTo(CGPointMake(0, 0));这句话的意思是在相对于父视图偏移量均0也可以写成make.center.mas_equalTo(MS.view);
        
    }];

蓝色View的中心在屏幕中心而且长宽固定400

4.加一个红色视图View并约束使其四边距离蓝色的都是100

    UIView *redView = [UIView new];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    __weak UIView *blueView = centerViewBlue;
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {

// 四边的边距都是固定值
        make.left.equalTo(blueView).offset(100);  // 向右100间距
        make.right.equalTo(blueView).offset(-100); // 向左100间距
        make.top.equalTo(blueView).offset(100); // 向下100间距
        make.bottom.equalTo(blueView).offset(-100); // 向左100间距

//效果和下面的代码是一样的
  make.edges.equalTo(blueView).with.insets(UIEdgeInsetsMake(100, 100, 100, 100)
    }];

红色的View距离蓝色的View四面边距都是100

5,加一个绿色的大小是红色的一半,位于红色的中心
// 绿色的控件

    UIView *greeView = [UIView new];
    
    greeView.backgroundColor = [UIColor greenColor];
    
    [self.view addSubview:greeView];

    __weak UIView *redViewTemp = redView;
    
   [greeView mas_makeConstraints:^(MASConstraintMaker *make) {
        // 宽高是红色视图的0.5倍
        make.size.mas_equalTo(redViewTemp).multipliedBy(0.5);
        // 中心是红色视图的中心
        make.center.mas_equalTo(redViewTemp);
  
    }];

绿色View长宽是红色View的一半中心一样

难的,我也掌握不好,有时间再写点其他复杂的

'

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,569评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,499评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,271评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,087评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,474评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,670评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,911评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,636评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,397评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,607评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,093评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,418评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,074评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,092评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,865评论 0 196
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,726评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,627评论 2 270

推荐阅读更多精彩内容