美文网首页
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