yego.me
💡 Stop wasting time. Read Youtube instead of watch. Download Chrome Extension

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


5m read
·Nov 3, 2024

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!

More Articles

View All
How to Make the Maximum Amount of Money Possible
So if you want to make the maximum amount of money possible, like, if you just, if you just want to get rich over your life, and you want to do it in a deterministic, predictable way, what you would do is you would basically stay on the bleeding edge of t…
Bill Gates Wasn't Worried About Burnout In 1984 – Here's Why
You see yourself working for somebody else? I never have. Can you see it? I’m used to having a company where the ideas that I have or something that I can easily pursue. So I think it’d be a tough transition. If you had stayed at Harvard a few more years…
How To Unmask The Narcissist's Double Life | STOICISM
Have you ever felt like someone could see right through you, tapping into your deepest fears and desires, and manipulating them to their own advantage? Imagine living in a world where your very emotions are the plaything of a master illusionist, someone w…
Behind the Scenes: Documenting the Elusive Florida Panther | National Geographic
Foreign and that’s how you test. I don’t think I had any idea what I was getting into at the beginning of this project. I’ve only seen a Florida panther twice with my own eyes. The animals that we’re trying to film and photograph are super elusive. There’…
If We Colonize the Moon, This Company Wants to Ship Our Stuff | Short Film Showcase
[Music] All good ideas start as crazy ideas, and then at some point, they occur. Then they become, “Why haven’t we been doing that all along?” We are right now in that transition for changing the way people think about the Moon. The Apollo missions were l…
I'm going on live because I'm bored
Okay so now I should be able to go live though. Okay so now, okay you should be able to hear my voice. Okay, why is this thing happening? Okay, can you guys hear my voice? Okay, okay that’s awesome! So hi! Actually, there is no reason for me to do a YouTu…