前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS-屏幕适配实现(Masonry)

iOS-屏幕适配实现(Masonry)

作者头像
xy_ss
发布2023-11-22 09:33:22
1870
发布2023-11-22 09:33:22
举报
文章被收录于专栏:浮躁的喧嚣浮躁的喧嚣

Masonry简介

Masonry是一个轻量级的布局框架,拥有自己的描述语法,采用更优雅的链式语法封装AutoLayout,简洁明了并具有高可读性,而且同时支持 iOS 和 Max OS X

下载链接 Masonry


Masonry配置

使用pods方式引入类库,pod 'Masonry' 引入头文件 #import "Masonry.h"


Masonry使用

示例:

代码语言:javascript
复制
[testView mas_makeConstraints:^(MASConstraintMaker *make) {
        
     make.left.mas_equalTo(self.view.mas_left).offset(50);
     make.right.mas_equalTo(self.view.mas_right).offset(-50);           
     make.top.mas_equalTo(self.view.mas_top).offset(50);
     make.bottom.mas_equalTo(self.view.mas_bottom).offset(-50);
}];

基本格式:(make . 指定其的一个属性 . 约束关系)

代码语言:javascript
复制
make.attr.constrains

make:可认为是要布局的view的代理 constrains:约束可能是多级的组合,比如.mas_equalTo(self.view.mas_left).offset(50)的两级组合,显示找到父view的左边位置,再向右(X轴)移动50点

给控件添加、更新约束

添加新的约束

代码语言:javascript
复制
[xxxView mas_makeConstraints:^(MASConstraintMaker *make) {
     
  }];

删除控件以前所有约束,添加新约束

代码语言:javascript
复制
[xxxView mas_remakeConstraints:^(MASConstraintMaker *make) {
      
  }];

更新约束,写哪条更新哪条,其他约束不变

代码语言:javascript
复制
[xxxView mas_updateConstraints:^(MASConstraintMaker *make) {
      
  }];
代码语言:javascript
复制
关于更新约束布局相关的API,主要用以下四个API:
-(void)updateConstraintsIfNeeded调用此方法,如果有标记为需要重新布局的约束,则立即进行重新布局,内部会调用updateConstraints方法
-(void)updateConstraints重写此方法,内部实现自定义布局过程
-(BOOL)needsUpdateConstraints当前是否需要重新布局,内部会判断当前有没有被标记的约束
-(void)setNeedsUpdateConstraints标记需要进行重新布局
代码语言:javascript
复制
关于UIView重新布局相关的API,主要用以下三个API:
-(void)setNeedsLayout标记为需要重新布局
-(void)layoutIfNeeded查看当前视图是否被标记需要重新布局,有则在内部调用layoutSubviews方法进行重新布局
-(void)layoutSubviews重写当前方法,在内部完成重新布局操作

设置约束关系

约束关系

说明

equalTo() 和 mas_equalTo()

设置属性等于某个数值

greaterThanOrEqualTo() 和 mas_ greaterThanOrEqualTo()

设置属性大于或等于某个数值

lessThanOrEqualTo() 和 mas_ lessThanOrEqualTo()

设置属性小于或等于某个数值

multipliedBy() 和 mas_ multipliedBy()

设置属性乘以因子后的值

dividedBy() 和 mas_ dividedBy()

设置属性除以因子后的值

设置控件布局属性

布局属性

说明

尺寸

width、height、size

边距

left、top、right、bottom、leading、trailing

中心点

center、centerX、centerY

边界

edges

代码语言:javascript
复制
//iOS8之后Masonry新出了几个属性:
//距离边框的距离,等同于选中Storyboard的Constrain to margins后加约束
@property (nonatomic, strong, readonly) MASConstraint *leftMargin;
@property (nonatomic, strong, readonly) MASConstraint *rightMargin;
@property (nonatomic, strong, readonly) MASConstraint *topMargin;
@property (nonatomic, strong, readonly) MASConstraint *bottomMargin;
@property (nonatomic, strong, readonly) MASConstraint *leadingMargin;
@property (nonatomic, strong, readonly) MASConstraint *trailingMargin;
@property (nonatomic, strong, readonly) MASConstraint *centerXWithinMargins;
@property (nonatomic, strong, readonly) MASConstraint *centerYWithinMargins;

其中leading与left,trailing与right 在正常情况下是等价的,但是当一些布局是从右至左时(比如阿拉伯文) 则会对调

关于mas_xxx和xxx的比较

以equalTo() 和 mas_equalTo()为例

代码语言:javascript
复制
#define mas_equalTo(...)                 equalTo(MASBoxValue((__VA_ARGS__)))
#define mas_greaterThanOrEqualTo(...)      greaterThanOrEqualTo(MASBoxValue((__VA_ARGS__)))
#define mas_lessThanOrEqualTo(...)       lessThanOrEqualTo(MASBoxValue((__VA_ARGS__)))

#define mas_offset(...)                  valueOffset(MASBoxValue((__VA_ARGS__)))

默认情况下 equalTo():参数支持的类型除了NSNumber之外,还有CGPoint CGSize UIEdgeInsets mas_equalTo(): 对其参数进行了一个Auto Boxing操作(装箱) MASBoxValue(根据传入参数类型的不同,装箱成 NSValue 或 NSNumber 类型的对象),对参数并不挑剔,几乎是传啥数据类型都可以

对于对象或是多个属性的处理,使用equalTo。特别是多个属性时,必须使用equalTo

添加下面的宏(必须加在 #import "Masonry.h" 前面)

代码语言:javascript
复制
#define MAS_SHORTHAND_GLOBALS

代码里mas_equalTo可以不加mas前缀,mas_equalTo和equalTo没有区别

代码语言:javascript
复制
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.width.equalTo(100);
    make.height.mas_equalTo(100);        
}];

以width() 和 mas_width()为例

默认情况下 width():make对象的一个属性,用来添加宽度约束,表示对宽度进行约束 mas_width():一个属性值,用来当做equalTo的参数,表示某个控件的宽度属性

添加下面的宏(必须加在 #import "Masonry.h" 前面)

代码语言:javascript
复制
#define MAS_SHORTHAND   

代码里mas_width可以不加mas前缀

代码语言:javascript
复制
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
 make.left.mas_equalTo(self.left).offset(10);
 make.top.mas_equalTo(self.top).offset(10);
 make.right.mas_equalTo(self.right).offset(-10);
 make.bottom.mas_equalTo(self.bottom).offset(-10);
}];

设置约束偏移

方法

参数

说明

offset(CGFloat offset)

CGFloat

控件属性相对于参照物偏移多少

centerOffset(CGPoint offset)

CGPoint

控件center相对于参照物的偏移大小

sizeOffset(CGSize offset)

CGSize

控件size相对于参照物偏移多少

insets(MASEdgeInsets insets)

MASEdgeInsets

控件四边相对于参照物偏移多少

offset示例

代码语言:javascript
复制
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
           make.left.mas_equalTo(self.mas_left).offset(20);
           make.top.mas_equalTo(self.mas_top).offset(20);
           make.right.mas_equalTo(self.mas_right).offset(-20);
           make.bottom.mas_equalTo(self.mas_bottom).offset(-20);
 }];

centerOffset示例

代码语言:javascript
复制
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(100);
        make.center.equalTo(self).centerOffset(CGPointMake(-100, -100));
 }];

sizeOffset示例

代码语言:javascript
复制
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.mas_equalTo(self);
        make.width.and.height.mas_equalTo(self).sizeOffset(CGSizeMake(-40, -40));
}];

insets示例

代码语言:javascript
复制
//具体父控件四周都是20间距
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
       make.edges.mas_equalTo(self).insets(UIEdgeInsetsMake(20, 20, 20, 20));
}];

设置约束优先级

Masonry为我们提供了三个默认的方法,priorityLow()、priorityMedium()、priorityHigh(),优先级最大数值是1000

代码语言:javascript
复制
 typedef UILayoutPriority MASLayoutPriority;
  static const MASLayoutPriority MASLayoutPriorityRequired = UILayoutPriorityRequired;
  static const MASLayoutPriority MASLayoutPriorityDefaultHigh = UILayoutPriorityDefaultHigh;
  static const MASLayoutPriority MASLayoutPriorityDefaultMedium = 500;
  static const MASLayoutPriority MASLayoutPriorityDefaultLow = UILayoutPriorityDefaultLow;
  static const MASLayoutPriority MASLayoutPriorityFittingSizeLevel = UILayoutPriorityFittingSizeLevel;

自己设置优先级的值,可以通过priority()方法来设置

代码语言:javascript
复制
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
      
      make.center.mas_equalTo(self.view);
      
      make.width.mas_equalTo(100).priorityLow();
      make.width.mas_equalTo(50).priorityHigh();

      make.height.mas_equalTo(50).priority(200);
      make.height.mas_equalTo(100).priority(800);
  }];

设置约束连词

with和and,放到表达式中,却可以作为连词让链式表达式更接近自然语言

代码语言:javascript
复制
//什么也没有做,只是返回自己本身
  - (MASConstraint *)with {
    return self;
  }
  
  - (MASConstraint *)and {
    return self;
  }

示例:以下三句作用效果一致

代码语言:javascript
复制
 make.width.width.height.equalTo(@100);
 make.width.and.height.equalTo(@100);
 make.width.height.equalTo(@100);

Masonry注意

  • 使用Masonry添加约束之前,需要在addSubview之后才能使用,否则会导致崩溃
  • 在添加约束时常会出现一些错误,约束出现问题的原因一般就是两种:约束冲突和缺少约束。对于这两种问题,可以通过调试和log排查
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-02-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Masonry简介
  • Masonry配置
  • Masonry使用
    • 给控件添加、更新约束
      • 设置约束关系
        • 设置控件布局属性
          • 关于mas_xxx和xxx的比较
            • 设置约束偏移
              • 设置约束优先级
                • 设置约束连词
                • Masonry注意
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档