• Masonry教程--IOS自适配,丢掉Autolayout吧


    文章来自http://www.brighttj.com/ios/ios-masonry-demo.html#comment-353

    如果说自动布局解救了多屏幕适配,那众多三方库的出现就解救了系统自动布局的写法。Masonry就是其中一个。
    在Github上,Masonry已经得到6000+个star,用法上也比较简单灵活,很大程度上替代了传统的NSLayoutConstraint布局方式。本文将利用几个案例来讲解Masonry的使用。
    Masonry下载地址:
    https://github.com/SnapKit/Masonry

    本文Demo下载地址:
    https://github.com/saitjr/MasonryDemo.git

    环境信息:

    Mac OS X 10.10.3
    Xcode 6.3
    iOS 8.3

    正文:

    前期准备:
    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来给当前控件添加约束。
  • 相关阅读:
    【情感计算】资源
    有意思的网站
    【NLP】新词发现
    [openwrt]网络配置
    【SSH】远程下载
    【OpenWRT】网络配置
    [SSH]连接失败
    [Openwrt]wifi桥接设置
    【Openwrt】刷
    【Python】excel
  • 原文地址:https://www.cnblogs.com/iamjjh/p/4759311.html
走看看 - 开发者的网上家园