协议中的UI元素？

Question

我的应用程序有大约6个基于界面构建器的视图，它们包含相同的UI元素，由同一个ViewModel启动，但是所有视图都是不同的类(有些是UICollectionViewCell，有些是UITableViewCell，有些是UIViewController视图的一部分)，它们看起来完全不同，有不同的约束和总体设计。

我发现在每个视图中将UI元素绑定到ViewModel中有很多代码重复，并且我试图找到一种方法来清理代码。

由于应用程序是protocol-oriented，，所以我想出了以下解决方案：

protocol Common {
    var someTitleLabel: UILabel! { get set }
    var someImageView: UIImageView! { get set }
    func configure(viewModel: ViewModel?)
}

extension Common {
    func configure(viewModel: ViewModel?) {
        guard let viewModel = viewModel else { return }
        someTitleLabel?.text = viewModel.title
        someImageView?.image = viewModel.image
}

以及每一种观点的实施情况：

class someClass: UICollectionViewCell, Common {

    @IBOutlet weak var someTitleLabel: UILabel!
    @IBOutlet weak var someImageView: UIImageView!

    override func awakeFromNib() {
        super.awakeFromNib()
    }

cell.configure(viewModel: viewModel)

好的是它起作用了。

糟糕的是，我从未在我所从事的任何应用程序中见过这样的实现。

所以，主要的问题是--这是解决这类问题的好办法吗？在这种情况下，我应该放弃面向协议的结构，而使用面向对象( OOP )吗？由同一个ViewModel配置的“泛型”接口构建器视图的最佳实践是什么？

Answer 1

您可以使用继承的权力来实现相同的结果。

YourBaseCell: UICollectionViewCell {

        @IBOutlet weak var someTitleLabel: UILabel!
        @IBOutlet weak var someImageView: UIImageView!

        func configure(viewModel: ViewModel?) {
            guard let viewModel = viewModel else { return }
            someTitleLabel?.text = viewModel.title
            someImageView?.image = viewModel.image
        }
}

然后连接到每个xib文件的基类。

Answer 2

最好是让您的具体类控制配置方法。

protocol Common {
    var someTitleLabel: UILabel! { get set }
    var someImageView: UIImageView! { get set }
    func configure(viewModel: ViewModel)

}

extension Common {
    func configureCommonProperties(viewModel: ViewModel) {
        guard let viewModel = viewModel else { return }
        someTitleLabel?.text = viewModel.title
        someImageView?.image = viewModel.image
    }
}

class someClass: UICollectionViewCell, Common {

    @IBOutlet weak var someTitleLabel: UILabel!
    @IBOutlet weak var someImageView: UIImageView!

    func configure(viewModel: ViewModel) {
        configureCommonProperties(viewModel: viewModel)
    }
    
}

Answer 3

YourBaseCell：

UICollectionViewCell {

    @IBOutlet weak var someTitleLabel: UILabel!
    @IBOutlet weak var someImageView: UIImageView!

    func configure(viewModel: ViewModel?) {
        guard let viewModel = viewModel else { return }
        someTitleLabel?.text = viewModel.title
        someImageView?.image = viewModel.image
    }
}

与从单元格继承不同，您可以从UIView继承并使用这个新类作为自定义视图，这样构建单元格ui就没有问题了，它解决了“将UI元素绑定到ViewModel中的代码复制”

你可以做一些这样的事情：

CellContenierView: UIView {

    @IBOutlet weak var someTitleLabel: UILabel!
    @IBOutlet weak var someImageView: UIImageView!

    func configure(viewModel: ViewModel?) {
        guard let viewModel = viewModel else { return }
        someTitleLabel?.text = viewModel.title
        someImageView?.image = viewModel.image
    }
}