如何在Xamarin.Forms中实现多图片选择及裁剪功能？

Hey there! Let's break down how to build your desired feature—supporting multi-image selection (up to 8, with options to pick all at once, in groups of 2-3, or just one) plus per-image cropping, with a focus on iOS first, then Android.

Since you prioritized iOS, let's start here. We'll use Apple's modern PHPickerViewController (iOS 14+) for reliable multi-image selection, and either system editing or a popular third-party library for flexible cropping.

1. Permission Setup #

First, you need to request photo library access. Add these entries to your Info.plist:

<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to your photos to let you select and edit images</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>We need access to save your edited images</string>

2. Multi-Image Selection #

PHPickerViewController natively supports multi-selection with a limit, which fits your 8-image cap perfectly. Here's a quick implementation:

import PhotosUI

class ImagePickerViewController: UIViewController, PHPickerViewControllerDelegate {
    private let maxSelectionCount = 8
    
    func presentImagePicker() {
        var config = PHPickerConfiguration()
        config.selectionLimit = maxSelectionCount
        config.filter = .images // Only show images, exclude videos
        
        let picker = PHPickerViewController(configuration: config)
        picker.delegate = self
        present(picker, animated: true)
    }
    
    func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
        picker.dismiss(animated: true)
        
        // Collect selected image items
        let selectedItems = results.compactMap { $0.itemProvider }
        
        // Convert each item to UIImage and send to cropping flow
        for item in selectedItems {
            if item.canLoadObject(ofClass: UIImage.self) {
                item.loadObject(ofClass: UIImage.self) { [weak self] image, error in
                    guard let image = image as? UIImage else { return }
                    DispatchQueue.main.async {
                        self?.presentCropViewController(for: image)
                    }
                }
            }
        }
    }
}

This setup lets users select any number of images from 1 to 8, in any grouping they prefer—exactly what you need.

3. Per-Image Cropping #

The system's built-in editing works for basic needs, but for more control (like aspect ratio locks or custom sizes), we recommend the TOCropViewController library.

Option 1: System Native Cropping #

If you want to stick to Apple's native tools, use UIImagePickerController with editing enabled for each image:

func presentCropViewController(for image: UIImage) {
    // Note: For direct editing of the selected image, you might want to build a custom crop view
    // Alternatively, use this approach if you're re-selecting from the library for editing
    let picker = UIImagePickerController()
    picker.sourceType = .photoLibrary
    picker.allowsEditing = true
    present(picker, animated: true)
}

Option 2: Third-Party Cropping (Recommended) #

Add TOCropViewController via CocoaPods or Swift Package Manager, then implement:

import TOCropViewController

func presentCropViewController(for image: UIImage) {
    let cropVC = TOCropViewController(image: image)
    cropVC.delegate = self
    // Set preferred crop options
    cropVC.aspectRatioPresets = [.square, .ratio4x3, .ratio16x9]
    cropVC.aspectRatioLockEnabled = true
    present(cropVC, animated: true)
}

// Conform to TOCropViewControllerDelegate
extension ImagePickerViewController: TOCropViewControllerDelegate {
    func cropViewController(_ cropViewController: TOCropViewController, didCropTo image: UIImage, with cropRect: CGRect, angle: Int) {
        cropViewController.dismiss(animated: true)
        // Save or use the cropped image here
        print("Cropped image ready for use!")
    }
    
    func cropViewControllerDidCancel(_ cropViewController: TOCropViewController) {
        cropViewController.dismiss(animated: true)
    }
}

For Android, we'll use system intents for multi-image selection and the trusted uCrop library for consistent cropping across devices (native cropping varies widely by manufacturer).

1. Permission Handling #

First, request photo access. For Android 13+, use READ_MEDIA_IMAGES; for older versions, use READ_EXTERNAL_STORAGE. Add to your AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" android:minSdkVersion="33" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />

Then request these permissions dynamically in your activity/fragment.

2. Multi-Image Selection #

Use Intent.ACTION_GET_CONTENT with multi-selection enabled:

import android.content.Intent
import android.net.Uri
import androidx.appcompat.app.AppCompatActivity

class ImagePickerActivity : AppCompatActivity() {
    private val REQUEST_CODE_PICK_IMAGES = 100
    private val MAX_SELECTION_COUNT = 8
    
    fun openImagePicker() {
        val intent = Intent(Intent.ACTION_GET_CONTENT).apply {
            type = "image/*"
            putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true)
            putExtra(Intent.EXTRA_MAX_SELECTION, MAX_SELECTION_COUNT)
        }
        startActivityForResult(intent, REQUEST_CODE_PICK_IMAGES)
    }
    
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (requestCode == REQUEST_CODE_PICK_IMAGES && resultCode == RESULT_OK) {
            val selectedUris = mutableListOf<Uri>()
            // Handle single image selection
            data?.data?.let { selectedUris.add(it) }
            // Handle multiple image selection
            data?.clipData?.let { clipData ->
                for (i in 0 until clipData.itemCount) {
                    selectedUris.add(clipData.getItemAt(i).uri)
                }
            }
            // Send each selected image to cropping flow
            selectedUris.forEach { uri ->
                openCropActivity(uri)
            }
        }
    }
}

3. Per-Image Cropping #

Add the uCrop library to your build.gradle:

implementation 'com.yalantis:ucrop:2.2.8'

Then implement the cropping flow:

import com.yalantis.ucrop.UCrop

private val REQUEST_CODE_CROP_IMAGE = 200

fun openCropActivity(sourceUri: Uri) {
    val destinationUri = Uri.fromFile(cacheDir.resolve("cropped_image_${System.currentTimeMillis()}.jpg"))
    
    UCrop.of(sourceUri, destinationUri)
        .withAspectRatio(1f, 1f) // Square aspect ratio (adjust as needed)
        .withMaxResultSize(1080, 1080)
        .start(this, REQUEST_CODE_CROP_IMAGE)
}

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    if (requestCode == REQUEST_CODE_CROP_IMAGE && resultCode == RESULT_OK) {
        val croppedUri = UCrop.getOutput(data!!)
        // Use the cropped image URI here
        croppedUri?.let {
            print("Cropped image ready at: $it")
        }
    }
}

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