Collage of images with different shapes

Question

I am completely new into photo editing app development. How can i develop grid styles like this, so that i can add multiple images picked from cameraroll to create a collage? I went through below links, but not getting the way to achieve this. Any suggestion or links will be helpful.

LINK1 LINK2

Answer 1

You can make custom layout for this or tweak the Flow Layout of Collection View.Check out this code.It has the same functionality you want.

You can calculate the width and height of images and than tweak the them randomly so they can fit.With collection view you can easily achieve this functionality.Have a look at wwdc videos of collection view to get better understanding.

Answer 2

I do it using Photoshop scripts and PSD templates files.

Video of a template being populated http://www.mouseprints.net/old/dpr/Populate911_720p.mp4

The Four Rules: Creating PSD Templates

1 Size the photo collage templates for the print size you want - width, height and print DPI resolution.

2 Photo collage templates must have a Photoshop background layer. The contents of this layer can be anything.

3 Photo collage templates must have alpha channels named "Image 1", "Image 2", ... "Image n".

4 Photo collage templates layers above the background layers must provide transparent areas to let the images that will be placed below them show through.

Twelve Scripts

1 TestCollageTemplate.jsx - Used to test a Photo Collage Template while you are making it with Photoshop.

2 CollageTemplateBuilder.jsx - Can build Templates compatible with this toolkit's scripts.

3 LayerToAlphaChan.jsx - Used to convert a Prototype Image Layer stack into a template document.

4 InteractivePopulateCollage.jsx - Used to interactively populate Any Photo Collage template. Offers most user control inserting pictures and text.

5 ReplaceCollageImage.jsx - use to replace a populated collage image Smart Object layer with an other image correctly resized and positioned.

6 ChangeTextSize.jsx - This script can be used to change Image stamps text size when the size used by the populating did not work well.

7PopulateCollageTemplate.jsx - Used to Automatically populate a Photo Collage template and leave the populated copy open in Photoshop.

8 BatchOneImageCollage.jsx - Used to Automatically Batch Populate Collage templates that only have one image inserted. The Collage or Image may be stamped with text.

9 BatchMultiImageCollage.jsx - Used to Automatically Batch Populate Any Photo Collage template with images in a source image folder. Easier to use than the interactive script. Saved collages can be tweaked.

10 BatchPicturePackage.jsx - Used to Automatically Batch Populate Any Photo Collage template with an image in a source image folder.

11 PasteImageRoll.jsx - Paste Images into a document to be print on roll paper.

12 PCTpreferences.jsx - Preferences Use in several of the above scripts. Edit this file to change default settings and add layer styles.

Documentation and Examples http://www.mouseprints.net/old/dpr/PhotoCollageToolkit.html