美文网首页
自动布局 - Masonry的使用(一)

自动布局 - Masonry的使用(一)

作者: iOSser | 来源:发表于2016-06-27 11:53 被阅读95次

1.Masonry支持的属性:

 //左侧
@property (nonatomic, strong, readonly) MASViewAttribute *mas_left;
//上侧
@property (nonatomic, strong, readonly) MASViewAttribute *mas_top;
//右侧
@property (nonatomic, strong, readonly) MASViewAttribute *mas_right;
//下侧
@property (nonatomic, strong, readonly) MASViewAttribute *mas_bottom;
//首部
@property (nonatomic, strong, readonly) MASViewAttribute *mas_leading;
//尾部
@property (nonatomic, strong, readonly) MASViewAttribute *mas_trailing;
 //宽
@property (nonatomic, strong, readonly) MASViewAttribute *mas_width;
 //高
@property (nonatomic, strong, readonly) MASViewAttribute *mas_height;
//横向中点
@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerX;
//纵向中点
@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerY;
//文本基线
@property (nonatomic, strong, readonly) MASViewAttribute *mas_baseline;

支持属性对应的NSLayoutAttrubute(枚举值) 从上往下依次和属性对应,

typedef NS_ENUM(NSInteger, NSLayoutAttribute) {
NSLayoutAttributeLeft = 1,
NSLayoutAttributeRight,
NSLayoutAttributeTop,
NSLayoutAttributeBottom,
NSLayoutAttributeLeading,
NSLayoutAttributeTrailing,
NSLayoutAttributeWidth,
NSLayoutAttributeHeight,
NSLayoutAttributeCenterX,
NSLayoutAttributeCenterY,
NSLayoutAttributeBaseline,
NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,
NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),


NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),

//表示没有属性
NSLayoutAttributeNotAnAttribute = 0 

};

2.Masonry的实际应用举例,以一个简单的居中视图为例

步骤1.
创建工程引入第三方Masonry并导入头文件Masonry.h , 我这里直接在ViewController.m里操作了截图如下:

导入头文件Masonry.h图

步骤2.
自然是上布局代码,代码每行都有清晰的注释,这里不做过多的介绍:
- (void)viewDidLoad {
[super viewDidLoad];
//防止block的循环引用

__weak typeof (self) weakSelf = self;
//初始化view 并设置背景
UIView *view = [UIView new];
view.backgroundColor = [UIColor redColor];
[self.view addSubview:view];

//使用mas_makeConstraints添加约束
[view mas_makeConstraints:^(MASConstraintMaker *make) {
    //添加大小约束
    make.size.mas_equalTo(CGSizeMake(200, 200));
    //添加居中的约束(居中的方式与self相同)
    make.center.equalTo(weakSelf.view);
}];
}

效果图

效果图

总结:简单介绍了Masonry和Masonry的简单实用,关于Masonry的其他使用的方法我会陆续发布文章.

相关文章

网友评论

      本文标题:自动布局 - Masonry的使用(一)

      本文链接:https://www.haomeiwen.com/subject/wxuzdttx.html