TableView 单元格未占用整个 TableView 宽度

TableView Cell doesn't occupy full TableView width

提问人:Gabriel Santos de Souza 提问时间:11/9/2023 更新时间:11/9/2023 访问量:37

问:

我的代码中有这个 tableView,我将其设置为与其中的视图具有相同的前导和尾随。我可以通过着色来确认正在工作的背景。

接下来,我创建了一个自定义 UITableViewCell 来填充 tableView,其中的主要元素是一个水平 stackView,其中包含其他元素。除了 stackView 的宽度之外,一切都工作正常,它没有占用 tableView 的整个宽度。

我正在使用 ViewCode。

tableView 在 mainViewController 中是这样声明的(我知道它应该在 View 类中,但它只是一个小型测试项目):

private lazy var dailyForecastTableView: UITableView = {
        let table = UITableView()
        table.dataSource = self
        table.backgroundColor = .clear
        table.register(DailyForecastTableViewCell.self, forCellReuseIdentifier: DailyForecastTableViewCell.identifier)
        table.separatorColor = .white
        table.translatesAutoresizingMaskIntoConstraints = false
        return table
    }()

它的约束条件是:

dailyForecastTableView.topAnchor.constraint(equalTo: dailyForecastLabel.bottomAnchor, constant: 16),
            dailyForecastTableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            dailyForecastTableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            dailyForecastTableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)

正如我所说,我已经为背景着色了,它确实是屏幕的整个宽度,这似乎都很好。问题似乎出在tableViewCell中的堆栈上:

private lazy var mainCellStackView: UIStackView = {
        let stack = UIStackView(arrangedSubviews: [weekDayLabel, dailyIconImageView, minTemperatureLabel, maxTemperatureLabel])
        stack.axis = .horizontal
        stack.distribution = .fill
        stack.translatesAutoresizingMaskIntoConstraints = false
        stack.isLayoutMarginsRelativeArrangement = true
        stack.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
        stack.spacing = 15
        return stack
    }()

约束条件:

private func setupConstraints() {
        mainCellStackView.setConstraintsToParent(contentView)
        
        NSLayoutConstraint.activate([
            mainCellStackView.widthAnchor.constraint(equalTo: contentView.widthAnchor),
            mainCellStackView.centerXAnchor.constraint(equalTo: contentView.centerXAnchor)
        ])
    }
extension UIView {
    func setConstraintsToParent(_ parent: UIView) {
        NSLayoutConstraint.activate([
            self.topAnchor.constraint(equalTo: parent.topAnchor),
            self.leadingAnchor.constraint(equalTo: parent.leadingAnchor),
            self.trailingAnchor.constraint(equalTo: parent.trailingAnchor),
            self.bottomAnchor.constraint(equalTo: parent.bottomAnchor)
        ])
    }
}

如果我强制 stackView 中的元素具有更大的宽度,则堆栈会占用更多空间,但在不同的手机尺寸中,大小将不正确。

我希望stackView占据屏幕的整个宽度。

iOS Swift UITableView UIStack View

评论

0赞 HangarRash 11/9/2023
堆栈视图设置为填充内容视图。但是您向堆栈视图添加了边距,因此标签不会填充堆栈视图。为表格视图背景、单元格背景、单元格内容视图背景、堆栈视图背景和标签背景设置不同的颜色。或者使用 Xcode 的“调试视图层次结构”功能来查看所有内容的大小和位置。
0赞 Gabriel Santos de Souza 11/13/2023
是的,但是我添加的边距应该只是内部的,它不应该影响stackView的外部大小。我已经测试了配色方案并检查了层次结构视图,它向我显示它是 tableViewCell 中的 stackView 不占用 contentView 的整个宽度。即使我删除了边距,宽度问题仍然存在。

答: 暂无答案