美文网首页iOS学习专题计算机微刊111
Masonry中的优先级(非常实用!)

Masonry中的优先级(非常实用!)

作者: 郑明明 | 来源:发表于2017-03-21 19:57 被阅读5360次
    可能标题不能够完全解释清楚本文到底要描述什么,没关系,我们来举出一个实际的例子,看下图:
    红框中的我们发现在第一行一共有三个控件,一个是标题的UILabel(表示为:headLineTabel),一个是宝石的图标UIImageView(表示为:diamondImageView),再有一个是宝石的数量UILabel(表示为:diamondLabel),这时候我们用Masonry编写代码的时候往往一般是这样的思路:
        // 钻石数量label
        [self.contentView addSubview:self.diamondLabel];
        [self.diamondLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.equalTo(self.contentView).with.offset(-13 * AutoLayoutScaleX);
            make.top.equalTo(self.contentView).with.offset(13 * AutoLayoutScaleY);
            
        }];
        
        // 钻石imageView
        [self.contentView addSubview:self.diamondImageView];
        [self.diamondImageView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.right.equalTo(self.diamondLabel.mas_left).with.offset(-2 * AutoLayoutScaleX);
            make.centerY.equalTo(self.diamondLabel);
        }];
        
        // 标题label
        [self.contentView addSubview:self.headLineLabel];
        [self.headLineLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(self.contentView).with.offset(10 * AutoLayoutScaleX);
            make.centerY.equalTo(self.diamondLabel);
        }];
    
    但是这样的布局所造成的效果肯定不可能是上图所示,因为headLineLabel和diamondImageView之间没有设置约束,所以如果headLine的长度过于长,将会和diamondImageView相互重叠,本文就是要讲解解决这个问题的方法。
    • 问题出现原因

      1. 没有直接对带有文字的UILabel进行宽度的约束
      2. 两个会相互重叠的控件之间没有设置约束
    • 思考

      1. 先来试试直接对UILable计算宽度来进行写死的约束,这样的话我也应该将其他控件的宽度也写死才能成功编译,但是这样我就需要算好两个控件的宽度,而最好的其实是不限制他们,让他们自己知道怎么“谦让”对方
      2. 在两个控件之间设置约束,由于宽度都没有限制,所以这样写,从原理上分析,是肯定会报错的(当然实际也会报错)
      3. 问题已经由上面两个点抛出,那么实际上解决这个问题的方法是设置各个控件的优先级,让他们自己知道自己是什么样的地位的,低地位的控件需要谦让高地位的控件,让高地位的控件优先将自己显示完全
    • 解决办法

    // 标题label
        [self.contentView addSubview:self.headLineLabel];
        [self.headLineLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(self.contentView).with.offset(10 * AutoLayoutScaleX);
            make.centerY.equalTo(self.diamondLabel);
            make.right.mas_lessThanOrEqualTo(self.diamondLabel.mas_left).with.offset(-5 * AutoLayoutScaleX);
        }];
    // 设置优先级
        [self.diamondImageView setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
        [self.diamondLabel setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
    
        [self.headLineLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
    
    • 代码分析和解释
      1. 在headLineLabel的布局中添加了一个约束,即为headLineLabel和diamondImageView之间的约束,但是所使用的不是equalTo,而是mas_lessThanOrEqualTo,表示极限的情况是等于,一般来说是小于
      2. 优先级函数:
      • 第一个参数:通俗来讲,不同的优先级,表示显示的完整性的高低,优先级越高,那么在父控件无法在无越界的情况下的情况下,就会优先先把优先级高的控件显示完整,然后再依次显示优先级低的
      • 第二个参数:代表在什么方向上进行优先级限制

    相关文章

      网友评论

      • SHyH5:请问你这样加,,headlinelabel如果过长, 不会把后面的两个视图挤出去吗
        SHyH5:是我看错了。。。
      • UnitedStates:在headLineLabel的布局中添加了一个约束,即为headLineLabel和diamondImageView之间的约束
        实际上你文中设置的是headLineLabel和dimondLabel之间的约束,这是不对的
        搬码小能手:应该是diamondImageView
      • imChay:这句话是不是有点问题“那么在父控件无法在无越界的情况下的情况下”
        郑明明:@Chay丶 哈哈,这样看起来确实有问题,我改改
      • 聪zero: make.left.equalTo(self.contentView).with.offset(10 * AutoLayoutScaleX);
        这句作用是啥,一般括号里不应该是self.contentView.mas_left吗
      • 知行合一认知升级:很好很强大。
      • 北冥风尘: // 标题label
        [self.contentView addSubview:self.headLineLabel];
        [self.headLineLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.contentView).with.offset(10 * AutoLayoutScaleX);
        make.centerY.equalTo(self.diamondLabel);
        }];
        标题在约束中 如果加入make.right.equalTo(self. diamondImageView.left)呢;
        这样就不会重叠了吧
        郑明明:@北冥风尘 就是钻石图标啊,这个你没仔细看文章吗😂
        郑明明:想的过于简单了😂,这个原因我在文章中陈述了,因为带有文字的控件都没有固定宽度,这一行代码看似将一行的所有约束确定,但是你试想,系统如何给这几个控件布局呢
        北冥风尘:gemstoneNumberLabel这个控件又是哪里来的啊?
      • 新地球说着一口陌生腔调:我没用过 AutoLayoutScaleX 这个有什么作用呢?
        郑明明:这是一个全局的宏定义,scaleX和saleY是:
        以iphone6尺寸中基本,产生的比例
        手写布局应该使用这个比例,让三种屏幕完美兼容
        郑明明:#define AutoLayoutScaleY [UserDefaultManager instance].scaleY
        #define AutoLayoutScaleX [UserDefaultManager instance].scaleX

      本文标题:Masonry中的优先级(非常实用!)

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