关于从相册、相机选图并在TableView自定义Cell的ImageView展示的技术问询

Hey there! Let’s walk through how to implement image selection from your camera/photo library and display those images in a custom TableView cell, plus answer your question about handling multiple specific image slots.

1.1 Set Up Required Permissions #

First, you need to request access to the camera and photo library. Add these entries to your Info.plist file (iOS requires explicit permission descriptions):

<key>NSCameraUsageDescription</key>
<string>We need access to your camera to take photos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to your photo library to select images</string>

1.2 Create a Custom TableView Cell #

Make a custom cell with an ImageView to display selected images. Here’s a Swift example for a cell created via XIB/storyboard:

import UIKit

class ImageDisplayCell: UITableViewCell {
    // Connect this IBOutlet to your cell's ImageView in Interface Builder
    @IBOutlet weak var selectedImageView: UIImageView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Optional: Style the ImageView (add rounded corners, border, etc.)
        selectedImageView.layer.cornerRadius = 8
        selectedImageView.clipsToBounds = true
        selectedImageView.contentMode = .scaleAspectFill
    }
}

1.3 Implement Image Selection & TableView Logic #

In your view controller, use UIImagePickerController to handle camera/album selection, then update the TableView with selected images:

import UIKit

class ImageSelectionVC: UIViewController, UITableViewDataSource, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    
    @IBOutlet weak var tableView: UITableView!
    private var selectedImages: [UIImage] = [] // Stores all selected images
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        // Register your custom cell
        tableView.register(UINib(nibName: "ImageDisplayCell", bundle: nil), forCellReuseIdentifier: "ImageDisplayCell")
    }
    
    // MARK: - Image Selection Helpers
    private func showImagePicker(sourceType: UIImagePickerController.SourceType) {
        guard UIImagePickerController.isSourceTypeAvailable(sourceType) else {
            let alert = UIAlertController(title: "Oops!", message: "This source isn't available right now.", preferredStyle: .alert)
            alert.addAction(UIAlertAction(title: "OK", style: .default))
            present(alert, animated: true)
            return
        }
        
        let picker = UIImagePickerController()
        picker.delegate = self
        picker.sourceType = sourceType
        present(picker, animated: true)
    }
    
    // Trigger camera selection (connect to a button tap)
    @IBAction func takePhotoTapped(_ sender: UIButton) {
        showImagePicker(sourceType: .camera)
    }
    
    // Trigger album selection (connect to a button tap)
    @IBAction func selectFromAlbumTapped(_ sender: UIButton) {
        showImagePicker(sourceType: .photoLibrary)
    }
    
    // MARK: - UIImagePickerController Delegate
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        picker.dismiss(animated: true)
        
        guard let selectedImage = info[.originalImage] as? UIImage else {
            print("Failed to retrieve selected image")
            return
        }
        
        // Add image to array and reload TableView
        selectedImages.append(selectedImage)
        tableView.reloadData()
    }
    
    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        picker.dismiss(animated: true)
    }
    
    // MARK: - TableView DataSource
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return selectedImages.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "ImageDisplayCell", for: indexPath) as? ImageDisplayCell else {
            return UITableViewCell()
        }
        cell.selectedImageView.image = selectedImages[indexPath.row]
        return cell
    }
}

Absolutely! You just need to track specific image slots instead of a dynamic array. Here’s how to adjust your implementation:

2.1 Update the Custom Cell (Add Multiple ImageViews) #

Modify your custom cell to include 4 distinct ImageViews (3 for album images, 1 for camera):

class MultiImageCell: UITableViewCell {
    @IBOutlet weak var albumImage1: UIImageView!
    @IBOutlet weak var albumImage2: UIImageView!
    @IBOutlet weak var albumImage3: UIImageView!
    @IBOutlet weak var cameraImage: UIImageView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Style all ImageViews consistently
        [albumImage1, albumImage2, albumImage3, cameraImage].forEach {
            $0?.layer.cornerRadius = 8
            $0?.clipsToBounds = true
            $0?.contentMode = .scaleAspectFill
        }
    }
}

2.2 Track Specific Image Slots in Your View Controller #

Replace the dynamic array with variables for each slot:

private var albumImages: [UIImage?] = [nil, nil, nil] // 3 slots for album images
private var cameraImage: UIImage? // Slot for camera photo

2.3 Adjust Selection Logic for Specific Slots #

Update your image picker methods to target specific slots, and handle camera selection separately:

// Select image for a specific album slot (connect to 3 separate buttons)
@IBAction func selectAlbumImage1(_ sender: UIButton) { selectAlbumImage(forSlot: 0) }
@IBAction func selectAlbumImage2(_ sender: UIButton) { selectAlbumImage(forSlot: 1) }
@IBAction func selectAlbumImage3(_ sender: UIButton) { selectAlbumImage(forSlot: 2) }

private func selectAlbumImage(forSlot slot: Int) {
    guard slot >= 0 && slot < albumImages.count else { return }
    showImagePicker(sourceType: .photoLibrary, targetAlbumSlot: slot)
}

// Modified picker method to track target slot
private func showImagePicker(sourceType: UIImagePickerController.SourceType, targetAlbumSlot: Int? = nil) {
    guard UIImagePickerController.isSourceTypeAvailable(sourceType) else {
        let alert = UIAlertController(title: "Oops!", message: "This source isn't available right now.", preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "OK", style: .default))
        present(alert, animated: true)
        return
    }
    
    let picker = UIImagePickerController()
    picker.delegate = self
    picker.sourceType = sourceType
    // Store the target slot in the picker's userInfo
    picker.userInfo = ["targetSlot": targetAlbumSlot]
    present(picker, animated: true)
}

2.4 Update Picker Delegate to Fill Slots #

Modify the delegate method to assign images to their respective slots:

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    picker.dismiss(animated: true)
    
    guard let selectedImage = info[.originalImage] as? UIImage else {
        print("Failed to retrieve selected image")
        return
    }
    
    if let targetSlot = picker.userInfo?["targetSlot"] as? Int {
        // Assign to the correct album slot
        albumImages[targetSlot] = selectedImage
    } else if picker.sourceType == .camera {
        // Assign to camera image slot
        cameraImage = selectedImage
    }
    
    // Reload TableView to update the cell
    tableView.reloadData()
}

2.5 Update TableView to Display All Slots #

Finally, populate the cell’s ImageViews with the slot-specific images:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tableView.dequeueReusableCell(withIdentifier: "MultiImageCell", for: indexPath) as? MultiImageCell else {
        return UITableViewCell()
    }
    
    cell.albumImage1.image = albumImages[0]
    cell.albumImage2.image = albumImages[1]
    cell.albumImage3.image = albumImages[2]
    cell.cameraImage.image = cameraImage
    
    return cell
}

Bonus: Select 3 Album Images At Once (iOS 14+)

If you want to pick all 3 album images in one go, use PHPickerViewController instead of UIImagePickerController:

import Photos

@IBAction func select3AlbumImagesAtOnce(_ sender: UIButton) {
    var config = PHPickerConfiguration(photoLibrary: PHPhotoLibrary.shared())
    config.selectionLimit = 3
    config.filter = .images
    
    let picker = PHPickerViewController(configuration: config)
    picker.delegate = self
    present(picker, animated: true)
}

// Implement PHPickerViewControllerDelegate
extension ImageSelectionVC: PHPickerViewControllerDelegate {
    func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
        picker.dismiss(animated: true)
        
        let imageManager = PHImageManager.default()
        let requestOptions = PHImageRequestOptions()
        requestOptions.isSynchronous = true
        
        for (index, result) in results.enumerated() {
            guard index < albumImages.count, 
                  let assetId = result.assetIdentifier, 
                  let asset = PHAsset.fetchAssets(withLocalIdentifiers: [assetId], options: nil).firstObject else { continue }
            
            imageManager.requestImage(for: asset, targetSize: CGSize(width: 300, height: 300), contentMode: .aspectFill, options: requestOptions) { image, _ in
                self.albumImages[index] = image
                DispatchQueue.main.async {
                    self.tableView.reloadData()
                }
            }
        }
    }
}

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