如果设置为 .scaleAspectFill，UIImage 会与标签重叠

Question

我的应用从后端加载图像并将它们显示在 UITableViewCell 中，其中包含用于显示它的 UIImageView 以及一些标签和按钮。

我已使用“重置为建议的限制”选项将建议的限制添加到 UITableViewCell。

这是检索数据后的一些代码：

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    var cell = PostTableViewCell()

    if (self.posts.count == 0) { return cell }

    let post = posts[indexPath.row]

    // Instancia o reuse identifier
    if post["post_image"] != nil {
        cell = tableView.dequeueReusableCell(withIdentifier: Storyboard.PostWithImage, for: indexPath) as! PostTableViewCell
    } else {
        cell = tableView.dequeueReusableCell(withIdentifier: Storyboard.PostWithoutImage, for: indexPath) as! PostTableViewCell
    }
    return cell
}


override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    var cell = PostTableViewCell()
    cell = tableView.dequeueReusableCell(withIdentifier: Storyboard.PostWithImage) as! PostTableViewCell
    return cell.bounds.size.height;
}


override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    var cell = PostTableViewCell()
    cell = tableView.dequeueReusableCell(withIdentifier: Storyboard.PostWithImage) as! PostTableViewCell
    return cell.bounds.size.height;
}

private func configureCell(cell: PostTableViewCell, atIndexPath indexPath: IndexPath) {

    cell.queue.cancelAllOperations()

    let operation: BlockOperation = BlockOperation()
    operation.addExecutionBlock { [weak operation] () -> Void in

        DispatchQueue.main.sync(execute: { [weak operation] () -> Void in
            if (operation?.isCancelled)! { return }

            let post = self.posts[indexPath.row]
            cell.accessibilityIdentifier = post.recordID.recordName

            guard let postTitle = post["post_title"], let postBody = post["post_body"] else {
                return
            }

            if let asset = post["post_image"] as? CKAsset {

                self.imageCache.queryDiskCache(forKey: post.recordID.recordName, done: { (image, cachetype) in
                    if image != nil {
                        cell.postImageView.contentMode = .scaleAspectFill
                        cell.postImageView.autoresizingMask = [.flexibleBottomMargin,
                                                               .flexibleHeight,
                                                               .flexibleLeftMargin,
                                                               .flexibleRightMargin,
                                                               .flexibleTopMargin,
                                                               .flexibleWidth ];
                        cell.postImageView.image = image!
                    } else {
                        do {
                            let data = try Data(contentsOf: asset.fileURL)
                            let image = UIImage(data: data)
                            cell.postImageView.contentMode = .scaleAspectFill
                            cell.postImageView.autoresizingMask = [.flexibleBottomMargin,
                                                                   .flexibleHeight,
                                                                   .flexibleLeftMargin,
                                                                   .flexibleRightMargin,
                                                                   .flexibleTopMargin,
                                                                   .flexibleWidth ];
                            cell.postImageView.image = image!
                            self.imageCache.store(image!, forKey: post.recordID.recordName)

                        } catch {
                            print("Error 1001 = \(error.localizedDescription)")
                        }
                    }
                })

            }

            cell.titleLabel.text = postTitle as? String
            cell.bodyLabel.text =  postBody as? String
        })
    }
    cell.queue.addOperation(operation)
}

Here's 应用程序本身的一些打印显示图像重叠在标签上。

只有在图像处于纵向模式时才会重叠，如果图像是横向拍摄的，则非常适合。

绕过此问题的最佳方法是什么？

Answer 1

您可以以编程方式告诉图像仅在给定的图像区域中绘制。如果您的约束正常工作并且它保持正确的大小，则图像可能只是由于 .scaleAscpedtFill 设置而超出了视图边界。

使用 .clipToBounds = true 来做到这一点。

cell.postImageView.clipToBounds = true

或者，您也可以在界面生成器中进行设置，如下图所示。

试试看有没有帮助？