如何使用 Swift 将 ActivityIndi​​cator 放入 UITableView 中的 UIImage 中？

Question

我有 UITableView，其中每个单元格都有一个 UIImage 并且图像是使用 JSON 从 API 下载的。

我通过后台线程处理初始图像和数据。然而，当用户在表格视图中向下滚动时，其他单元格的图像开始下载，因此这些单元格需要一些刷新。

我想在 UIImageView 中添加一个 ActivityIndi​​cator，这样用户就会注意到正在下载图像。

附加信息，UIImageView 位于 UIStackView 内。想过isHidden方法，没能实现。

感谢您的时间。

Answer 1

通常，我建议使用像Kingfisher这样的库来为您管理（我相信您可以在加载时设置一个占位符视图来显示）但是如果您想手动执行此操作，您可以使用类似的方法

enum LoadingState {
    case notLoading
    case loading
    case loaded(UIImage)
}

class MyTableViewCell: UITableViewCell {
    let activityIndicator = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.gray)
    let imageStackView = UIStackView()
    let myImageView = UIImageView() // can't be named imageView because UITableViewCell already has one with that name

    var loadingState: LoadingState = .notLoading {  // many ways you could do this, you just need one or more "update" mechanisms to start/stop the spinner and set your image
        didSet {
            switch loadingState {
            case .notLoading:
                myImageView.image = nil
                activityIndicator.stopAnimating()
            case .loading:
                myImageView.image = nil
                activityIndicator.startAnimating()
            case let .loaded(img):
                myImageView.image = img
                activityIndicator.stopAnimating()
            }
        }
    }

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        configure()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        configure()
    }

    private func configure() {
        contentView.addSubview(activityIndicator)
        contentView.addSubview(imageStackView)
        imageStackView.addArrangedSubview(myImageView)
        // constrain activity indicator and stack view
    }

    override func prepareForReuse() {
        super.prepareForReuse()
        loadingState = .notLoading
    }
}