美文网首页
UI框架Masonry 一

UI框架Masonry 一

作者: 禄子_c79b | 来源:发表于2019-03-13 17:47 被阅读0次

    Masonry 框架
    https://blog.csdn.net/dragongd/article/details/61432393?utm_source=blogxgwz4目标

    理解 Masonry 框架的基本使用
    差不多是使用最为广泛的自动布局框架
    下载地址:https://github.com/SnapKit/Masonry
    掌握 Masonry 的三个核心函数
    知道 Masonry 的两个宏
    /// 构建约束
    mas_makeConstraints

    /// 更新约束 - 修改已经建立的约束,如果约束不存在,会在控制台输出错误
    mas_updateConstraints

    /// 会删除已经建立的所有约束,然后重新生成约束
    mas_remakeConstraints
    等于函数
    equalTo(参照对象) // 参照属性相同可以省略
    equalTo(参照对象.mas_参照属性) // 参照属性
    偏移函数
    offset(CGFloat) // 偏移量
    mas_offset(结构体) // 偏移结构题
    添加框架
    将 Masonry-master 下的 Masonry 拖拽到项目中
    引入头文件

    import "Masonry.h"

    案例
    案例1 —— 居中视图
    要求
    定义一个视图 200 * 50
    在任何设备上都摆放在屏幕的中心点
    代码演练
    准备工作

    • (void)viewDidLoad {
      [super viewDidLoad];

      [self layoutDemo1];
      }

    /**

    • 定义一个视图 200 * 50
    • 在任何设备上都摆放在屏幕的中心点
      */
    • (void)layoutDemo1 {

      UIView *v = [[UIView alloc] init];
      v.backgroundColor = [UIColor redColor];
      [self.view addSubview:v];

    }
    设置布局
    [v mas_makeConstraints:^(MASConstraintMaker *make) {
    make.size.mas_equalTo(CGSizeMake(200, 50));
    make.center.equalTo(self.view);
    }];
    一定要先将视图添加到 view 中,然后再添加约束

    案例2 —— 居中视图
    要求
    创建一个全屏的视图
    四周的边距都为 20
    代码实现
    代码准备

    • (void)layoutDemo2 {

      UIView *v = [[UIView alloc] init];
      v.backgroundColor = [UIColor redColor];
      [self.view addSubview:v];
      }
      第一种方法
      // 第一种方法
      [v mas_makeConstraints:^(MASConstraintMaker *make) {
      make.top.equalTo(self.view).offset(20);
      make.left.equalTo(self.view).offset(20);
      make.bottom.equalTo(self.view).offset(-20);
      make.right.equalTo(self.view).offset(-20);
      }];
      第二种方法 —— 函数式编程,链式编程
      // 第二种方法 —— 函数式编程,链式编程
      [v mas_makeConstraints:^(MASConstraintMaker *make) {
      make.top.left.equalTo(self.view).offset(20);
      make.right.bottom.equalTo(self.view).offset(-20);
      }];
      第三种方法
      // 第三种方法
      [v mas_makeConstraints:^(MASConstraintMaker *make) {
      make.edges.equalTo(self.view).mas_offset(UIEdgeInsetsMake(20, 20, 20, 20));
      }];
      案例3 —— 登录界面
      要求
      定义两个 UITextField 水平距离左右两边 20 点
      第一个 UITextField 垂直距离顶边 20 点
      第二个 UITextField 垂直距离第一个 20 点
      代码实现
      代码准备

    • (void)layoutDemo3 {
      UITextField *tf1 = [[UITextField alloc] init];
      tf1.borderStyle = UITextBorderStyleRoundedRect;
      [self.view addSubview:tf1];

      UITextField *tf2 = [[UITextField alloc] init];
      tf2.borderStyle = UITextBorderStyleRoundedRect;
      [self.view addSubview:tf2];

    }
    文本框1的自动布局
    [tf1 mas_makeConstraints:^(MASConstraintMaker make) {
    make.left.top.equalTo(self.view).offset(20);
    make.right.equalTo(self.view).offset(-20);
    }];
    文本框2的自动布局
    [tf2 mas_makeConstraints:^(MASConstraintMaker make) {
    make.left.right.equalTo(tf1);
    make.top.equalTo(tf1.mas_bottom).offset(20);
    }];
    案例4 —— 布局动画
    要求
    实现布局动画
    代码实现
    代码准备
    /

    布局动画
    */

    • (void)layoutDemo4 {
      UIView v = [[UIView alloc] init];
      v.backgroundColor = [UIColor redColor];
      [self.view addSubview:v];
      }
      添加按钮和监听方法
      /
      *
      布局动画
      */

    • (void)layoutDemo4 {
      UIView *v = [[UIView alloc] init];
      v.backgroundColor = [UIColor redColor];
      [self.view addSubview:v];

      // 添加按钮
      UIButton *btn = [UIButton buttonWithType:UIButtonTypeContactAdd];
      btn.center = self.view.center;
      [btn addTarget:self action:@selector(startAnimation) forControlEvents:UIControlEventTouchUpInside];
      [self.view addSubview:btn];

    }

    • (void)startAnimation {

    }
    添加布局
    // 添加视图布局
    [v mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.top.equalTo(self.view).offset(20);
    make.size.mas_equalTo(CGSizeMake(100, 100));
    }];
    定义属性
    @property (nonatomic, weak) UIView *demoView;
    使用属性记录局部变量
    // 使用属性记录局部变量
    self.demoView = v;
    实现按钮监听方法

    • (void)startAnimation {

      // 更改约束
      [self.demoView mas_updateConstraints:^(MASConstraintMaker *make) {
      make.size.mas_equalTo(CGSizeMake(200, 200));
      }];

      [UIView animateWithDuration:2.0 animations:^{
      [self.view layoutIfNeeded];
      }];
      }
      注意:mas_updateConstraints 只能修改已经建立的约束

    以下代码虽然能够执行,但是在控制台会输出错误

    // 更改约束
    [self.demoView mas_updateConstraints:^(MASConstraintMaker *make) {
    make.size.mas_equalTo(CGSizeMake(200, 200));
    // mas_updateConstraints 只能更新已经建立的约束,如果约束不存在,会在控制台输出错误
    make.right.mas_equalTo(self.view).offset(-20);
    }];
    重建约束
    // 重建约束
    [self.demoView mas_remakeConstraints:^(MASConstraintMaker *make) {
    make.right.bottom.equalTo(self.view).offset(-20);
    make.size.mas_equalTo(CGSizeMake(200, 200));
    }];
    提示:mas_remakeConstraints 会删除已经建立的所有约束,然后重新生成约束

    两个宏
    //define this constant if you want to use Masonry without the 'mas_' prefix
    // 如果不希望使用 mas_ 前缀,可以定义此常量

    define MAS_SHORTHAND

    //define this constant if you want to enable auto-boxing for default syntax
    // 如果希望启动自动装箱,可以定义此常量
    // 所谓自动装箱,就是能够自动将结构体包装成 NSValue,而无需再使用 mas_equalTo

    define MAS_SHORTHAND_GLOBALS

    关于这两个宏知道即可,避免工作中遇到不知道如何处理

    为什么不建议使用
    iOS 的框架越来越多,框架是否带前缀已经成为识别框架专业度的标记
    没有方法前缀,一旦发生冲突是非常糟糕的事情
    Masonry 团队还使用 Swift 开发了另外一套自动布局框架 SnapKit,习惯了简写会不习惯 SnapKit


    作者:F-国龙
    来源:CSDN
    原文:https://blog.csdn.net/dragongd/article/details/61432393
    版权声明:本文为博主原创文章,转载请附上博文链接!

    相关文章

      网友评论

          本文标题:UI框架Masonry 一

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