iOS макет изображений динамически

Question

Я пытаюсь найти рациональное решение для проблемы макета в iOS.

Мне нужно загрузить n изображений в виде с этим макетом:

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

Каждое изображение можетимеют разную ширину, но высота имеет максимум, и каждое изображение должно быть центрировано в его столбце.

Каков предлагаемый подход?

Я думаю о том, чтобы поместить представления с 50%ширину рядом и затем центрируйте изображения в них.

Спасибо!

Answer 1

Это должно помочь вам начать.Однако оно не учитывает соотношение изображений.

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];
};

Приведенное выше масштабирование предполагает, что высота расположения сетки всегда меньше ширины расположения сетки.

Answer 2

Если вы загрузите много изображений, это приведет к проблемам с производительностью.Лучший способ сделать это - использовать UITableView с пользовательскими ячейками .

Answer 3

Похоже, та же проблема, что и у текстового движка при рендеринге глифов. Что вы хотите сделать, это сначала вычислить ширину строки, прежде чем делать что-либо еще. Это делается путем цикла слева направо, добавляя размеры видов, пока вы не дойдете до края и не сможете добавить больше. Затем вы знаете ширину и максимальную высоту для этой строки и просто центрируете виды, добавляя смещение влево, равное краю, оставленному справа, деленному на два. А затем добавьте смещение к координате y на максимальную высоту для этой строки.

Тогда просто продолжайте делать это для всех видов, пока все они не займут позицию.