如何让上传图片的视图更美观？iOS小技能助你一臂之力【上篇】

IOS

2023-12-16 14:21:18

iOS小技能：上传图片视图的封装【上篇】（核心处理逻辑及注意事项）

前言

在iOS开发中，我们经常会遇到需要上传图片的情况，比如用户头像、产品图片、活动海报等。为了方便开发，我们可以对上传图片的视图进行封装，这样在以后的项目中，就可以直接使用这个封装好的视图，而无需重复开发。

核心处理逻辑

上传图片视图的封装，核心处理逻辑主要包括以下几点：

选择图片：用户点击上传图片按钮，即可打开相册，选择需要上传的图片。
图片上传：选择图片后，需要将图片上传到服务器。
图片显示：图片上传成功后，需要将图片显示在上传图片视图中。
图片删除：用户可以点击删除按钮，删除上传的图片。

注意事项

在封装上传图片视图时，需要注意以下几点：

图片选择器：使用系统提供的图片选择器，可以保证兼容性。
图片上传：需要使用第三方库或者自己编写网络请求代码，将图片上传到服务器。
图片显示：可以使用UIImageView或其他自定义控件，将图片显示在上传图片视图中。
图片删除：需要将删除图片的逻辑写在上传图片视图的代理方法中。

具体实现

具体的实现方法，可以参考以下代码：

// 上传图片视图的封装类
class UploadImageView: UIView {

    // 选择图片按钮
    private lazy var selectImageButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(named: "select_image"), for: .normal)
        button.addTarget(self, action: #selector(selectImageButtonClicked), for: .touchUpInside)
        return button
    }()

    // 上传图片按钮
    private lazy var uploadImageButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(named: "upload_image"), for: .normal)
        button.addTarget(self, action: #selector(uploadImageButtonClicked), for: .touchUpInside)
        return button
    }()

    // 图片显示视图
    private lazy var imageView: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFit
        return imageView
    }()

    // 删除图片按钮
    private lazy var deleteImageButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(named: "delete_image"), for: .normal)
        button.addTarget(self, action: #selector(deleteImageButtonClicked), for: .touchUpInside)
        return button
    }()

    // 图片选择器
    private var imagePicker: UIImagePickerController?

    // 上传图片的代理
    weak var delegate: UploadImageViewDelegate?

    // MARK: - 初始化方法

    override init(frame: CGRect) {
        super.init(frame: frame)

        setupUI()
    }

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

    // MARK: - 私有方法

    // 设置UI
    private func setupUI() {
        addSubview(selectImageButton)
        addSubview(uploadImageButton)
        addSubview(imageView)
        addSubview(deleteImageButton)

        selectImageButton.snp.makeConstraints { (make) in
            make.top.left.equalToSuperview()
            make.width.height.equalTo(40)
        }

        uploadImageButton.snp.makeConstraints { (make) in
            make.top.equalTo(selectImageButton.snp.bottom).offset(10)
            make.left.equalToSuperview()
            make.width.height.equalTo(40)
        }

        imageView.snp.makeConstraints { (make) in
            make.top.equalTo(uploadImageButton.snp.bottom).offset(10)
            make.left.right.equalToSuperview()
            make.height.equalTo(100)
        }

        deleteImageButton.snp.makeConstraints { (make) in
            make.top.equalTo(imageView.snp.bottom).offset(10)
            make.right.equalToSuperview()
            make.width.height.equalTo(40)
        }
    }

    // 选择图片按钮点击事件
    @objc private func selectImageButtonClicked() {
        imagePicker = UIImagePickerController()
        imagePicker?.sourceType = .photoLibrary
        imagePicker?.delegate = self
        present(imagePicker!, animated: true, completion: nil)
    }

    // 上传图片按钮点击事件
    @objc private func uploadImageButtonClicked() {
        guard let image = imageView.image else {
            return
        }

        // 将图片上传到服务器

        // 上传成功后，调用代理方法
        delegate?.uploadImageView(self, didUploadImage: image)
    }

    // 删除图片按钮点击事件
    @objc private func deleteImageButtonClicked() {
        imageView.image = nil

        // 调用代理方法
        delegate?.uploadImageView(self, didDeleteImage: nil)
    }
}

// 上传图片视图的代理协议
protocol UploadImageViewDelegate: NSObjectProtocol {

    // 上传图片成功后调用
    func uploadImageView(_ uploadImageView: UploadImageView, didUploadImage image: UIImage)

    // 删除图片后调用
    func uploadImageView(_ uploadImageView: UploadImageView, didDeleteImage image: UIImage?)
}

// UIImagePickerControllerDelegate和UINavigationControllerDelegate代理方法
extension UploadImageView: UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        guard let image = info[.originalImage] as? UIImage else {
            return
        }

        imageView.image = image

        // 调用代理方法
        delegate?.uploadImageView(self, didSelectImage: image)

        picker.dismiss(animated: true, completion: nil)
    }
}