请在下面找到我使用 AutoLayout 布局 UITableViewCell 的 UI 编程的代码:
// Profile Pic
profileView.translatesAutoresizingMaskIntoConstraints = false
profileView.widthAnchor.constraint(equalToConstant: commentImageSize + 4).isActive = true
profileView.heightAnchor.constraint(equalToConstant: commentImageSize + 4).isActive = true
profileView.topAnchor.constraint(equalTo: topAnchor, constant: borderSize).isActive = true
profileView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: borderSize).isActive = true
profileImageView.translatesAutoresizingMaskIntoConstraints = false
profileImageView.widthAnchor.constraint(equalToConstant: commentImageSize).isActive = true
profileImageView.heightAnchor.constraint(equalToConstant: commentImageSize).isActive = true
profileImageView.topAnchor.constraint(equalTo: profileView.topAnchor, constant: 2).isActive = true
profileImageView.leadingAnchor.constraint(equalTo: profileView.leadingAnchor, constant: 2).isActive = true
// Time Ago Label
timeAgoLabel.translatesAutoresizingMaskIntoConstraints = false
timeAgoLabel.topAnchor.constraint(equalTo: usernameLabel.topAnchor).isActive = true
timeAgoLabel.leadingAnchor.constraint(equalTo: usernameLabel.trailingAnchor, constant: 0)
timeAgoLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -borderSize).isActive = true
// Username Label
usernameLabel.translatesAutoresizingMaskIntoConstraints = false
usernameLabel.leadingAnchor.constraint(equalTo: profileView.trailingAnchor, constant: borderSize).isActive = true
usernameLabel.trailingAnchor.constraint(equalTo: timeAgoLabel.leadingAnchor, constant: -borderSize).isActive = true
// *****
// (Not work)
// usernameLabel.topAnchor.constraint(equalTo: profileView.topAnchor).isActive = true
// (Work)
usernameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: borderSize).isActive = true
// *****
// Comment Label
commentLabel.translatesAutoresizingMaskIntoConstraints = false
commentLabel.leadingAnchor.constraint(equalTo: usernameLabel.leadingAnchor).isActive = true
commentLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -borderSize).isActive = true
commentLabel.topAnchor.constraint(equalTo: usernameLabel.bottomAnchor, constant: 2).isActive = true
commentLabel.bottomAnchor.constraint(lessThanOrEqualTo: contentView.bottomAnchor, constant: -borderSize).isActive = true
<小时/>
在实现我的目标之前,我尝试了另一种实现。实现如下:
usernameLabel.topAnchor.constraint(equalTo: profileView.topAnchor).isActive = true
但是,由于未知的原因,如果使用此实现,多行注释标签会被触发。
使用以下代码后,一切正常:
usernameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: borderSize).isActive = true
按照我的预期,这两行代码应该具有相同的效果。我想知道为什么我原来的实现没有按预期工作。
谢谢。
最佳答案
I would like to know why my original implmentation does not work as expected.
这段代码
usernameLabel.topAnchor.constraint(equalTo: profileView.topAnchor).isActive = true
意味着您正在将usernameLabel
的顶部与profileView
的顶部对齐,我相信您也知道这一点。
这段代码:
usernameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: borderSize).isActive = true
意味着您正在对单元格或特别是单元格的contentView
施加约束。
现在,要使多行 UILabel
正确地适合单元格,您需要对其 super View 的顶部和底部进行约束。就像使用 UIScrollView
一样,您需要对每一侧进行适当的约束。
同样,在您的第一个代码中,您基本上缺少一个重要的约束,即对 super View 顶部的约束。您可以根据需要在 Storyboard/Interface Builder 上进行实验。
关于ios - Swift 4 - 以编程方式在 AutoLayout UITableViewCell 中切碎多行标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46727638/