ios - 如果没有图像，则缩小 collectionView Cell 的高度

Question

我有一个单元格，图像固定在单元格的左上角。与图像相关的其他约束。

这里是图像高度限制:

这是我的数据 setter :

import UIKit
import Kingfisher

class WorkoutSectionCollectionViewCell: UICollectionViewCell {

@IBOutlet weak var colorLine: UIView!
@IBOutlet weak var workoutName: UILabel!
@IBOutlet weak var widthConstraint: NSLayoutConstraint!
@IBOutlet weak var workoutDescription: UILabel!
@IBOutlet weak var parametersStackView: UIStackView!
@IBOutlet weak var exercisesIcon: UIImageView!
@IBOutlet weak var exercisesLabel: UILabel!
@IBOutlet weak var musclesIcon: UIImageView!
@IBOutlet weak var musclesLabel: UILabel!
@IBOutlet weak var workoutImage: UIImageView!

var workout: Workout? {
    didSet {
        // Get image form backend
        if let imageUrl = workout?.workoutImage?.imageUrl {
            let resource = ImageResource(downloadURL: URL(string: imageUrl)!, cacheKey: imageUrl)
            workoutImage.kf.setImage(with: resource)
            workoutImage.isHidden = false
        } else {
            workoutImage.isHidden = true
        }

        if let workoutKind = workout?.workoutKind {
            switch workoutKind {
            case "силовая": colorLine.backgroundColor = Colors.colorCadmiumOrange
            case "фитнес": colorLine.backgroundColor = Colors.colorGreen
            case "кардио": colorLine.backgroundColor = Colors.colorBlueDeFrance
            case "HIIT": colorLine.backgroundColor = Colors.colorCarminePink
            default:
                colorLine.backgroundColor = Colors.colorClear
            }
        }

        workoutName.text = workout?.workoutName

        if let workoutDesc = workout?.workoutDesc {
            workoutDescription.text = workoutDesc.html2String
        }

        if let numberOfExercises = workout?.workoutExercises?.count {
            exercisesLabel.text = "\(numberOfExercises) " + pluralForm(number: numberOfExercises, forms: ["упражнение", "упражнения", "упражнений"])
        }

        var workoutMuscles: [String] = []
        workout?.workoutExercises?.forEach({ (exercise) in
            workoutMuscles.append((exercise as! Exercise).mainMuscle!)
        })
        musclesLabel.text = Set(workoutMuscles).joined(separator: ", ").lowercased()
    }
}

override func awakeFromNib() {
    super.awakeFromNib()

    // Initialization code
    self.contentView.translatesAutoresizingMaskIntoConstraints = false
    let screenWidth = UIScreen.main.bounds.size.width
    widthConstraint.constant = screenWidth - 20
    self.layer.cornerRadius = 3
    workoutName.textColor = Colors.colorPaynesGrey
    workoutDescription.textColor = Colors.colorDimGray
    exercisesLabel.textColor = Colors.colorSilver
    musclesLabel.textColor = Colors.colorSilver
    musclesIcon.tintColor = Colors.colorSilver
    exercisesIcon.tintColor = Colors.colorSilver
}

我使用 KingFisher 库通过 REST Api 从后端获取图像。

问题是有些单元格有图像然后一切正常，但有些单元格没有图像然后出现空白。

如果没有图像，我想隐藏空白区域并缩小单元格高度以适应内容。我该怎么做？

已解决:在@Fangming Ning

的帮助下，我是这样解决的

我为图像高度添加了一个导出:

@IBOutlet weak var imageHeightConstraint: NSLayoutConstraint!

然后设置窗口宽度和内嵌(左右各10):

let screenWidth = UIScreen.main.bounds.size.width
let screenInsets: CGFloat = 20

在 didSet 中添加如下代码:

if let imageUrl = workout?.workoutImage?.imageUrl {
            let resource = ImageResource(downloadURL: URL(string: imageUrl)!, cacheKey: imageUrl)
            workoutImage.kf.setImage(with: resource)
            // Set image height if image exists
            imageHeightConstraint.constant = (screenWidth - screenInsets) * 0.666
        } else {
            // Set 0 if no image
            imageHeightConstraint.constant = 0
        }

在 IB 图像约束中看起来像这样:

Answer 1

如果您的图像来自异步服务器调用，那么当回调中没有图像时缩小单元格不是一个好主意。如果这样做，您的 TableView 会出现很多故障，用户体验会很差。

相反，在您首先检索文本的调用中，您需要检查是否有图像。然后，首先隐藏 ImageView 而不是首先离开空间，然后检查图像是否存在。

为此，在您的服务器调用中，假设您在返回的 JSON 响应中包含一个表示 hasImage 的键。我们还需要设置单元格，以便顶部的 ImageView 具有高度限制。底部的 TextView 需要有约束说填充顶部。这样，当您将 ImageView 高度设置为 0 时，您的 TextView 将自动向上移动以缩小一个单元格。

首先，为您的高度限制提供一个标识符，以便我们可以通过代码更改它。看起来像这样

现在，在您的 cellForRow 中，您可以执行以下操作

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "ImageCell") as! ImageCell
    if dataArray[indexPath.row].hasImage {
        //add image
    } else {
        let filteredConstraints = cell.imgView.constraints.filter { $0.identifier == "imgTxtCellImgHeight" }
        if let heightConstraint = filteredConstraints.first {
            heightConstraint.constant = 0
        }
    }
    return cell
}