自定义 uitableViewcell 内部:UILabel 背景超出文本长度(以编程方式)

Posted

技术标签:

【中文标题】自定义 uitableViewcell 内部:UILabel 背景超出文本长度(以编程方式)【英文标题】:Inside custom tableView cell: UILabel's background is beyond the text length (programmatically) 【发布时间】:2020-11-17 13:22:49 【问题描述】:

我用自定义单元格创建了一个 tableView,它以编程方式包含两个标签。而且我无法让左标签的文本与其背景对齐。可能需要你们的帮助。

为了缩小问题范围,我创建了一个小项目来做一些实验:

ViewController 内部:

如果使用tableView.rowHeight = 40,得到低于结果,这不是我想要的。左侧标签的背景超出了文本长度。

如果注释掉tableView.rowHeight = 40 行,得到以下结果,这是我想要的,但在控制台中会出现警告。

“[警告] 仅警告一次:检测到约束模糊地建议表格视图单元格的内容视图高度为零的情况。我们正在考虑意外折叠并改用标准高度。”

也尝试使用下面的语句,它在屏幕上的显示与场景 2 相同。但是,它与场景 2 有相同的警告。
tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 40

视图控制器

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource 
    var tableView = UITableView()

    override func viewDidLoad() 
        super.viewDidLoad()
        
        let uiView = UIView()
        uiView.backgroundColor = .systemBackground
        view = uiView
        
        tableView.delegate = self
        tableView.dataSource = self
        tableView.register(CustomCell.self, forCellReuseIdentifier: "countryDetail")
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.rowHeight = 40
        view.addSubview(tableView)
        
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
        ])
    
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
        return 8
    
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "countryDetail", for: indexPath) as? CustomCell else 
            fatalError("Unable to dequeue CustomCell")
        
        
        cell.name.text = "Country: "
        cell.value.text = "US"
        
        return cell
    

自定义单元

import UIKit

class CustomCell: UITableViewCell 
    var name = UILabel()
    var value = UILabel()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) 
        super.init(style: style, reuseIdentifier: "countryDetail")
        
        name.translatesAutoresizingMaskIntoConstraints = false
        name.numberOfLines = 0
        name.textAlignment = .left
        name.layer.masksToBounds = true
        name.layer.cornerRadius = 5
        name.backgroundColor = .systemGreen
        name.font = UIFont(name: "Helvetica Neue", size: 22)
        contentView.addSubview(name)
        
        value.translatesAutoresizingMaskIntoConstraints = false
        value.numberOfLines = 0
        value.textAlignment = .left
        value.font = UIFont(name: "Helvetica Neue", size: 18)
        contentView.addSubview(value)
        
        NSLayoutConstraint.activate([
            name.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10),
            name.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            
            value.leadingAnchor.constraint(equalTo: name.trailingAnchor, constant: 10),
            value.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            value.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10)
        ])
    
    
    required init?(coder: NSCoder) 
        fatalError("init(coder:) has not been implemented")
    

【问题讨论】:

【参考方案1】:

哦,这是一个愚蠢的错误。我应该从 CustomCell 中删除这一行 value.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10) 以删除右标签的尾随锚约束,因为我希望右标签与左对齐。

这次使用tableView.rowHeight = 40,应用运行良好。

【讨论】:

以上是关于自定义 uitableViewcell 内部:UILabel 背景超出文本长度(以编程方式)的主要内容,如果未能解决你的问题,请参考以下文章

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

自定义 uitableViewcell 内部:UILabel 背景超出文本长度(以编程方式)

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

自定义 UITableViewCell 的首选方式

创建自定义 UITableViewCell