Question

Hey guys, I’m getting a little trouble here. I have a view that makes a grid display. I mean, I have 9 items and sets to display 3 per line. Resulting in 3 lines. That’s OK. What I don’t understang, it’s why always I get a space between them. Sometimes it comes up and on the middle of the lines. The space is equal to one line height.

Check the code:

NSInteger quantidadeDeVideos = [self.videosURL count];
NSInteger contadorDeVideos = 0;

NSInteger idLinha = 0;
NSInteger linha = 1;
NSInteger itemq = 0;

while (contadorDeVideos < quantidadeDeVideos) {

    float f;
    float g;

    // Set the lines

    if (itemq < 3) {
        itemq++;
    }
    else {
        itemq = 1;
        linha++;
    }

    // This makes the second line multiplies for 150;
    if (linha > 1) {
        g = 150;
    }
    else {
        g = 0;
    }


    // Ignore this, this is foi make 1,2,3. Making space between the itens.

    if (idLinha > 2) {
        idLinha = 0;
    }


    NSLog(@"%i", foi);

    float e = idLinha*250+15;
    f = linha*g;

    UIImageView *thumbItem = [[UIImageView alloc] init];
    thumbItem.frame = CGRectMake(e, f, 231, 140);

    UIColor *bkgColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"VideosItemBackground.png"]];
    thumbItem.backgroundColor = bkgColor;
    thumbItem.opaque = NO;

    [self.videosScroll addSubview:thumbItem];

    contadorDeVideos++;
    idLinha++;

}

This is the result should be:

[][][]
[][][]
[][][]

And this is what I’m getting:

[][][]

[][][]
[][][]

Thanks for all!

Answer 1

When linha is 1, g is 0, making linha * g 0. For the subsequent lines, g is 150, making linha * g == 300 for the second iteration (a jump of 300 over the first), after which it increases by 150 each time. Instead of conditionally setting g each time through, you should just make it a constant 150 and then either use (linha - 1) * g for the value of f or just start linha at 0.

If you want to see how to spot the problem yourself:

1. Ask yourself, what is going wrong here?

   • The rectangles are being drawn one row too low
   • It only happens after the first row

2. So we look at the line that’s responsible for where the rectangles are drawn:

   thumbItem.frame = CGRectMake(e, f, 231, 140)
   

3. The variable f is the y-coordinate. This has to be what’s messed up. Let’s see how f is defined:

   f = linha*g;
   

4. OK, linha is the line number and it’s only changed once in the loop without any conditional logic. So the problem is probably g. Let’s see how that one is defined:

   if (linha > 1) {
       g = 150;
   }
   else {
       g = 0;
   }
   

5. Hey, g changes after the first iteration — precisely when our problem crops up. Let’s see what the values of linha*g are:

   1 * 0 = 0
   2 * 150 = 300 (+300)
   3 * 150 = 450 (+150)
   4 * 150 = 600 (+150)
   

Ah-ha — the problem is that setting g to 0 on the first iteration breaks the pattern.