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

时间:2018-03-12 05:50:05

标签: ios swift uitableview uiimageview uiimage

我正在尝试下载图像并将其放在自定义单元格中,该单元格包含UIImage和UITextView。我需要它等于屏幕的宽度并且高度成比例,类似于这个question但我不知道如何使用这个转换答案来使用自定义表格单元格。在tableView:cellForRowAt调用cell.storedImage.frame.widthheight 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个空间限制

enter image description here

我认为代码片段是我应该使用的路径,但我不确定如何使图像看起来正确。

1 个答案:

答案 0 :(得分: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宽度,为您的间距添加值,添加笔记的高度