自动布局：同一行上的两个标签，而一个标签是主标签，不应该缩小

Posted 2023-03-15

【中文标题】自动布局：同一行上的两个标签，而一个标签是主标签，不应该缩小

【英文标题】：Auto Layout: Two labels on the same line, whereas one label is the master and shouldn't shrink

【发布时间】：2015-05-21 13:32:12

【问题描述】：

我有两个标签：title 和 description。他们应该并排

----------- --------------
| title   | |description |
----------- --------------

根据两个标签的内容，应该使用“线”的最大宽度，而一个标签是“主”标签并且始终显示。行为应该如下：

Title Description
TitleTitleTitleTitleTitle Description
TitleTitleTitleTitleTitleTitle Descr…
TitleTitleTitleTitleTitleTitleTitleT…
Title DescriptionDescription
Title DescriptionDescriptionDescript…

有几种情况：

标题标签展开并将描述标签移到一边。 一旦标题标签足够展开，标题标签就会被缩写，描述标签应该“隐藏”。 当标题标签不包含太多文本时，描述标签可以展开。描述标签会展开，直到到达视图的末尾，然后被缩写。

问题是约束应该是什么样子？

标题标签：

左约束（父） 中心 Y 约束（父） 宽度限制（ 抗压：750

描述标签：

左约束（标题标签右） 中心 Y 约束（标题标签） 右约束（父） 抗压：250

这就是我现在所拥有的。但它不像上面描述的那样工作。描述标签的正确约束是有问题的，因为只有这样标签才会被缩写。如果标题标签变短，使用它将标签始终固定在右侧。我尝试了优先级，但它要么或。描述标签的隐藏也没有实现（只有当我对描述标签没有正确的约束时，它才会超过UIWindow然后“消失”）。

我认为使用自动布局“隐藏”描述标签是不可能的。我认为只有计算宽度并手动隐藏它才会这样做。

图片和来源

为了更清楚我想要什么我已经制作了一些图片来展示问题。

// 1: both short
titleLabel.Text = "Lorem ipsum";
descLabel.Text = "Anything";

结果错误，因为描述标签离得太远了。应该是

Lorem ipsum dolor sit amet。随便

// 2: title long, desc short
titleLabel.Text = "Lorem ipsum dolor sit amet.";
descLabel.Text = "Anything";

和一样。 1 因为标题标签太宽了。

// 3: title very long, desc short
titleLabel.Text = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.";
descLabel.Text = "Anything";

// 4: title short, desc long
titleLabel.Text = "Something";
descLabel.Text = "Lorem ipsum dolor sit amet.";

// 5: title short, desc very long
titleLabel.Text = "Something";
descLabel.Text = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.";

// 6: both long
titleLabel.Text = "Lorem ipsum dolor sit amet.";
descLabel.Text = "Lorem ipsum dolor sit amet.";

// 7: both very long
titleLabel.Text = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.";
descLabel.Text = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.";

// 8: title long, desc very long
titleLabel.Text = "Lorem ipsum dolor sit amet.";
descLabel.Text = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.";

// 9: title very long, desc long
titleLabel.Text = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.";
descLabel.Text = "Lorem ipsum dolor sit amet.";

我的代码所有其他结果似乎都可以。最后但并非最不重要的一点是，我可以为您提供 (C#) 代码：

public override void ViewDidLoad()

    base.ViewDidLoad();

    // Perform any additional setup after loading the view, typically from a nib.

    container = new UIView();
    container.BackgroundColor = UIColor.Red;
    container.TranslatesAutoresizingMaskIntoConstraints = false;
    View.AddSubview(container);

    titleLabel = new UILabel();
    titleLabel.BackgroundColor = UIColor.Yellow;
    titleLabel.TranslatesAutoresizingMaskIntoConstraints = false;
    titleLabel.SetContentCompressionResistancePriority(750, UILayoutConstraintAxis.Horizontal);
    container.AddSubview(titleLabel);

    descLabel = new UILabel();
    descLabel.BackgroundColor = UIColor.Yellow;
    descLabel.TranslatesAutoresizingMaskIntoConstraints = false;
    descLabel.SetContentCompressionResistancePriority(250, UILayoutConstraintAxis.Horizontal);
    container.AddSubview(descLabel);

    NSMutableDictionary viewsDictionary = new NSMutableDictionary();
    viewsDictionary["container"] = container;
    viewsDictionary["parent"] = this.View;
    View.AddConstraints(NSLayoutConstraint.FromVisualFormat("H:|[container]|", (NSLayoutFormatOptions)0, null, viewsDictionary));
    View.AddConstraints(NSLayoutConstraint.FromVisualFormat("V:|[container(==200)]", (NSLayoutFormatOptions)0, null, viewsDictionary));

    container.AddConstraint(NSLayoutConstraint.Create(titleLabel, NSLayoutAttribute.CenterY, NSLayoutRelation.Equal, container, NSLayoutAttribute.CenterY, 1, 0));
    container.AddConstraint(NSLayoutConstraint.Create(titleLabel, NSLayoutAttribute.Left, NSLayoutRelation.Equal, container, NSLayoutAttribute.Left, 1, 10));
    // solves 3
    titleLabelWidth = NSLayoutConstraint.Create(titleLabel, NSLayoutAttribute.Width, NSLayoutRelation.LessThanOrEqual, container, NSLayoutAttribute.Width, 1, -20);
    container.AddConstraint(titleLabelWidth);

    container.AddConstraint(NSLayoutConstraint.Create(descLabel, NSLayoutAttribute.CenterY, NSLayoutRelation.Equal, container, NSLayoutAttribute.CenterY, 1, 0));
    container.AddConstraint(NSLayoutConstraint.Create(descLabel, NSLayoutAttribute.Left, NSLayoutRelation.Equal, titleLabel, NSLayoutAttribute.Right, 1, 10));
    // solves the rest but breaks 1
    descWidth = NSLayoutConstraint.Create(descLabel, NSLayoutAttribute.Width, NSLayoutRelation.GreaterThanOrEqual, null, NSLayoutAttribute.NoAttribute, 1, 0);
    container.AddConstraint(descWidth);
    descRight = NSLayoutConstraint.Create(descLabel, NSLayoutAttribute.Right, NSLayoutRelation.Equal, container, NSLayoutAttribute.Right, 1, -5);
    //container.AddConstraint (descRight);

    // test cases
    // 1: both short
    //          titleLabel.Text = "Lorem ipsum";
    //          descLabel.Text = "Anything";
    // 2: title long, desc short
    //          titleLabel.Text = "Lorem ipsum dolor sit amet.";
    //          descLabel.Text = "Anything";
    // 3: title very long, desc short
    //          titleLabel.Text = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.";
    //          descLabel.Text = "Anything";
    // result: X => solved (except desc label)
    // 4: title short, desc long
    //          titleLabel.Text = "Something";
    //          descLabel.Text = "Lorem ipsum dolor sit amet.";
    // 5: title short, desc very long
    //          titleLabel.Text = "Something";
    //          descLabel.Text = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.";
    // result: X
    // 6: both long
    //          titleLabel.Text = "Lorem ipsum dolor sit amet.";
    //          descLabel.Text = "Lorem ipsum dolor sit amet.";
    // 7: both very long
    //          titleLabel.Text = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.";
    //          descLabel.Text = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.";
    // 8: title long, desc very long
    //          titleLabel.Text = "Lorem ipsum dolor sit amet.";
    //          descLabel.Text = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.";
    // 9: title very long, desc long
    titleLabel.Text = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.";
    descLabel.Text = "Lorem ipsum dolor sit amet.";


public override void ViewWillLayoutSubviews()

    base.ViewWillLayoutSubviews();
    if (titleLabelWidth.Constant + descWidth.Constant > container.Bounds.Size.Width)
    
        //              if (descWidth.Constant > kDescMaxWidth)
        //                  descWidth.Constant = kDescMaxWidth;
        //               else 
        container.RemoveConstraint(descRight);
        descLabel.Font = UIFont.SystemFontOfSize(0);
    //              
    
    else
    
        container.AddConstraint(descRight);
    

我怎样才能解决不。 1/2 还是一般问题？是否可以单独使用自动布局？

解决方案：

我完全采用了另一种方法（其他限制，...）。你可以找到我的方法here。

【参考方案1】：

您不能将描述标签固定在右侧，并在标题和描述中添加两个宽度约束，然后检查。 要隐藏描述标签，您可以设置零字体

if (titleWidth.constant + descWidth.constant > UIScreen.mainScreen().bounds.size.width

   if descWidth.constant > kdescMaxWidth
   
      descWidth.constant = kDescMaxWidth
   
   else
   
      descLabel.font = UIFont.systemFontOfSize(0)
   

【讨论】：

感谢您的加入。我怎么知道什么时候“隐藏”它？仅通过计算标题标签宽度？你知道我在问题中的其他观点吗？

更新答案，我不确定我是否理解问题中的其他要点。

宽度约束应该是什么样子？

例如标题宽度=0。那么你应该创建IBOultlet这个约束。当您删除描述标签的正确引脚时，您不应该得到“...”。

我知道 :-) 在某些情况下我想获得“...”。例如。有一些描述的空间，因为标题标签没有填满整个宽度（但是没有太多的空间可以以全尺寸显示描述标签）。感谢您的帮助。