iOS小知识：封装上传图片视图（支持删除和添加）

可重用的上传图片视图：简化 iOS 应用中的图片管理

简介

在 iOS 开发中，处理图片上传是一个常见的需求。为了简化这一过程并提供一个可重用的组件，我们可以封装一个上传图片视图，支持轻松添加和删除图片。本博客将指导你完成如何创建这样一个视图，包括代码示例和最佳实践。

封装上传图片视图

1. 创建自定义视图

第一步是创建一个自定义视图类，将作为我们的上传图片视图。它将包含一个 UICollectionView 来显示图片。

class UploadImageView: UIView {

    // UICollectionView 用于显示图片
    private let collectionView: UICollectionView = {
        // 设置布局
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 100, height: 100)
        layout.minimumLineSpacing = 10
        layout.minimumInteritemSpacing = 10
        
        // 创建 UICollectionView
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.backgroundColor = .white
        
        // 注册自定义单元格
        collectionView.register(UploadImageCell.self, forCellWithReuseIdentifier: "UploadImageCell")
        
        return collectionView
    }()

    // 初始化
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    // 设置视图
    private func setupView() {
        // 添加 UICollectionView
        addSubview(collectionView)
        
        // 自动布局
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])
    }

}

2. 创建自定义单元格

接下来，我们需要一个自定义单元格类来显示图片并提供删除按钮。

class UploadImageCell: UICollectionViewCell {

    // 用于显示图片的 UIImageView
    private let imageView: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFit
        return imageView
    }()

    // 删除按钮
    private let deleteButton: UIButton = {
        let button = UIButton(type: .custom)
        button.setImage(UIImage(systemName: "multiply.circle.fill"), for: .normal)
        button.tintColor = .red
        button.addTarget(self, action: #selector(deleteButtonTapped), for: .touchUpInside)
        return button
    }()

    // 初始化
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    // 设置视图
    private func setupView() {
        // 添加控件到内容视图
        contentView.addSubview(imageView)
        contentView.addSubview(deleteButton)
        
        // 自动布局
        imageView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
            imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])

        deleteButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            deleteButton.topAnchor.constraint(equalTo: contentView.topAnchor),
            deleteButton.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            deleteButton.widthAnchor.constraint(equalToConstant: 30),
            deleteButton.heightAnchor.constraint(equalToConstant: 30)
        ])
    }

    // 配置单元格
    func configure(with image: UIImage) {
        imageView.image = image
    }

    // 删除按钮点击事件
    @objc private func deleteButtonTapped() {
        // 通知委托删除图片
        delegate?.deleteImage(at: indexPath)
    }

}

3. 设置数据源和代理

在控制器中，我们需要设置数据源和代理，以及实现相关方法。

class UploadImageViewController: UIViewController {

    // 上传图片视图
    private let uploadImageView: UploadImageView = {
        let uploadImageView = UploadImageView()
        uploadImageView.delegate = self
        return uploadImageView
    }()

    // 视图加载
    override func viewDidLoad() {
        super.viewDidLoad()
        setupView()
    }

    // 设置视图
    private func setupView() {
        // 添加上传图片视图
        view.addSubview(uploadImageView)
        
        // 自动布局
        uploadImageView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            uploadImageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            uploadImageView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            uploadImageView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
            uploadImageView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
    }

}

// 委托方法
extension UploadImageViewController: UploadImageViewDelegate {

    // 删除图片
    func deleteImage(at indexPath: IndexPath) {
        // 从数据源中删除图片
        // 更新 UICollectionView
    }

}

优势

使用这种可重用的上传图片视图提供了以下优势：

• 代码简洁可维护： 封装的组件提供了简洁、易于维护的解决方案。
• 可重用性： 该视图可以在不同的项目和场景中重复使用，从而节省开发时间。
• 可定制性： 你可以轻松定制外观和行为，以满足特定的项目需求。
• 增强用户体验： 它提供了一个直观且用户友好的界面，用于添加和管理图片。

常见问题解答

• 问：如何处理图片大小调整？
  • 答： 你可以在自定义单元格中使用 imageView.contentMode 属性来控制图片的大小调整。
• 问：我可以禁用删除按钮吗？
  • 答： 是的，你可以通过在自定义单元格中将 deleteButton.isHidden 设置为 true 来禁用删除按钮。
• 问：如何处理多个图片选择？
  • 答： 在自定义视图中添加一个 UICollectionViewDelegateFlowLayout 协议来管理多选。
• 问：该视图支持不同方向的图片吗？
  • 答： 是的，你可以通过在自定义单元格中使用 imageView.transform 来旋转图片。
• 问：我可以在自定义视图中使用不同的布局吗？
  • 答： 是的，你可以使用 UICollectionViewFlowLayout 创建自定义布局。

结论

通过使用 UICollectionView 和自定义单元格，我们创建了一个可重用且可定制的上传图片视图。这种组件简化了 iOS 应用中的图片管理，并为开发人员提供了一个强大的工具，用于创建用户友好的界面。