replicating openPhotoGallery
Whats the best way to replicate the thumbnail preview of the openPhotoGallery.
I need a view containing square thumbnails that then changes the index of a scrollView.
My photos are of various heights and widths but I'm trying to get it to look exactly like the openPhotoGallery.
any help or pointers much appreciated.
3 Answers
-
use the mask property. Just make a image of for example 50x50 and place it over the imageviews. I dont know the exact code, but i saw some examples in the kitchensink.
-
I just found this and wanted to add some code for what we did.
I'm not going to attack your scrollview, but I will show you the crops:
We created a table view, and pass in an array that we loop through to create the rows. We do X rows of 4 images. This doesn't handle remainder issues (we're just banging out a rapid prototype right now), but it does create the table thats fairly trivial to get scrolling.
Here's the for loops
Basically, we do two for loops.
The outer loop creates a row for each group of 4 images.
The inner loop then adds a mask + an image (the image is never a square image, but the mask is).
The mask must be all black, cropped to whatever size and shape your looking for.
Sorry I can't spend a ton of time on this, otherwise I'd make a more simple example.
var tablePhotosData = []; for (i = 0; i < photosObject.length / 4; i++) { tablePhotosData[i] = Ti.UI.createTableViewRow({ selectionStyle: Ti.UI.iPhone.TableViewCellSelectionStyle.NONE }); for (j = 0; j < 4; j++) { tablePhotosData[i].add( Ti.UI.createMaskedImage({ image: 'test_data/images/mask.png', width: 75, height: 75, left: j*79+4, mode: Titanium.UI.BLEND_MODE_SOURCE_IN }) ); tablePhotosData[i].add( Ti.UI.createMaskedImage({ image: photosObject[4*i + j], width: 75, height: 75, left: j*79+4, mode: Titanium.UI.BLEND_MODE_SOURCE_IN }) ); } } var tablePhotos = Ti.UI.createTableView({ data: tablePhotosData, rowHeight: 79, editable: false, separatorStyle: Ti.UI.iPhone.TableViewSeparatorStyle.NONE, top: 2 }); window.add(tablePhotos);
-
Love the idea of using a masked image to crop. (Though I have written a modification of the SDK code to create a cropped image blob - given top/x, left/y, width & height values, if you need that. You could also use the 'imageAsThumbnail' function which makes square images of image blobs)
But regarding the positioning of the left values for the rows of images, it would be a lot easier to put add the thumbnails to a 'horizontal layout' scrollView with 'auto' contentHeight.
Using the horizontal layout, it then adds the image views to it and will 'wrap' the rows accordingly (depending on the image width/height of course).
Here's the imageAsCropped code - to be added to the TiBlob.m file in the iphone/classes folder of your sdk setup:
// Kosso imageAsCropped // added to TiBlob.m - (id)imageAsCropped:(id)args { [self ensureImageLoaded]; if (image!=nil) { ENSURE_ARG_COUNT(args,4); NSUInteger x = [TiUtils intValue:[args objectAtIndex:0]]; NSUInteger y = [TiUtils intValue:[args objectAtIndex:1]]; NSUInteger width = [TiUtils intValue:[args objectAtIndex:2]]; NSUInteger height = [TiUtils intValue:[args objectAtIndex:3]]; return [[[TiBlob alloc] initWithImage:[UIImageResize croppedImage:CGRectMake(x, y, width, height) image:image]] autorelease]; } return nil; } // end Kosso imageAsCropped