如何在自定義單元格中使UIImage的寬度等於視圖的寬度和比例高度

Question

我正在嘗試下載圖像並將其放在自定義單元格中，該單元格包含UIImage和UITextView。 我需要它等於屏幕的寬度並與高度成比例，類似於此問題，但是我不確定如何使用此轉換答案以使用自定義表格單元格。 嘗試在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個空間限制以進行超級視圖

我假定代碼段是我應該使用的路徑，但是我不確定如何使圖像看起來正確。

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寬度，添加間距值，添加便箋的高度