如何使 UIImage 宽度等于自定义单元格内视图的宽度和比例高度

Question

我正在尝试下载图像并将其放置在包含 UIImage 和 UITextView 的自定义单元格中。我需要它等于屏幕的宽度并具有成比例的高度，类似于 question 但我不知道如何使用它来转换答案以使用自定义表格单元格。在尝试在tableView:cellForRowAt 中设置图像宽度和高度时，调用cell.storedImage.frame.width 和height Xcode 说它只是一个get-only 属性。这是我认为可行的方法

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if tableData[indexPath.row]["Image"] != nil {
        let cell = tableView.dequeueReusableCell(withIdentifier: "imageNotesData", for: indexPath) as! ImageNotesCell
        cell.notes.delegate = self
        cell.notes.tag = indexPath.row
        cell.notes.text = tableData[indexPath.row]["Notes"] as! String
        guard let imageFirebasePath = tableData[indexPath.row]["Image"] else {
            return cell }
        let pathReference = Storage.storage().reference(withPath: imageFirebasePath as! String)
        pathReference.getData(maxSize: 1 * 1614 * 1614) { data, error in
            if let error = error {
                print(error)
            } else {
                //let image = UIImage(data: data!)
                //cell.storedImage.image = image


                let containerView = UIView(frame: CGRect(x:0,y:0,width:self.view.frame.width
                    ,height:500))
                let imageView = UIImageView()
                if let image = UIImage(data:data!) {
                    let ratio = image.size.width / image.size.height
                    if containerView.frame.width > containerView.frame.height {
                        let newHeight = containerView.frame.width / ratio
                        imageView.frame.size = CGSize(width: containerView.frame.width, height: newHeight)
                        cell.storedImage.frame.height = newHeight
                    }
                    else{
                        let newWidth = containerView.frame.height * ratio
                        imageView.frame.size = CGSize(width: newWidth, height: containerView.frame.height)
                        cell.storedImage.frame.width = newWidth
                    }
                }
                let image = UIImage(data: data!)
                cell.storedImage.image = image
            }
        }
        return cell
    }
    else {
        let cell = tableView.dequeueReusableCell(withIdentifier: "notesData", for: indexPath) as! NotesCell
        //let noteString = tableData[indexPath.row]["Notes"] as! String
        cell.notes.text = tableData[indexPath.row]["Notes"] as! String
        cell.notes.delegate = self
        cell.notes.tag = indexPath.row
        return cell
    }
}

我还尝试使用自动布局来解决问题，方法是让其下方的文本视图具有两个不同的下边距约束，但它仍然看起来不正确。这是我得到的带有自动布局约束的壁橱。目前，图像视图在超级视图的每一侧都有 0 个空间限制

我假设代码 sn-p 是我应该使用的路径，但我不确定如何使图像看起来正确。

Answer 1

你仍然可以使用动态约束，一旦你得到你的图像，你就可以为你的 uiimageview 设置纵横比约束，但这样做可能会更麻烦。

您也可以直接对框架进行此操作，但您需要为框架创建一个新的 CGRect，您不能简单地直接编辑它的宽度或高度。

您还应该将行的高度设置为正确

tableView(_:heightForRowAt:)

我假设你的 ImageNotesCell 已经在初始化程序中设置了默认大小，并附有某种 uitextfield/uitextview 继承类的注释，并且 storedImage 只是一个图像

class ImageNotesCell: UITableViewCell {
  func setImage(_ image: UIImage) {
    let previousNotesFrame = notes.frame
    let ratio = image.size.height / image.size.width
    storedImage.image = image
    let newImageFrame = CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.width * ratio)
    let newNotesFrame = CGRect(x: 0, y: newImageFrame.size.height + your_spacing_here, width: frame.size.width, height: previousNotesFrame.size.height)
    frame = CGRect(x: 0, y: 0, width: frame.size.width, height: newImageFrame.size.height + your_spacing_here + newNotesFrame.size.height)
    storedImage.frame = newImageFrame
    notes.frame = newNotesFrame
  }
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if tableData[indexPath.row]["Image"] != nil {
        let cell = tableView.dequeueReusableCell(withIdentifier: "imageNotesData", for: indexPath) as! ImageNotesCell
        cell.notes.delegate = self
        cell.notes.tag = indexPath.row
        cell.notes.text = tableData[indexPath.row]["Notes"] as! String
        guard let imageFirebasePath = tableData[indexPath.row]["Image"] else {
            return cell }
        let pathReference = Storage.storage().reference(withPath: imageFirebasePath as! String)
        pathReference.getData(maxSize: 1 * 1614 * 1614) { data, error in
            if let error = error {
                print(error)
            } else {
                let image = UIImage(data: data!)
                cell.setImage(image)
            }
        }
        return cell
    }
    else {
        let cell = tableView.dequeueReusableCell(withIdentifier: "notesData", for: indexPath) as! NotesCell
        //let noteString = tableData[indexPath.row]["Notes"] as! String
        cell.notes.text = tableData[indexPath.row]["Notes"] as! String
        cell.notes.delegate = self
        cell.notes.tag = indexPath.row
        return cell
    }
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    if tableData[indexPath.row]["Image"] != nil {
        guard let imageFirebasePath = tableData[indexPath.row]["Image"] else {
            return your_default_height_here }
        let pathReference = Storage.storage().reference(withPath: imageFirebasePath as! String)
        pathReference.getData(maxSize: 1 * 1614 * 1614) { data, error in
            if let error = error {
                print(error)
            } else {
                let image = UIImage(data: data!)
                let ratio = image.size.height / image.size.width
                return (tableView.frame.size.width * ratio) + your_spacing_value_here + your_notes_height_here
            }
        }
    } else {
        return your_notes_cell_height_here
    }
}

我在我制作的自定义 UITableViewCell 上测试了逻辑，并使用了 3 种不同的图像尺寸和注释。它填满了屏幕。但由于我不知道你的 ImageNotesCell 类以及其他内容，所以我会留给你去适应，但这里是它的要点：

ImageNotesCell 类：

• 添加一个函数来将图像设置到单元格，这将依次更新单元格、注释和图像的框架

控制器类：

• cellForRow：初始化你的单元格，像往常一样为注释部分设置它，当没有任何图像时，调用 setImage 方法，返回你的单元格
• heightForRow：返回没有要加载的图像时的通常高度，获取您的图像，计算它的高度/宽度比，乘以 tableView 宽度，添加间距值，添加您的高度备注