Question

我想在我的iPhone应用程序中给消息的表格视图提供聊天方面。为了执行质量渲染，我添加了两个子视图：文本和“容器”，它只是一个背景颜色的视图。

即使它第一次有效，当我滚动时，它也会变得非常混乱，因为它会不断添加很多子视图。

这是处理变换的函数，在滚动时调用它。

func configChatCell(cell: UITableViewCell, text: String, color:UIColor)
{
    cell.textLabel?.numberOfLines = 0
    cell.textLabel?.lineBreakMode = NSLineBreakMode.ByWordWrapping
    cell.textLabel?.textColor = UIColor.whiteColor()

    let fixedWidth = cell.bounds.width - 150
    let textView: UITextView = UITextView(frame: CGRect(x: 0, y: 0, width: 10, height: CGFloat.max))
    textView.text = text

    let newSize = textView.sizeThatFits(CGSize(width: fixedWidth, height: CGFloat.max))
    var newFrame = textView.frame
    newFrame.size = CGSize(width: min(newSize.width, fixedWidth), height: newSize.height)
    textView.sizeThatFits(newFrame.size)
    textView.frame = newFrame
    textView.backgroundColor = UIColor.clearColor()


    self.rowHeight = textView.frame.height+20


    let view = UIView()
    view.backgroundColor = color
    print(textView.frame.height+10)
    view.frame = CGRect(x: 0, y: 5, width: textView.frame.width+50, height: textView.frame.height+10)
    view.layer.cornerRadius = 5


    cell.backgroundColor = UIColor.clearColor()
    cell.contentView.addSubview(view)
    cell.contentView.addSubview(textView)
    cell.contentView.sendSubviewToBack(view)
}

如果每次滚动时删除子视图，屏幕上都不会显示任何内容。

有人可以帮我找到解决方案吗？或者还有其他方法吗？

提前致谢！

Answer 1

我很快为此写了一些东西。

以ChatCell

开头

class ChatCell: UITableViewCell {

    var messageLabel: UILabel? {
        didSet {
            messageLabel?.text = message
        }
    }

    var message: String? {
        didSet {
            messageLabel?.text = message
        }
    }

    class func messageCell(withText text: String, leading: Bool = true) -> ChatCell {
        let cell = ChatCell()
        cell.message = text



        // Make the container
        let container = UIView()
        container.translatesAutoresizingMaskIntoConstraints = false
        cell.contentView.addSubview(container)

        container.topAnchor.constraintEqualToAnchor(cell.contentView.topAnchor, constant: 8).active = true
        container.bottomAnchor.constraintEqualToAnchor(cell.contentView.bottomAnchor, constant: -8).active = true

        if leading {
            container.leadingAnchor.constraintEqualToAnchor(cell.contentView.leadingAnchor, constant: leading ? 8 : 8*8).active = true
            container.trailingAnchor.constraintLessThanOrEqualToAnchor(cell.contentView.trailingAnchor, constant: leading ? -8*8 : -8).active = true
        } else {
            container.leadingAnchor.constraintGreaterThanOrEqualToAnchor(cell.contentView.leadingAnchor, constant: leading ? 8 : 8*8).active = true
            container.trailingAnchor.constraintEqualToAnchor(cell.contentView.trailingAnchor, constant: leading ? -8*8 : -8).active = true
        }

        // Make the messageLabel.
        let messageLabel = UILabel()
        messageLabel.numberOfLines = 0
        messageLabel.textColor = UIColor.whiteColor()
        messageLabel.translatesAutoresizingMaskIntoConstraints = false
        container.addSubview(messageLabel)

        // Add constraints.
        messageLabel.topAnchor.constraintEqualToAnchor(container.topAnchor, constant: 8).active = true
        messageLabel.bottomAnchor.constraintEqualToAnchor(container.bottomAnchor, constant: -8).active = true
        messageLabel.leadingAnchor.constraintEqualToAnchor(container.leadingAnchor, constant: 8).active = true
        messageLabel.trailingAnchor.constraintEqualToAnchor(container.trailingAnchor, constant: -8).active = true

        cell.messageLabel = messageLabel

        container.backgroundColor = UIColor(red:0.19, green:0.70, blue:1.00, alpha:1.00)
        container.layer.cornerRadius = 12.0

        return cell
    }

}

该单元格还包括对前导和尾随消息的支持，用于来回对话。也许像这样制作一系列元组：

let messages: [(message: String, leading: Bool)] = [("Hello", true), ("My name is John Doe and this works quite well", false), ("I would agree", true)]

然后在tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell中你可以这样做：

let cell = ChatCell.messageCell(withText: messages[indexPath.row].message, leading: messages[indexPath.row].leading)
return cell

如果这对您有用，请告诉我。我在Playground中测试了它，它按预期工作

Answer 2

假设您configureChatCell来自tableView:cellForRowAtIndexPath:，那么@ Paulw11是对的;单元格被重用，因此您只应对表格中该行唯一的更改进行更改。在您的示例中，您应该在方法中进行的仅调用textView.text = text以及调整textView的调整以适应。其他所有内容都应该放在故事板中的动态单元原型中，或者，如果你想在代码中做所有事情（我感觉你做的很糟糕），那么将其余的配置放在UITableViewCell子类中，然后使用表视图注册该子类。

Answer 3

我写的是这样的。这很简单，但可以阐明解决方案

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("reuseid", forIndexPath: indexPath)

    // Configure the cell...
    let contentView = cell.contentView
    let subviews = contentView.subviews
    for view in subviews {
        if 100 == view.tag {
            let label = view as! UILabel
            label.text = self.datas[indexPath.row]
        } else if 200 == view.tag {
            view.layer.cornerRadius = 10.0
        }
    }

    return cell
}

关键点是配置tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell中的所有内容代码中带有标记200的视图是一个背景视图，它具有相同的标签框架，我在故事板中使用布局约束来确保它的大小和位置。

在tableView单元格上添加子视图会导致拼凑错误

3 个答案: