如何在单击按钮时将 ImageView 添加到表格单元格中？

Posted 2023-03-04

【中文标题】如何在单击按钮时将 ImageView 添加到表格单元格中？

【英文标题】：How do I add an ImageView into a table cell on button click?

【发布时间】：2017-02-02 13:42:02

【问题描述】：

我正在尝试做这样的事情：

当用户单击“添加页面”时，会在其下方显示一个新分组。现在，我决定使用表格视图单元格来实现这一点。在遵循各种教程并查找类似的问答之后，我可以使用 UILabel 在按钮单击时添加单元格，并根据内容使单元格高度是动态的，但现在我试图弄清楚如何在单元格中添加 ImageView 和放置按钮.

我创建了一个自定义单元类：

class PageCell : UITableViewCell 

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) 
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        self.selectionStyle = UITableViewCellSelectionStyle.none

        setupViews()
    

    ...
    ... // other random code here


    let imgView : UIImageView = 
        let imgview = UIImageView()
        imgview.frame = CGRect(x: 100, y: 150, width: 150, height: 140)
        imgview.tintColor = UIColor(red: 0.73, green: 0.2, blue: 0.3, alpha: 1.0)
        imgview.translatesAutoresizingMaskIntoConstraints = false
        return imgview
    ()

    func setupViews() 
        addSubview(pageLabel) // the label that I got working
        addSubview(imgView) // can't get this working
        ...
        // constraint info here
    

然后回到我的 TableViewController：

class TakePhotosVC: UITableViewController 
    override func viewDidLoad() 
        super.viewDidLoad()
        tableView.register(PageCell.self, forCellReuseIdentifier: "cellID")
    

    // return the actual view for the cell
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 

        let pagecell = tableView.dequeueReusableCell(withIdentifier: "cellID", for: indexPath) as! PageCell
        // set more stuff here
    

    ... // more code
 

我的问题是我试图获得一个框，显示 ImageView 的位置，用户可以单击以加载图片。我不确定如何执行此操作并同时放置所有相关按钮（垃圾箱、X 等）

任何帮助将不胜感激。

编辑

好的，我试图按照 this 教程进行操作，但我无法让它正常工作。在我的原型单元中，我看到了这个：

但是结果是这样的：

我为UIImageView 设置了背景，以便我可以看到它。我对 UIImageView 有两个约束，它们是：宽度 = 240，高度 = 128 和 Page Label 的两个约束，它们是：宽度 = 240，高度 = 21。两个问题：为什么我的元素没有正确放置，即使我将它正确放置在情节提要中吗？为什么单元格高度不能动态调整大小以适应元素？

我在TakePhotosVC 的viewDidLoad 方法中有这两行，但它似乎没有做任何事情。

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 200

如果相关，我会在运行模拟器时收到此警告。

仅警告一次：检测到约束不明确的情况 建议表格视图单元格的内容视图高度为零。是 考虑意外倒塌并使用标准高度 而是。

编辑 2

我让它工作了。对于在我之后阅读此内容的任何可怜的灵魂，您必须单击“约束”窗口编辑器中的那些粉红色虚线，然后单击“添加 X 约束”以使 ImageView 居中。

【参考方案1】：

我的问题是我正在尝试获取一个显示 ImageView 位置的框 是用户可以点击加载图片。我不确定如何 这样做并放置所有相关按钮（垃圾箱、X 等）

我不确定我是否理解正确。你有一个带有 UIImageView 的单元格。但是您想显示一个框以直观地指示用户应该触摸的位置以添加 UIImage (?)

为什么不简单地在 UIImageView 顶部添加一个具有完全相同帧大小的 UIButton，并且在触摸时触发添加图像的操作，一旦成功添加图像，您可以将 UIButton 设置为隐藏。

如果用户使用垃圾桶按钮删除图像，您只需通过 hidden = NO 再次显示 UIButton。

其他解决方案： 使用自定义颜色向 UIImageView 添加边框并添加 UITapGestureRecognizer 以触发操作。 （确保将 UIImageView 设置为 userInteractionEnabled = YES；

您也可以在没有图像集时将占位符图像添加到 UIImageView，使用您的自定义设计。

【讨论】：

这正是我想要做的（在 ImageView 顶部添加按钮）。现在，我只是想让 ImageView 显示出来。我会尝试你的添加边框的建议。

如果您没有设置图像，UIImageView 将不会在视觉上“显示”。您可以为其设置背景颜色为红色或蓝色，当您没有设置图片时，您可以直观地看到它。

【参考方案2】：

最简单的方法是使用 xib 而不是以编程方式放置按钮。为此，请添加一个新文件并选择 xib。在 xib 中，您可以使用图像视图预先制作一个 tableviewcell，并且您已经为您放置了带有约束的按钮。然后，您可以将此表视图单元子类化，并将图像视图和按钮与 ib 插座和 ib 操作连接以访问按钮和图像视图。然后，在你的 cellForRow 函数中，像这样加载 xib：

Bundle.main.loadNibNamed("NameOfNib", owner: self, options: nil).first as! NameOfSubclass

我建议阅读更多关于 xibs 和 nibs 的内容。