Swift实现UICollectionViewCell添加时的图片选择与标题输入功能

Hey Chris, let's walk through how to implement this popup flow for your UICollectionView step by step. We'll build a custom popup, handle image selection, and connect everything to update your collection view with the user's input.

1. First, Define a Data Model #

We need a way to store the title and image for each cell. Create a simple struct to hold this data:

struct CellData {
    var title: String
    var image: UIImage?
}

In your view controller, add a data source array to manage all cells:

var cellDataArray: [CellData] = []

2. Build the Custom Popup View #

Create a reusable popup view that includes a text field for the title, an image preview area, and buttons for image selection and confirmation.

class AddCellPopupView: UIView {
    // Closures to pass data back to the view controller
    var onConfirm: ((String, UIImage?) -> Void)?
    var onSelectImage: (() -> Void)?
    
    // UI Elements
    let titleTextField: UITextField = {
        let tf = UITextField()
        tf.translatesAutoresizingMaskIntoConstraints = false
        tf.placeholder = "Enter cell title"
        tf.borderStyle = .roundedRect
        return tf
    }()
    
    let imagePreviewView: UIImageView = {
        let iv = UIImageView()
        iv.translatesAutoresizingMaskIntoConstraints = false
        iv.backgroundColor = .lightGray
        iv.contentMode = .scaleAspectFit
        iv.isUserInteractionEnabled = true // Allow tapping to select image
        return iv
    }()
    
    let selectImageButton: UIButton = {
        let btn = UIButton(type: .system)
        btn.translatesAutoresizingMaskIntoConstraints = false
        btn.setTitle("Select Image", for: .normal)
        btn.titleLabel?.font = UIFont.systemFont(ofSize: 16)
        return btn
    }()
    
    let confirmButton: UIButton = {
        let btn = UIButton(type: .system)
        btn.translatesAutoresizingMaskIntoConstraints = false
        btn.setTitle("Confirm", for: .normal)
        btn.titleLabel?.font = UIFont.boldSystemFont(ofSize: 16)
        return btn
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayout()
        setupActions()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayout()
        setupActions()
    }
    
    private func setupLayout() {
        backgroundColor = .white
        layer.cornerRadius = 12
        clipsToBounds = true
        
        addSubview(titleTextField)
        addSubview(imagePreviewView)
        addSubview(selectImageButton)
        addSubview(confirmButton)
        
        NSLayoutConstraint.activate([
            titleTextField.topAnchor.constraint(equalTo: topAnchor, constant: 20),
            titleTextField.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
            titleTextField.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
            
            imagePreviewView.topAnchor.constraint(equalTo: titleTextField.bottomAnchor, constant: 20),
            imagePreviewView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
            imagePreviewView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
            imagePreviewView.heightAnchor.constraint(equalToConstant: 150),
            
            selectImageButton.topAnchor.constraint(equalTo: imagePreviewView.bottomAnchor, constant: 15),
            selectImageButton.centerXAnchor.constraint(equalTo: centerXAnchor),
            
            confirmButton.topAnchor.constraint(equalTo: selectImageButton.bottomAnchor, constant: 20),
            confirmButton.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
            confirmButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
            confirmButton.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -20),
            confirmButton.heightAnchor.constraint(equalToConstant: 44)
        ])
    }
    
    private func setupActions() {
        selectImageButton.addTarget(self, action: #selector(selectImageTapped), for: .touchUpInside)
        confirmButton.addTarget(self, action: #selector(confirmTapped), for: .touchUpInside)
        
        // Allow tapping the image preview to select an image
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(selectImageTapped))
        imagePreviewView.addGestureRecognizer(tapGesture)
    }
    
    @objc private func selectImageTapped() {
        onSelectImage?()
    }
    
    @objc private func confirmTapped() {
        let title = titleTextField.text ?? ""
        onConfirm?(title, imagePreviewView.image)
    }
    
    // Update the preview image when user selects one
    func updatePreviewImage(_ image: UIImage?) {
        imagePreviewView.image = image
    }
}

3. Handle Popup Presentation & Image Selection in Your View Controller #

First, conform your view controller to UIImagePickerControllerDelegate and UINavigationControllerDelegate:

class YourViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    // ... your existing code (collection view, add button, etc.)
    private var currentPopupView: AddCellPopupView?

Add the Popup Trigger Logic #

Link your "addCell" button to this action:

@IBAction func addCellButtonTapped(_ sender: UIButton) {
    showAddCellPopup()
}

private func showAddCellPopup() {
    // Create popup with fixed size (adjust height as needed)
    let popupWidth = view.frame.width - 40
    let popupHeight: CGFloat = 400
    let popupView = AddCellPopupView(frame: CGRect(x: 0, y: 0, width: popupWidth, height: popupHeight))
    popupView.center = view.center
    
    // Add dimmable background
    let backgroundView = UIView(frame: view.bounds)
    backgroundView.backgroundColor = UIColor.black.withAlphaComponent(0.5)
    backgroundView.addSubview(popupView)
    view.addSubview(backgroundView)
    
    // Allow tapping background to dismiss popup
    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(dismissPopup(_:)))
    backgroundView.addGestureRecognizer(tapGesture)
    tapGesture.cancelsTouchesInView = false // Keep popup interactions active
    
    // Set up popup callbacks
    popupView.onSelectImage = { [weak self] in
        self?.presentImagePicker()
    }
    
    popupView.onConfirm = { [weak self] title, image in
        guard let self = self else { return }
        // Add new data to our source array
        self.cellDataArray.append(CellData(title: title, image: image))
        // Insert new cell into collection view
        let newIndexPath = IndexPath(item: self.cellDataArray.count - 1, section: 0)
        self.collectionView.insertItems(at: [newIndexPath])
        // Clean up popup
        backgroundView.removeFromSuperview()
        self.currentPopupView = nil
    }
    
    currentPopupView = popupView
}

@objc private func dismissPopup(_ sender: UITapGestureRecognizer) {
    let tapLocation = sender.location(in: view)
    if let popup = currentPopupView, !popup.frame.contains(tapLocation) {
        sender.view?.removeFromSuperview()
        currentPopupView = nil
    }
}

Implement Image Selection #

Add code to present the photo library and handle the selected image:

private func presentImagePicker() {
    let imagePicker = UIImagePickerController()
    imagePicker.delegate = self
    imagePicker.sourceType = .photoLibrary // Use .camera if you want to take a photo
    present(imagePicker, animated: true)
}

// MARK: - Image Picker Delegate
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    picker.dismiss(animated: true)
    if let selectedImage = info[.originalImage] as? UIImage {
        currentPopupView?.updatePreviewImage(selectedImage)
    }
}

func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
    picker.dismiss(animated: true)
}

4. Update Collection View Data Source Methods #

Make sure your collection view uses the cellDataArray to populate cells:

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return cellDataArray.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ContentCell", for: indexPath) as! ContentCell
    let cellData = cellDataArray[indexPath.item]
    
    // Set title (use default if empty)
    cell.testLabel.text = cellData.title.isEmpty ? "Untitled" : cellData.title
    // Set image (or leave default cyan background if no image)
    if let image = cellData.image {
        cell.testImage.image = image
        cell.testImage.backgroundColor = .clear
    } else {
        cell.testImage.image = nil
        cell.testImage.backgroundColor = .cyan
    }
    
    return cell
}

Don't forget to register your ContentCell in viewDidLoad:

override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.register(ContentCell.self, forCellWithReuseIdentifier: "ContentCell")
    // ... other setup code
}

That's it! Now when users tap "addCell", they'll get a popup to enter a title and select an image, and the new cell will appear in your collection view immediately.

内容的提问来源于stack exchange，提问作者Chris