需要適配的手機的尺寸
1.iphone4 4s (320 480)
2.iphone5 5s (320 568)
3.iphone6 6s (375x667)
4.iphone6p 6sp (414x736)
適配不同的屏幕尺寸常用的有三種形式
1.xib自動布局
2.使用NSLayoutConstraint類代碼創(chuàng)建(包括第三方類庫Masonry的使用)
3.使用VFM布局
今天我們了解的是Masonry第三方布局的時候用
VFM的使用可以參考http://www.reibang.com/p/dfc11861cc85里面有比較詳細(xì)的介紹
masonry下載地址：https://github.com/SnapKit/Masonry
一 .查看mastory的屬性
1.查看mastery的屬性
@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對比
1418956465427751 (1).jpg
常用的3個方法
1.mas_makeConstraints 只負(fù)責(zé)添加新增約束面褐，Autolayout中不能同時存在兩條針對于同一對象的約束，否則會報錯
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
- mas_updateConstraints 針對上面的情況取胎，會更新在block中出現(xiàn)的約束展哭，確保不會出現(xiàn)兩個相同的約束
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
3.mas_remakeConstraints 會清除之前的所有約束湃窍，僅保留最新的約束
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
使用方法示例
1、 居中顯示一個View
// 居中顯示一個view
UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor greenColor];
//在使用autolayout之前一定要先將試圖添加到superview上 否則會報錯
[self.view addSubview:view1];
// 用masonry約束布局
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
// 設(shè)置view1居中
make.center.equalTo(self.view);
// 設(shè)置view的寬 高
make.size.mas_equalTo(CGSizeMake(200, 200));
}];
2.讓一個View小于其superView（邊界10）
方法一：官方文檔提供方式
UIView *view2 = [[UIView alloc]init];
view2.backgroundColor = [UIColor cyanColor];
[self.view addSubview:view2];
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view.mas_top).with.offset(padding.top);
make.left.equalTo(self.view.mas_left).with.offset(padding.left);
make.bottom.equalTo(self.view.mas_bottom).with.offset(-padding.bottom);
make.right.equalTo(self.view.mas_right).with.offset(-padding.right);
}];
方法二：官方文檔方式：
//讓一個View小于其superView（邊界15）
UIView *view2 = [[UIView alloc]init];
view2.backgroundColor = [UIColor cyanColor];
[self.view addSubview:view2];
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view).insets(padding);
}];
方法三：
//讓一個View小于其superView（邊界15）
UIView *view2 = [[UIView alloc]init];
view2.backgroundColor = [UIColor cyanColor];
[self.view addSubview:view2];
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view).with.offset(padding.top);
make.left.equalTo(self.view).with.offset(padding.left);
make.bottom.equalTo(self.view).with.offset(-padding.bottom);
make.right.equalTo(self.view).with.offset(-padding.right);
}];
方法四：
//讓一個View小于其superView（邊界15）
UIView *view2 = [[UIView alloc]init];
view2.backgroundColor = [UIColor cyanColor];
[self.view addSubview:view2];
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.bottom.and.right.equalTo(self.view).width.insets(padding);
}];
以上四中方法的實現(xiàn)效果是一樣的其中要注意上面那個是with不是width如果輸入錯誤會出現(xiàn)
如下錯誤
Attributes should be chained before defining the constraint relation
with沒有什么語法意義只是讓語法好看匪傍，width是表示寬度的意思
3.實現(xiàn)兩個視圖2等分平均分配居中
// 讓2個view平分
UIView *view3 = [[UIView alloc]init];
view3.backgroundColor = [UIColor redColor];
[self.view addSubview:view3];
UIView *view4 = [[UIView alloc]init];
view4.backgroundColor = [UIColor greenColor];
[self.view addSubview:view4];
[view3 mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(self.view.mas_centerY);
make.left.equalTo(self.view.mas_left).with.offset(10);
make.right.equalTo(view4.mas_left).with.offset(-10);
make.height.mas_equalTo(@150);
make.width.equalTo(view4);
} ];
[view4 mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(self.view.mas_centerY);
make.left.equalTo(view3.mas_right).with.offset(10);
make.right.equalTo(self.view.mas_right).with.offset(-10);
make.height.equalTo(view3);
make.width.equalTo(view3);
}];
頁面效果：
Simulator Screen Shot 2016年4月14日 14.51.31.png
參考文檔：
1.https://github.com/SnapKit/Masonry
2.http://www.cocoachina.com/ios/20141219/10702.html
歡迎關(guān)注我們的微信公眾號您市，大家一起學(xué)習(xí)交流。
