Monotouch – Multiple Image Picker

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:

  1.        How many images in a row should be displayed?
  2.       Prepare the photos from the asset library.

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

  1.        Images loaded from the photo library.
  2.       An overlay image (check image) that will be hidden/visible based on image selection.
  3.        Tap event for each image.
  4.       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:

Image

 

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

 

Image

 

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

Now lets get into technicality 😉

The button click Event:

Image

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:

Image

 

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

Image

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:

Image

 

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

Image

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:

Image

 

Image

 

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

Image

 

That will fill the scrollview, based on page position.

You can download the copy of the project from https://onedrive.live.com/redir?resid=697F540B0A2F1506%21107

Hope I could be helpful.

Happy Coding!

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s