美文网首页
Masonry简单实用以及布局硬度压缩UILayoutPrior

Masonry简单实用以及布局硬度压缩UILayoutPrior

作者: iOS乐乐 | 来源:发表于2020-02-26 22:48 被阅读0次

一 简单参数的介绍

 >参数一:(UILayoutPriority)
 >设置优先级等级,数值越大,优先级越高。
 >UILayoutPriorityRequired           == 1000;
 >UILayoutPriorityDefaultHigh        == 750;
 >UILayoutPriorityDefaultLow         == 250;
 >UILayoutPriorityFittingSizeLevel   == 50;
mas_makeConstraints()    添加约束
mas_remakeConstraints()  移除之前的约束,重新添加新的约束
mas_updateConstraints()  更新约束,写哪条更新哪条,其他约束不变

equalTo()       参数是对象类型,一般是视图对象或者mas_width这样的坐标系对象
mas_equalTo()   和上面功能相同,参数可以传递基础数据类型对象,可以理解为比上面的API更强大

width()         用来表示宽度,例如代表view的宽度
mas_width()     用来获取宽度的值。和上面的区别在于,一个代表某个坐标系对象,一个用来获取坐标系对象的值
[_textLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(weakSelf.mas_left);
    make.width.equalTo(weakSelf).multipliedBy(0.01f);//相对于weakSelf比例进行缩放
    make.top.equalTo(weakSelf);
    make.bottom.equalTo(weakSelf.mas_bottom).mas_offset(-10);
}];

二 动态刷新布局简单实用


纯代码约束优先级.gif
- (void)viewDidLoad {
    [super viewDidLoad];
    //1.添加三个View
    UIView *orangeView = [[UIView alloc]init];
    orangeView.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:orangeView];
    self.orangeView = orangeView;
    //2.
    UIView *yellowView = [[UIView alloc]init];
    yellowView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:yellowView];
    self.yellowView = yellowView;
    //3.
    UIView *greenView = [[UIView alloc]init];
    greenView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:greenView];
    self.greenView = greenView;

//配置约束
    [self setUpRestrain];
}

//配置约束
-(void)setUpRestrain
{
     __weak typeof( self) weakSelf = self;

//对于橙色View只需正常设置约束就好
  [self.orangeView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.mas_equalTo(100);
        make.left.offset(10);
        make.top.offset(50);
    }];
//黄色View只会发生一次变化,就多设一个优先级较低的约束就好  
  [self.yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
         make.width.height.mas_equalTo(100);
        make.left.equalTo(weakSelf.orangeView.mas_right).offset(20);
        make.top.offset(50);
 //当橙色View消失后,黄色View缺少左边约束,所以给其加一个优先级更低的左边约束。当第一个左边约束失效后,这个约束就起作用了
       make.left.equalTo(weakSelf.view.mas_left).offset(20).priority(300);

 }];
//同理绿色View的低级约束就得设置两个   
 [self.greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.mas_equalTo(100);
        make.left.equalTo(weakSelf.yellowView.mas_right).offset(20);
        make.top.offset(50);
       make.left.equalTo(weakSelf.orangeView.mas_right).offset(20).priority(300);
        make.left.equalTo(weakSelf.view.mas_left).offset(20).priority(250);
    }];
}

//删除黄色View
- (IBAction)cancelYellowBtn:(id)sender {
//这里有个知识点:用约束布局实现动画,布局代码写在外面,然后调用强制布局方法写在UIView动画里面
    [self.yellowView removeFromSuperview];
    [UIView animateWithDuration:0.5 animations:^{
      //强制刷新布局
        [self.view layoutIfNeeded];
    }];

}
//删除橙色View
- (IBAction)cancelGreenBtn:(id)sender {
    [self.orangeView removeFromSuperview];
    [UIView animateWithDuration:0.5 animations:^{
        //强制刷新布局
        [self.view layoutIfNeeded];

    }];
}

三 硬度的简单实用
最近在使用Masonry时出现一个布局问题,如下图:


1707114-687f0017c5d25623.png

正常显示:


1707114-fc6cc0052f899a50.png
布局需求是,最左侧头像完整显示,姓名完整显示,性别和年领完整显示,病名紧贴右侧,左侧不能遮挡年龄,病名过长可以不显示完全。

开始有问题的布局代码:

[self.headImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.contentView).offset(12.5);
        make.size.mas_equalTo(CGSizeMake(45, 45));
        make.centerY.equalTo(self.contentView);
    }];
    
    [self.lbPatientName mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.headImageView.mas_right).with.offset(7);
        make.top.equalTo(self.headImageView).with.offset(2.5);
    }];
    
    [self.lbPatientAge mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.lbPatientName.mas_right).offset(10);
        make.centerY.equalTo(self.lbPatientName);
    }];
    
    [self.btnIllDiagnose mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.lbPatientName);
        make.right.equalTo(self.contentView).offset(-15);
        make.left.greaterThanOrEqualTo(self.lbPatientAge.mas_right).offset(3);
    }];

这样布局的话当病名过长时,会出现性别年龄被遮挡的情况,如上图一。

解决办法:

因为我们没有给姓名、病名和性别年龄设定固定宽度,所以系统在自动布局的时候并不知道哪个应该被完整显示,哪个可以不完整显示。所以我们要给控件设置布局优先级:
修改后代码如下:

[self.headImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.contentView).offset(12.5);
        make.size.mas_equalTo(CGSizeMake(45, 45));
        make.centerY.equalTo(self.contentView);
    }];
    
    [self.lbPatientName mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.headImageView.mas_right).with.offset(7);
        make.top.equalTo(self.headImageView).with.offset(2.5);
    }];
    
    [self.lbPatientAge mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.lbPatientName.mas_right).offset(10);
        make.centerY.equalTo(self.lbPatientName);
    }];
    
    [self.btnIllDiagnose mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.lbPatientName);
        make.right.equalTo(self.contentView).offset(-15);
        make.left.greaterThanOrEqualTo(self.lbPatientAge.mas_right).offset(3);
    }];
// 设置优先级
    
    [self.lbPatientName setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    
    [self.lbPatientAge setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];

    [self.btnIllDiagnose setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];

设置优先级方法:

  • (void)setContentCompressionResistancePriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);

第一个参数(priority):通俗来讲,不同的优先级,表示显示的完整性的高低,优先级越高,那么在父控件无法在无越界的情况下的情况下,就会优先先把优先级高的控件显示完整,然后再依次显示优先级低的
第二个参数(axis):代表在什么方向上进行优先级限制

这样显示就正常了:

1707114-50cea9df8cd32d0c.png

相关文章

网友评论

      本文标题:Masonry简单实用以及布局硬度压缩UILayoutPrior

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