Yada Yada Yada

Follow me on Twitter

Monotouch – Multiple Image Picker

I have myself struggled a lot for this, and since I searched the internet for examples of multiple image picker in monotouch and got no examples, I decided to convert whatever Objective C examples I got, into Monotouch!

Yes, it took time, but it was worth it 🙂

Now let’s get a step by step brief idea of how this works!

What you need is > ALAssetLibrary that helps you read the images from the iOS Photo Library.

Step 1: Create a page that will contain a button that presents the picker.

Step 2: A class subclassed by UINavigationController class, that will hold the table picker (that has the images), and also contain the list of images that user has selected.

Step 3: A class subclassed by UITableViewController class, that will decide:

How many images in a row should be displayed?

Prepare the photos from the asset library.

Step 4: A class subclassed by UITableViewCell class, that will contain:

Images loaded from the photo library.

An overlay image (check image) that will be hidden/visible based on image selection.

Tap event for each image.

Maintaining the selected cell (if not maintained, the cell would be reused once the table is scrolled, and the selection would be gone.)

Step 5: Asset class that will have properties related to each image.

NOTE: Maintain the Dictionary of indexPath and cell instance, for reusing (checked) cell.

This is how the picker will look like:

Here I have a scrollview (with paging enabled), where we can view our selected images by scrolling left-right.

The selected images, will be displayed in scrollview, on Done button click.

Now lets get into technicality 😉

The button click Event:

This will enumerate through the Saved Images in Photo Library, and create a list, and also display the picker.

For this, we will prepare the photos to be displayed on the list:

After preparing the photos, we will fill each cell, with our customized cell (ELCAssetCell.cs)

Notice, that we are making use of old copy of cell, if index path appears in the dictionary that we maintain (for images that has already being selected), and set the old assets (i.e. out of 4 images in a row, one would be selected, so that state that was maintain, should be used).

Now for reused cells, that had no changes, we will set the assets:

Now the list would be displayed, lets handle the cell tap event:

Here, based on the position of tap, we set the overlay UIImageView as visible, to display a Tick image. Also we can track the asset as selected, by a boolean value in ELCAsset.cs

Once, this works as per the expectation, now lets handle the “DONE” bar button item:

Here we will get the selected images, then we will call the Main page’s Finish picking media event,