关闭

iso开发之屏幕适配 masonry

744人阅读 评论(0) 收藏 举报

正文:

前期准备:
1. 下载Masonry并导入到工程中;
2. 将Masonry.h导入当前控制器。

案例一:

要求:
无论在什么尺寸的设备上(包括横竖屏切换),红色view都居中显示。


案例一

实现:

#import "ViewController.h"
#import "Masonry.h"
@interface ViewController ()
@end
@implementation ViewController
- (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就是要添加约束的控件view)
 make.size.mas_equalTo(CGSizeMake(100, 100));
 // 添加居中约束(居中方式与self相同)
 make.center.equalTo(weakSelf.view); }];
}
@end

案例二:

要求:

  1. 无论在什么尺寸的设备上(包括横竖屏切换),黑色view的左、上边距、大小都不变;
  2. 灰色view的右边距不变
  3. 宽、高、上边距黑色view相等

    案例二

实现:

#import "ViewController2.h"
#import "Masonry.h"
@interface ViewController2 ()
@end
@implementation ViewController2
- (void)viewDidLoad
 { 
[super viewDidLoad]; 
 UIView *blackView = [UIView new]; 
blackView.backgroundColor = [UIColor blackColor]; 
[self.view addSubview:blackView]; 

// 给黑色view添加约束 
[blackView mas_makeConstraints:^(MASConstraintMaker *make) { 
// 添加大小约束 make.size.mas_equalTo(CGSizeMake(100, 100));

 // 添加左、上边距约束(左、上约束都是20)
 make.left.and.top.mas_equalTo(20); 
}]; 
// 初始化灰色view UIView *grayView = [UIView new]; 
grayView.backgroundColor = [UIColor lightGrayColor]; 
[self.view addSubview:grayView]; 

// 给灰色view添加约束
 [grayView mas_makeConstraints:^(MASConstraintMaker *make) {
 // 大小、上边距约束与黑色view相同 
make.size.and.top.equalTo(blackView); 
// 添加右边距约束
(这里的间距是有方向性的,左、上边距约束为正数,右、下边距约束为负数)
 make.right.mas_equalTo(-20);
 }];
}
@end

在上面的案例中,涉及以下内容:

  1. 在Masonry中,and,with都没有具体操作,仅仅是为了提高程序的可读性
    make.left.and.top.mas_equalTo(20);
    等价于
    make.left.top.mas_equalTo(20);

  2. equalTo与mas_equalTo
    如果约束条件是数值或者结构体等类型,可以使用mas_equalTo进行包装。关于这个问题,我也不是很清楚,可以看看官方的解释:

    Instead of using NSNumber, you can use primitives and structs to build your constraints.By default,
    macros which support autoboxing are prefixed with mas_.
    Unprefixed versions are available by defining MAS_SHORTHAND_GLOBALS
    before importing Masonry.

    我一般将数值类型的约束用mas_equalTo,而相对于某个控件,或者某个控件的某个约束,我会使用equalTo,如:
    make.size.mas_equalTo(CGSizeMake(100, 100));make.center.equalTo(weakSelf.view);

案例三:

要求:

  1. 有两个view,黑色与灰色;
  2. 黑色view的左、上、右边距均为20,下边距灰色view 20,宽度自适应,高度与灰色view平分整个界面;
  3. 灰色view宽度为黑色view的一半(即左边以中线起始),右、下边距与黑色view相同,高度与黑色view相同。

    案例三

实现:

#import "ViewController3.h"
#import "Masonry.h"
@interface ViewController3 ()
@end
@implementation ViewController3
- (void)viewDidLoad
 { 
[super viewDidLoad]; 
  UIView *blackView = [UIView new]; 
blackView.backgroundColor = [UIColor blackColor]; 
[self.view addSubview:blackView];

 // 给黑色view添加约束 
[blackView mas_makeConstraints:^(MASConstraintMaker *make) {
 // 添加左、上边距约束 make.left.and.top.mas_equalTo(20);
 // 添加右边距约束 
make.right.mas_equalTo(-20); }]; 

view UIView *grayView = [UIView new]; 
grayView.backgroundColor = [UIColor lightGrayColor]; 
[self.view addSubview:grayView]; 

// 给灰色view添加约束
 [grayView mas_makeConstraints:^(MASConstraintMaker *make) { 
// 添加右、下边距约束 make.bottom.and.right.mas_equalTo(-20); 
// 添加高度约束,让高度等于blackview 
make.height.equalTo(blackView); 
// 添加上边距约束(上边距 = 黑色view的下边框 + 偏移量20) 
make.top.equalTo(blackView.mas_bottom).offset(20); 
// 添加左边距(左边距 = 父容器纵轴中心 + 偏移量0) 
make.left.equalTo(weakSelf.view.mas_centerX).offset(0); }];
}
@end

案例四:

要求
当键盘挡住输入框时,输入框自动向上弹到键盘上方。
实现
这里需要使用到Masonry的另外一个方法mas_updateConstraints。这个方法用于更新控件约束。
具体的实现方式可以下载Demo来看,这里只贴出键盘弹出时的处理代码:

- (void)keyboardWillChangeFrameNotification:(NSNotification *)notification { 
// 获取键盘基本信息(动画时长与键盘高度)
 NSDictionary *userInfo = [notification userInfo]; 
CGRect rect = 
[userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];

 CGFloat keyboardHeight = CGRectGetHeight(rect); 
CGFloat keyboardDuration = 
[userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];

 // 修改下边距约束
 [_textField mas_updateConstraints:^(MASConstraintMaker *make) { 
make.bottom.mas_equalTo(-keyboardHeight); }]; 

// 更新约束

 [UIView animateWithDuration:keyboardDuration animations:^{
 [self.view layoutIfNeeded]; }];
}

总结:

  1. 可以给控件添加left/right/top/bottom/size/height/width/insert约束;
  2. 库提供了三个方法,mas_makeConstraints添加约束,mas_updateConstraints修改约束,mas_remakeConstraints清除以前约束并添加新约束;
  3. 可以通过view.mas_bottom获得view的某个约束;
  4. 在约束的block中,使用make来给当前控件添加约束。
0
0
查看评论

iso开发之屏幕适配 masonry

正文: 前期准备: 1. 下载Masonry并导入到工程中; 2. 将Masonry.h导入当前控制器。 案例一: 要求: 无论在什么尺寸的设备上(包括横竖屏切换),红色view都居中显示。 案例一 实现: #import "ViewController.h&q...
  • u012960049
  • u012960049
  • 2015-11-19 19:29
  • 744

第三方库Masonry屏幕适配用法(方便简单)

  • 2015-12-01 14:35
  • 29KB
  • 下载

iOS中的Masonry纯代码适配屏幕例子

文章来自http://www.brighttj.com/ios/ios-masonry-demo.html#comment-353 如果说自动布局解救了多屏幕适配,那众多三方库的出现就解救了系统自动布局的写法。Masonry就是其中一个。 在Github上,Masonry已经得到6000+个...
  • WZZ77521
  • WZZ77521
  • 2015-11-18 11:12
  • 875

iOS开发之--屏幕适配相关小结

屏幕适配小结 一、纯手动之Autolayout 1、VFL语言添加约束 VFL(Visual format language)语言是苹果为了简化手写Autolayout代码所创建的专门负责编写约束的代码。为我们简化了许多代码量。 2、使用步骤 使用步骤同手动添加约束保持一致 创建控件添...
  • qq136501564
  • qq136501564
  • 2016-07-19 12:43
  • 2184

Masonry适配的简单使用

一.Masonry是什么: 答:是一个很好的三方,用来做适配的 二.怎么使用Masonry 1.先导入头文件 #define MAS_SHORTHAND #define MAS_SHORTHAND_GLOBALS//加上这两个宏就不需要考虑父控件了 #import "M...
  • jacksBO
  • jacksBO
  • 2016-12-15 16:32
  • 219

Masonry教程--IOS自适配

字数1286 阅读6450 评论5 喜欢39 文章来自http://www.brighttj.com/ios/ios-masonry-demo.html#comment-353 如果说自动布局解救了多屏幕适配,那众多三方库的出现就解救了系统自动布局的写法。Maso...
  • sinat_29789455
  • sinat_29789455
  • 2016-01-07 12:21
  • 1609

屏幕适配、自适应(第三方之Masonry)

Masonry介绍与使用实践:快速上手Autolayout 前言 1 MagicNumber -> autoresizingMask -> autolayout ...
  • yangqian721
  • yangqian721
  • 2017-07-18 22:10
  • 93

ios-屏幕适配masonry的使用

在我们项目开发的过程 屏幕适配很重要  下面这个例子适配 各种iPhone 屏幕 (iPhone4,iPhone4s,iPhone5,iPhone5s,iPhone6,iPhone6s) 原理很简单 知道他的使用方法即可 我们已经过了4.0 屏幕的时代 苹果推出一款款新的产...
  • u012701023
  • u012701023
  • 2015-10-17 19:26
  • 2486

懒加载和Masonry结合

最近优化自己的项目,把一些控件多的列表页改为了懒加载,也是自己第一次在项目中使用这个知识点,结合一直使用的Masonry纯代码适配,特地总结一下。
  • J1angLei
  • J1angLei
  • 2017-03-09 16:12
  • 656

Masonry解析ios屏幕适配

Masonry是一个轻量级的布局框架与更好的包装AutoLayout语法,纯代码适配屏幕的福音 下面根据个人代码经验简单介绍 mas的使用异常简单,autolayout的语法糖  下面是一个例子 mas在导入框架之后就可以直接使用。注意:必须先添加子视图才可以用block方法  比如这里是在...
  • durant911
  • durant911
  • 2016-04-19 17:46
  • 150
    个人资料
    • 访问:216105次
    • 积分:4736
    • 等级:
    • 排名:第7248名
    • 原创:271篇
    • 转载:0篇
    • 译文:0篇
    • 评论:20条
    最新评论