Generate Grid of Images

[windmarble]

I am attempting to generate a grid of images. Each image is 50x50 and when the loop is done it should, "theoretically" have created a 250x250 grid of the 50x50 images. But I can't get the images to show up. Can anyone see what I am doing wrong? Any ideas?

Please be as harsh as you need to, I can handle it.


Here is the code.

In my .h

@interface MainView : UIView {
     UIImageView *imageGrid;	
}

@property (nonatomic, retain) UIImageView *imageGrid;

@end

In my .m

@synthesize imageGrid;

- (void)loadView {
	UIImage *aImage;
	int rowIndex,colIndex;
	for(rowIndex=0;rowIndex>5;rowIndex++){
		for(colIndex=0;colIndex>5;colIndex++){
			aImage = [[UIImage imageNamed:@"00.png"] retain];
			[imageGrid initWithImage:aImage];
		}
	}
}

[RickMaddy]

Originally Posted by windmarble

Please be as harsh as you need to, I can handle it.

OK. You're an idiot. You shouldn't even be doing this. Get a job mowing lawns.

Just kidding of course but you did ask for it

There are several issues with this code. You are using the same image for each cell so why create it over and over? Just create the image once and reuse it.

You don't actually create any UIImageView objects. And even if you were you're not making any attempt to position them within your grid.

And you have a memory leak with each image since you keep retaining but never releasing.

And last, you're not adding the image view to the view.

And remember that whitespace is your friend.

Try something like this:

- (void)loadView {
    UIImage *aImage = [UIImage imageNamed:@"00.png"];
    for(int rowIndex = 0; rowIndex > 5; rowIndex++) {
        for(int colIndex = 0; colIndex > 5; colIndex++) {
            UIImageView *iv = [[UIImageView alloc] initWithImage:aImage];
            CGRect frame = iv.frame;
            frame.origin.x = frame.size.width * colIndex;
            frame.origin.y = frame.size.height * rowIndex;
            iv.frame = frame;
            [self addSubview:iv];
            [iv release];
        }
    }
}

This code assume you want the same image in each spot in the grid. If not you need to change how the actual image is loaded.

And I just typed this in so no guarantee it's perfect.

[windmarble]

Thanks for the quick response! I unfortunately just gave up that job of mowing yards to being my life as a programmer!

But anyway, that's kinda where I was going with the code. I just can't get it to display in the main window. I even went into interface builder and tried creating an UIImageView and making sure it was all linked together. This isn't the first program I have created. So I know I have got to be missing something really simple and stupid that I am overlooking that I just didn't connect.

[fulvio]

Originally Posted by RickMaddy

OK. You're an idiot. You shouldn't even be doing this. Get a job mowing lawns.

Just kidding of course but you did ask for it

There are several issues with this code. You are using the same image for each cell so why create it over and over? Just create the image once and reuse it.

You don't actually create any UIImageView objects. And even if you were you're not making any attempt to position them within your grid.

And you have a memory leak with each image since you keep retaining but never releasing.

And last, you're not adding the image view to the view.

And remember that whitespace is your friend.

Try something like this:

- (void)loadView {
    UIImage *aImage = [UIImage imageNamed:@"00.png"];
    for(int rowIndex = 0; rowIndex > 5; rowIndex++) {
        for(int colIndex = 0; colIndex > 5; colIndex++) {
            UIImageView *iv = [[UIImageView alloc] initWithImage:aImage];
            CGRect frame = iv.frame;
            frame.origin.x = frame.size.width * colIndex;
            frame.origin.y = frame.size.height * rowIndex;
            iv.frame = frame;
            [self addSubview:iv];
            [iv release];
        }
    }
}

This code assume you want the same image in each spot in the grid. If not you need to change how the actual image is loaded.

And I just typed this in so no guarantee it's perfect.

Howdy, sorry to hijack this thread. But I wanted to do something similar to this.

I'm not actually sure how best to explain this. Basically I'm in the process of creating an Arkanoid clone type game where there are several bricks on the screen. A ball bounces around the screen bumping off walls and when it finally collides with the paddle (controlled by the user) it changes velocity and eventually hits one of the bricks that appears above. So far this portion of the game has been completed.

I have 9 different colored images/bricks named (yellow.png, red.png, blue.png, etc).

What I wanted to do for each level is change the position of the bricks depending on the following (as an example of one of the levels) might be the following:

brickArray *brickLevel1 = {
{0,0,0,0,0,0,0,0},
{1,1,0,0,0,0,1,1},
{1,0,1,0,0,1,0,1},
{1,0,2,0,0,2,0,1},
{1,0,2,0,0,2,0,1},
{1,0,1,0,0,1,0,1},
{1,1,0,0,0,0,1,1},
{1,1,3,1,1,3,1,1}
};

The following is a representation of an 8x8 grid of bricks.

The "x" will be replaced with a number (as seen above) and then the number will be associated with a unique colored brick. The numbers range from 1 - 9.

[x] [x] [x] [x] [x] [x] [x] [x]
[x] [x] [x] [x] [x] [x] [x] [x]
[x] [x] [x] [x] [x] [x] [x] [x]
[x] [x] [x] [x] [x] [x] [x] [x]
[x] [x] [x] [x] [x] [x] [x] [x]
[x] [x] [x] [x] [x] [x] [x] [x]
[x] [x] [x] [x] [x] [x] [x] [x]
[x] [x] [x] [x] [x] [x] [x] [x]

I am wanting to loop through this array and dynamically fill the correct image in its place depending on the brickLevel1 array?

The following is the current loop I'm using to display an 8x8 grid with just ONE color, because that's all I'm capable of doing at the moment. I wasn't sure how to implement my idea properly and loop through and render each image in its correct place.

	int x = 0, y = 0, brick_width = 39, brick_height = 23;
	for (int i=0; i < 64; i++)
	{
		x = (brick_width+1)*floor(i%8);
		y = (brick_height+1)*floor(i/8);

		brick = (UIImageView *)[brickArray objectAtIndex:i];
		brick = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@"yellow.png", i]]];
		brick.transform = CGAffineTransformMakeTranslation(x, y);
		
		if (CGRectIntersectsRect(ball.frame, brick.frame))
			ballVelocity.y = -ballVelocity.y;

		[self.view addSubview:brick];
	}

I hope some of what I'm trying to achieve makes sense. If anyone could lead me in the right direction that would be greatly appreciated.