从带有Kingfisher的URL加载图像后如何调整UIImageView的大小

时间:2019-01-21 15:48:38

标签: swift uitableview uiimageview kingfisher

我想调整所有下载图像的大小,以便它们保持其长宽比,但是与渲染它们的UITableViewCell一样宽。

我的UIImageView配置为contentModeAspectFit,并且在单元格上具有以下锚点:

enter image description here

当前尝试中,我快到了:

class AnimatedImageTableViewCell: UITableViewCell {
    @IBOutlet weak var gifView: AnimatedImageView!
    @IBOutlet weak var imageHeightAnchor: NSLayoutConstraint!

    var refreshCell: (() -> Void)?

    func render(imageUrl: String) {
        guard let url = URL(string: imageUrl) else { return }

        gifView.kf.setImage(with: url) { result in
            switch result {
            case .success(let value):
                let ratio = value.image.size.width / value.image.size.height
                let newHeight = self.gifView.frame.width / ratio
                self.imageHeightAnchor.constant = newHeight
                self.refreshCell?()
            case .failure(let error):
                print(error) // The error happens
            }
        }
    }
}

也:

class HomeViewController: UITableViewController {

    let images = [
        "https://cdn-images-1.medium.com/max/1600/1*OJxJTJLSyqJ0nMeuswuCSQ.gif",
        "https://static1.squarespace.com/static/552a5cc4e4b059a56a050501/565f6b57e4b0d9b44ab87107/566024f5e4b0354e5b79dd24/1449141991793/NYCGifathon12.gif",
        "https://media2.giphy.com/avatars/100soft/WahNEDdlGjRZ.gif"
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.tableFooterView = UIView()
        tableView.estimatedRowHeight = 200
        tableView.rowHeight = UITableView.automaticDimension
        tableView.allowsSelection = false

        let nib = UINib(nibName: "AnimatedImageTableViewCell", bundle: nil)
        tableView.register(nib, forCellReuseIdentifier: "cellId")

    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return images.count
    }


    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let imagePath = images[indexPath.item]

        let cell = tableView.dequeueReusableCell(withIdentifier: "cellId", for: indexPath) as! AnimatedImageTableViewCell

        cell.refreshCell = {
            tableView.reloadRows(at: [indexPath], with: .automatic)
        }

        cell.render(imageUrl: imagePath)

        return cell
    }
}

但是在某些情况下,电池太高。图像以正确的宽高比呈现全宽,图像上方和下方都有太多空间。

我在控制台中也收到如下错误:

(
    "<NSLayoutConstraint:0x600000329770 Kingfisher.AnimatedImageView:0x7fd339e19330.height == 268.5   (active)>",
    "<NSLayoutConstraint:0x60000032a8f0 Kingfisher.AnimatedImageView:0x7fd339e19330.top == UITableViewCellContentView:0x7fd339e1a280.topMargin + 8   (active)>",
    "<NSLayoutConstraint:0x60000032a850 UITableViewCellContentView:0x7fd339e1a280.bottomMargin == Kingfisher.AnimatedImageView:0x7fd339e19330.bottom + 8   (active)>",
    "<NSLayoutConstraint:0x60000032a7b0 'UIView-bottomMargin-guide-constraint' V:[UILayoutGuide:0x600001908ee0'UIViewLayoutMarginsGuide']-(8)-|   (active, names: '|':UITableViewCellContentView:0x7fd339e1a280 )>",
    "<NSLayoutConstraint:0x600000323980 'UIView-Encapsulated-Layout-Height' UITableViewCellContentView:0x7fd339e1a280.height == 450.5   (active)>",
    "<NSLayoutConstraint:0x60000032a6c0 'UIView-topMargin-guide-constraint' V:|-(8)-[UILayoutGuide:0x600001908ee0'UIViewLayoutMarginsGuide']   (active, names: '|':UITableViewCellContentView:0x7fd339e1a280 )>"
)

enter image description here

2 个答案:

答案 0 :(得分:0)

试图使用提供的代码重新创建您的项目,并且一切都按预期工作,直到我注意到您的图像视图限于单元格内容视图边距为止。然后,它开始抛出那些布局错误,并且单元格变得异常高。因此,我的猜测是您需要确保图像视图约束与单元格边距无关。

margins constraints

还要确保您的视图控制器中没有heightForRowAt替代项。

要完全摆脱自动布局错误,您可以将底部约束优先级设置为999(blog post,并说明优先级为何起作用)

答案 1 :(得分:0)

您可以在设置图像视图的image属性之后简单地尝试调整其大小。例如:

class ResizableImageView: UIImageView {

  override var image: UIImage? {
    didSet {
      guard let image = image else { return }

      let resizeConstraints = [
        self.heightAnchor.constraint(equalToConstant: image.size.height),
        self.widthAnchor.constraint(equalToConstant: image.size.width)
      ]

      if superview != nil {
        addConstraints(resizeConstraints)
      }
    }
  }
}

然后,添加其常规约束,省略heightAnchorwidthAnchor约束,因为这些约束将在添加图像后立即添加(我建议此时不要使用界面生成器):< / p>

let imageView = ResizableImageView(frame: .zero)
imageView.translatesAutoresizingMaskIntoConstraints = false

view.addSubview(imageView)

// These are only illustrative constraints
imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

imageView.image = image

这是一个完整且功能齐全的示例:

class ViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()

    downloadImage(
      fromURL: URL(string: "https://img.evbuc.com/https%3A%2F%2Fcdn.evbuc.com%2Fimages%2F33105753%2F184176199496%2F1%2Foriginal.jpg?h=200&w=450&rect=0%2C0%2C400%2C200&s=a92a5a03c153d312d682b2dfedd6a6ad")!,
      completionHandler: { [weak self] image in
        guard let self = self, let image = image else { return }

        let imageView = ResizableImageView(frame: .zero)
        imageView.translatesAutoresizingMaskIntoConstraints = false

        self.view.addSubview(imageView)

        imageView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        imageView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true

        imageView.image = image
      })
  }

  func downloadImage(fromURL url: URL, completionHandler: @escaping (UIImage?) -> Void) {
    let operationQueue = OperationQueue()

    operationQueue.addOperation {
      guard let data = try? Data(contentsOf: url) else {
        OperationQueue.main.addOperation {
          completionHandler(nil)
        }

        return
      }

      OperationQueue.main.addOperation {
        let image = UIImage(data: data)
        completionHandler(image)
      }
    }
  }
}