Question: create a grid of items

[oferRounds]

@jhurray, thanks first of all for creating this library!
I'm now making my first steps with it, and trying to understand if my following task is possible.

So, I'm trying to create my custom UITableViewCell, which gets an array of items, and then, accroding to size of the array, lays out a grid of items (UIImageViews), with (up to) 4 items in a row, while taking into account the width of the current device.
I.e., calculting in real time, the padding, size of items and spaces.

How would you do it with your library?
I'd be very happy for your help!

[jhurray]

The best way to to do this is to have the follow   :

EZLayoutContainerView *base = [EZLayoutContainerView containerWithTableViewCell:self];

// get imageViews

NSArray *imageViews = [UIImageView ezMakeViews:4 make:^(UIView *make, NSInteger index) {

      // do any setup here

}];

[base horizontallyLayoutViews:imageViews withPercentages:@[@0.25, @0.25, @0.25, @0.25]];

In the tableViewCell’s init function.

If you want to make the images dynamic (use 2 images for example ) add:

[base horizontallyLayoutViews:@[imageViews[0], imageViews[2]] withPercentages:@[@0.5, @0.5]];

[base ezLayoutSubviews];

Whenever the number of images gets updated.

[oferRounds]

Thanks a lot!
I'll try it :)

[oferRounds]

@jhurray - that works well!

My only issue I left with is how layout the inner images in respect to cell's insets.
I tried to add this:
base.ezAlignment.leftMarginFixed = 8.0;
base.ezAlignment.rightMarginFixed = 8.0;

But this doesn't work...
How would one add this into accout?

[jhurray]

so a container view lays out the image views in a grid. Each image view inhabits a space in the grid

The ezSize give the image view a size relative to its space in the grid [EZSize heightPercentage:0.5 widthPercentage:0.8] would mean its half the height and 80% of the width of its space. The alignment says how far away from the edge of its space the view will be. In general, you should say imageViews[i].ezAlignment = [EZAlignment ....]

[oferRounds]

Thanks, that worked out!

Now I left with the following problem, which might be a bit more challenging:
So for each image item, I would like to "attach" another small image - let's say, similar to a badge size - to appear in the bottom-right corner of the main-image, showed a bit out in relate to the bounds of the main-image.

My original thought was to add each small-image item as a subview of its main-image item, but this doesn't seem to work well.
How would you do it?

[jhurray]

You can either use relative frame layout or have a container view that has your image view and the badge view. Call attachtoxontainerview: for both views and give the badge view a fixed size and a bottom right allignment 

—
Sent from Mailbox

On Sat, Aug 22, 2015 at 1:14 AM, ofer notifications@github.com wrote:

Thanks, that worked out!
Now I left with the following problem, which might be a bit more challenging:
So for each image item, I would like to another small image - let's say, similar to a badge size - to appear in bottom-right corner, showed a bit out for the bounds of the main-image.
My original thought was to add each small-image item as a subview of the main-image item, but this doesn't seem to work well.

How would you do it?

Reply to this email directly or view it on GitHub:
#1 (comment)