Question

I’m trying to find a rational solution for a layout problem in iOS.

I need to load n images in a view with this layout:

-----------
|  x   x  |
|  x   x  |
|  x   x  |
|  x   x  |
|  x   x  |
|  x   x  |
-----------

Each image may have a different width, but the height has a maximum and each image is to be centered in it’s column.

What is the suggested approach?

I’m thinking of putting views with 50% width side by side and then center the images in them.

Thanks!

Answer 1

This should get you started. It does not, however, take into consideration the ratio of the images.

CGRect  bounds = [[UIScreen mainScreen] bounds];
CGFloat maxCol = [imageViewArray count] + ([imageViewArray count] % 2);
CGFloat width  = (bounds.size.width/2) - 15;
CGFloat height = (bounds.size.height/maxCol) - 10; 

// loop through imageViews
for(pos = 0; pos < [imageViewArray count]; pos++)
{
   // calculate position within grid
   CGFloat row = (pos/2);
   CGFloat col = (pos%2);


   // retrieves UIImageView and UIImage
   imageView       = [imageViewArray objectAtIndex:pos];
   image           = imageView.image;

   // calculates image size
   CGFloat scaledWidth = (height * image.size.width) / image.size.height;

   // adjust size of image view
   imageView.frame = CGRectMake(0,            // temp value for x
                                0,            // temp value for y
                                height,       // width of image
                                scaledWidth); // height of image

   // adjust position of image view
   imageView.center = CGPointMake((bounds.size.width/3) + ((bounds.size.width/3) * col),
                                  ((height+10) * row) + (height+10)/2));

   // add image view to super view
   [rootView addSubView:imageView];
};

The above scaling assumes that the height of the grid location is always smaller than the width of the grid location.