Objective-C iPhone Programming Lesson 13 - A Grid of Images

Hey guys, this Mac has gone on with our 13th iPhone programming tutorial. In this video, I'm going to be showing you how to make an app that has a grid of images. When you click an image, it'll get big, and when you click it again, it will go back to normal size.

So, let's open Xcode, create a new project, and I'll call it Image Grid. Under Classes, we're going to create a new file, and we're going to call this file. We're going to make it a subclass of UIView and call it Touch. To make this view, it's not going to be the same as we've been doing with our Core Graphics because we're going to have multiple versions of this view, and each one of these views or instances will have an indicator.

So, we're going to have a UIImageView internal and I'm going to have a method internal which will return the internal view. Alright, so we're going to go here and I say return internal and then define it with frame. We're going to say internal equals UIImageView alloc initWithFrame. We're going to set the background color to black color and the content mode to scaleAspectFill.

Now, we’re going to add internal as a subview. Auto release means that after we added it as a subview, it will release automatically. This way, we don't have to worry about memory leaks.

Alright, now up here in our viewDidLoad of our main view controller, we're going to use something called a loop to basically lay out a bunch of views. So, I'm going to have two variables and I have to define rows and columns. Now if you recall, rows are going to be the height when columns then meet away.

So, we'll set it for int y equals 0, y less than rows, y plus plus; and for x equals 0, x less than columns, x plus plus. Now right now x and y don't represent coordinates. They'll be a number 0, 1, or 2 because the max it can be is this.

So first of all, we're going to get the size. We're going to declare a CGSize which will be the size of each column or each block.

Also, blockSize equals CGSizeMake(self.view.bounds.size.width / columns, self.view.bounds.size.height / rows). Alright, here we're going to declare our CGPoint blockOrigin equals CGPointMake(x * blockSize.width, y * blockSize.height).

Now we’re going to declare CGRect blockFrame. BlockFrame.size will equal blockSize and blockFrame.origin will equal blockOrigin. Alright, now we have to actually create and attach our image view.

So, we’re going to declare TouchImageView tiv = TouchImageView alloc initWithFrame:blockFrame. Now, we’re going to configure this. Normally, we'd set images here, but for now, I'm going to say self.view addSubview:tiv, and that's all we have to do.

Now, as you recall, we made the background color of TI be black and we're adding enough TIVs to fill the whole screen. So, when we run this, first of all, I have to import it. So, we have to import it in our header. But anyway, when we run this, I have a prediction that it will be a black screen, and I'm correct: it's a black screen.

So, I'm just going to set it so it runs on our iPhones. Next up, alright, so now let's take a look at setting some images. So I'm going to take a screenshot of some random part of my desktop and this is going to be the image that we show each image block.

So here, we're going to say UIImage *image equals [UIImage imageNamed:@"image.png"] and then say internal.image = image. Now, if you recall, internal is going to return our image view that fills up this block.

So, essentially, this will make every single block have the image we want. As you can see, it's a grid of these blocks. I'll run the iPhone simulator so you can get an idea to see that it's actually filling the full screen.

So, there you see it. Now, what we're going to do is make it so when you click on one of the blocks it makes it the full size of the screen. So, we're going to declare two methods in our class: makeFull and makeSmall, and we're going to have two more things here: we have a BOOL isLarge.

Alright, so let's go now here and let's implement makeSmall. I say UIView beginAnimations:nil context:nil because we're going to animate it. You want to set UIView setAnimationDuration and then set self.frame = original.

Now, we need to set original. We're going to copy this here along. So, superView.bounds will be the size of the original frame. And this is what will allow us to make it full or backing up the original frame.

When we make small, we restore the original frame. Now in order to call either of these methods, oh and another thing we're going to do is set that boolean: so isLarge. I guess here, and isLarge = NO here.

Now in order to call these, we have to have a method on touchesBegan. We're going to say if isLarge, then self makesSmall else self makesFull. And you'll notice that by default, isLarge will always be NO, so it will scale up when we click on it.

Now, let's try running this and we click it, and it moves there. That's because our image view isn't moving with it. So, we're setting the frame of the big view, but we have an internal image view that we're not resizing.

So, we're going to do here and make full. I say we're going to say internal setFrame and here we're going to once again say internal setImage. And we're going to do these actions in the animation block, definitely spectacular.

So, let's go ahead and run this one more time. It does resize up, but unfortunately once again it's being covered by the other views. So, the bottom one will obviously be on top of this one as you can see.

So, in order to make the view go to the top or make it full, we're going to set self.superview bringSubviewToFront:self. And that will make sure that we're on top. We need to be forward, so as you can see, if I tap anywhere it becomes full screen.

And if I have to fast, it looks awesome, but that's for another tutorial. Anyway, that is how to make a little grid app. In the next video, I'm going to be showing you how to do this with a bunch of different images so you can actually have a different one for each square.

So, thanks for watching! Be sure to subscribe and give a thumbs up!