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

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
    }
}

我也尝试过使用自动布局来解决问题，方法是让其下方的 TextView 具有两个不同的底部边距约束，但它看起来仍然不正确。这是我用自动布局约束得到的壁橱。目前， ImageView 在 super View 的每一侧都有 0 空间限制

我假设代码片段是我应该遵循的路径，但我不确定如何使图像看起来正确。

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 类:

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

Controller 类:

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