如何将位于 UI View 中的长文本标签制作成 Swift 中的多行？

Posted 2023-02-25

【中文标题】如何将位于 UI View 中的长文本标签制作成 Swift 中的多行？

【英文标题】：How to make long text label, which lives in UI View, to multiple lines in Swift?

【发布时间】：2020-10-13 13:55:34

【问题描述】：

我正在尝试将位于 UI 视图内部的长文本标签设置为多行。我正在寻找解决方案 2 小时，但我无法解决它，所以我想寻求一些帮助。这是我现在得到的图像。 这是 View Hierarchy 调试器。

在表格视图单元格中，我输入了从 Github 获得的存储库名称。在图像的第三个单元格中，我想将 repo 名称设置为两行，因为它很长。我看到了this *** question，这听起来和我当前的问题类似，并在我的代码中实现了，但它不起作用。

这是我的代码。它太长了，但重点是，我已经声明了label.numberOfLines = 0 和label.adjustsFontSizeToFitWidth = true，并且我试图让我的标签可转换为多行，但它没有用。谁能指出我在这里做错了什么？

    import UIKit

class RepositoryCell: UITableViewCell 
    
    //MARK: - Properties
    
    let userImageView: UIImageView = 
        let img = UIImageView()
        img.contentMode = .scaleAspectFit
        img.clipsToBounds = true
        img.backgroundColor = .black

        return img
    ()
    
    let containerView: UIView = 
        let view = UIView()
        view.clipsToBounds = true
        view.backgroundColor = .systemPink
        return view
    ()
    
    let userNameLabel: UILabel = 
        let label = UILabel()
        label.textColor = .black
        label.font = UIFont.boldSystemFont(ofSize: 20)
        label.numberOfLines = 0
        label.adjustsFontSizeToFitWidth = true
        return label
    ()
    
    let repositoryNameLabel: UILabel = 
        let label = UILabel()
        label.textColor = .gray
        label.font = UIFont.systemFont(ofSize: 14)
        label.numberOfLines = 0
        label.adjustsFontSizeToFitWidth = true
        return label
    ()
    
    let starNumLabel: UILabel = 
        let label = UILabel()
        label.textColor = .systemPink
        label.font = UIFont.systemFont(ofSize: 14)
        label.backgroundColor = .black
        return label
    ()
    

    
    //MARK: - Init

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) 
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        addSubview(userImageView)
        containerView.addSubview(userNameLabel)
        containerView.addSubview(repositoryNameLabel)
        addSubview(containerView)
        addSubview(starNumLabel)
        
        configureUserNameLabel()
        configureRepositoryNameLabel()
 
        configureViewConstraints()
    
    
    
    
    override func layoutSubviews() 
        super.layoutSubviews()
        userImageView.layer.cornerRadius = userImageView.frame.height / 2
    
    
    
    required init?(coder: NSCoder) 
        fatalError("init(coder:) has not been implemented")
    
    
    
    //MARK: - Helper functions
    
    func configureCellView(repository: Repository) 
        userImageView.image = UIImage(named: "001")
        userNameLabel.text = repository.userName
        repositoryNameLabel.text = repository.repositoryName
        starNumLabel.text = "⭐️\(String(describing: repository.starNum))"
    
    
    
    func configureUserNameLabel() 
        userNameLabel.numberOfLines = 0
        userNameLabel.adjustsFontSizeToFitWidth = true
    
    
    func configureRepositoryNameLabel() 
        repositoryNameLabel.numberOfLines = 0
        repositoryNameLabel.adjustsFontSizeToFitWidth = true
    
    
    func configureViewConstraints() 
        setUserImageConstraints()
        setContainerViewConstraints()
        setUserNameLabelConstraints()
        setRepositoryNameLabel()
        setStarNumLabel()
    
    
    
    func setUserImageConstraints() 
        userImageView.translatesAutoresizingMaskIntoConstraints = false
        userImageView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
        userImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10).isActive = true
        userImageView.heightAnchor.constraint(equalToConstant: 70).isActive = true
        userImageView.widthAnchor.constraint(equalTo: userImageView.heightAnchor, multiplier: 1).isActive = true
    
    
    
    func setContainerViewConstraints() 
        containerView.translatesAutoresizingMaskIntoConstraints = false
        containerView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
        containerView.topAnchor.constraint(equalTo: topAnchor, constant: 10).isActive = true
        containerView.leadingAnchor.constraint(equalTo: userImageView.trailingAnchor, constant: 10).isActive = true
        containerView.trailingAnchor.constraint(equalTo: starNumLabel.leadingAnchor, constant: -10).isActive = true
    

    
    func setUserNameLabelConstraints() 
        userNameLabel.translatesAutoresizingMaskIntoConstraints = false
        userNameLabel.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
        userNameLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
//        userNameLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
    

    
    func setRepositoryNameLabel() 
        repositoryNameLabel.translatesAutoresizingMaskIntoConstraints = false
        repositoryNameLabel.topAnchor.constraint(equalTo: userNameLabel.bottomAnchor).isActive = true
        repositoryNameLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
//      repositoryNameLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true

// this doesn't work...
//      repositoryNameLabel.trailingAnchor.constraint(greaterThanOrEqualTo: containerView.leadingAnchor, constant: 5).isActive = true 
    
    
    
    func setStarNumLabel() 
        starNumLabel.translatesAutoresizingMaskIntoConstraints = false
        starNumLabel.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
        starNumLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -10).isActive = true
    

    
    

 

【参考方案1】：

我的猜测是标签的尾随约束设置不正确。 您可以使用 Xcode 中的 View Hierarchy 调试器来清楚地查看视图在运行时的实际大小。

如果未设置尾随锚点，则无法环绕文本，因为它没有到达视图的“末端”。

【讨论】：

正如@Arthur 已经提到的，缺少一些尾随锚约束。此外，我建议将多行标签的垂直 contentHuggingPriority 设置为低（249），例如存储库名称标签

@Arther Stefan 非常感谢您的回复。所以我更新了我的问题并添加了一个视图层次结构调试器。所以当你们说“缺少尾随锚点”时，这是否意味着我应该让标签的尾随锚点与 UI 视图的尾随锚点完全相同？ （对不起，如果我错了）

尝试添加一个约束（可能注释的那个不起作用）；-) 但设置它（至少为了测试它解决了 equalToSuperview 的问题，而是使用容器的尾随锚点领先的。repositoryNameLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: 5).isActive = true

顺便说一下，如果你想在 swift 中使用自动布局约束，我强烈建议使用 SnapKit，它在 IMO 中更具可读性