代码之家  ›  专栏  ›  技术社区  ›  Emre Önder

一个标签(一个多行标签,一个标签)

  •  1
  • Emre Önder  · 技术社区  · 6 年前

    我有一个水平仪 UIStackView 有两个 UILabel 我的问题

    我想要什么

    附笔 我需要在这个场景中使用UIStackView,因为还有其他情况。我知道在UIView中放置两个标签可以解决这个问题。

    UIStackView:
       - Distribution: Horizontal
       - Alignment: Center
       - Spacing: 0
       UILabel:
         - Number of line: 2
         - Line break: Word wrap
       UILabel:
         - Number of line: 1
    

    Screenshot

    视图层次结构:

    enter image description here

    期望结果:

    enter image description here

    enter image description here

    编辑: 计算了第二个标签的宽度并给出了宽度约束。我想它解决了我的问题,我要测试一下。

            //Give specific width to second label to make first one calculate right number of lines.
        if let font = UIFont(name: "Metropolis-ExtraBold", size: 15) {
            let fontAttributes = [NSAttributedString.Key.font: font]
            let size = (secondLabelText as NSString).size(withAttributes: fontAttributes)
            secondLabel.widthAnchor.constraint(equalToConstant: size.width).isActive = true
        }
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   DonMag    6 年前

    试着简化。。。

    忘记计算任何宽度。。。重要的是水平线 Content Hugging Content Compression Resistance

    将左(蓝色)标签保留为默认值:

    Content Hugging Priority
        Horizontal: 251
    
    Content Compression Resistance Priority:
        Horizontal: 750
    

    Content Hugging Priority
        Horizontal: 1000
    
    Content Compression Resistance Priority:
        Horizontal: 1000
    

    结果:

    enter image description here

    唯一的另一个问题是如果右侧标签中的文本超过了视图的全宽,但是您没有指出可能需要那么多文本。

        2
  •  0
  •   Mojtaba Hosseini    6 年前

    抗压缩含量

    Multiple values

    对于这种情况,蓝色的(多行)应该比橙色的(单线)少一些。

    橙色设置: Orange Settings

    蓝色设置: OrangeSettings

    0 垂直抗压 超过250。

        3
  •  0
  •   Maci    6 年前

    首先在视图中嵌入多行标签,并将标签约束到该视图(顶部、顶部、尾部、底部)。之后,将带有多行标签和单行标签的视图添加到stackView中。

    请确保在正确的数字标签上使用Required(1000)作为水平内容压缩阻力优先级。

    视图层次结构:

    enter image description here

    结果:

    enter image description here

    enter image description here

    enter image description here