【问题标题】:Swift - How to resize a UIView based on its UILabel size (that is inside)Swift - 如何根据 UIView 的 UILabel 大小(即内部)调整 UIView 的大小
【发布时间】:2018-09-30 18:12:03
【问题描述】:

我对 Swift 有点陌生,我需要一些帮助:

我在 UIView 中有一个 UILabel,这个标签可以接收任意数量的文本。所以我想根据它收到的文本调整 UILabel 的大小,并调整它的容器 UIView 的大小。 UILabel 必须具有最大宽度,但不能具有最大高度。这与 Whatsapp 中的消息文本非常相似(他的绿色容器与里面的文本一致地增长)。

我相信是关于自动布局的,但我真的无法理解大部分内容。

编辑:动态创建。

谁能帮帮我?

【问题讨论】:

  • UIView 和 Label 是使用 StoryBoard 添加还是添加完整代码?任何尝试过的代码?
  • Label 继承自 UIView,就是这样。或者 jsut 将 UIView 设置为标签的宽度(您可以在情节提要中执行此操作)。
  • 只有代码,就像聊天一样。

标签: swift layout uiview uilabel


【解决方案1】:

包含 Label 的 UIView 不应该有固定的高度。 只需添加约束来设置 UIView 宽度和 X/Y 坐标。

在它里面,UILabel 应该对 UIView 的 Top/Bottom 和 Right/Left 有固定的约束,并将它的 numberOfLines 设置为 0

有了这些约束,容器视图将根据文本展开以调整高度。

查看附件截图

添加容器视图约束(注意没有添加底部或高度约束)

添加标签约束(所有 UIView 边缘的固定约束)

短文本结果

长文本结果

【讨论】:

  • 如果视图和标签开始变小(大约 30 像素),并且视图也必须增加他的宽度,直到它有大约 300 像素依赖于标签的文本怎么办?我会动态地创建所有这些,但是如果您使用 IB 进行解释,则没有问题。
  • 由于我必须通过 CGRect,我将如何以编程方式执行此操作?我有一个左右约束的视图,但我需要通过高度。
【解决方案2】:

@Lefteris 的回答是正确的。无需定义包含视图的宽度和高度。您只需要将其约束在其父边缘中,然后将其内部的标签约束在包含视图的边缘中。

这是我在代码中的做法。

let containingView: UIView = UIView()
containingView.translateAutoresizingMaskIntoConstraints = false
addSubview(containingView)

let labelInside: UILabel = UILabel()
labelInside.translateAutoresizingMaskIntoConstraints = false
containingView.addSubview(labelInside)

NSLayoutConstraint.activate([
  //in my case, i want my containingView on the top left corner of the superView.
   containingView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
   containingView.topAnchor.constraint(equalTo: contentView.topAnchor),

   labelInside.leadingAnchor.constraint(equalTo: containingView.leadingAnchor),
   labelInside.trailingAnchor.constraint(equalTo: containingView.trailingAnchor),
   labelInside.topAnchor.constraint(equalTo: containingView.topAnchor),
   labelInside.bottomAnchor.constraint(equalTo: containingView.bottomAnchor)
])

现在,如果您想在标签中添加一些边距/插图,您可以在定义约束时添加一个常量。 :) HTH

【讨论】:

    【解决方案3】:

    以下属性对我有用,希望这会有所帮助

     [label sizeToFit];
    

    【讨论】:

      猜你喜欢
      • 2019-09-18
      • 1970-01-01
      • 2012-05-26
      • 2019-12-17
      • 2012-02-09
      • 1970-01-01
      • 2011-04-16
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多