Objective-C iPhone Programming Lesson 19 - Custom Images on UIButton

Hey guys, this is Mac Hasz 101 with another iPhone programming tutorial. In this video, I'm going to be showing you how to use custom images on buttons.

So if we review what our app looks like right now, let's just have a look. You can see that there are three buttons—pretty plain old buttons—bouncing around with the title that says "Click Me." Um, so what we're going to do is be using this image that I have here on my desktop called ball.png. It's basically a circle, and we're going to be replacing the buttons with that image.

Now, we're still going to be using UIButton, but UIButton has a special way of displaying images, and we're going to be using that. The first thing I want to go over is what we're doing already. So already we're creating the button using their default rounded WCT type. That's not really what we want because rounded WCT is a white rounded button, and we just want to use our image ball.png.

All right, the next thing we're doing is we're setting the title. We don't want a title; we don't want text. And the next thing we're doing is setting the frame. Obviously, we have to do that. So what we really want is to create a button, set the image, and set the frame, and all of that stuff.

The first step to doing this, if we have our image—and we do—right here is to drag the image into the resources folder. That's because if your application is going to access this file, it needs to be in the app's resources. The app has to be able to have access to it. So we're going to do that and make sure "Copy items into desktop"—uh, into whatever—is checked and make sure your settings are the same as mine, and click "Add."

And there it shows up! You should be able to click on it, and the ball should appear in the resources. So that's how to add the image to the resources folder. Next, let's go to our implementation and let's get rid of—let's replace this line with this: we're going to say UIButton *clickMe = [UIButton alloc] initWithFrame: and we're going to give it the frame right here. So we're going to take this, cut it out, paste it here. Let's get rid of this. We're not going to need this, and we're not going to need this set title, and we're not going to need this rounded WCT because we're using our custom thing, so this creates the button and gives it the frame.

Now, if we run this right now, you're going to see that there's no image for the buttons because we didn't specify the image in the code. So when I just randomly click—uh, let me try to get lucky here—uh whoops, there are buttons bouncing around, but they're invisible because they have no style and they have no image. You can see my score's going up as I click; sometimes I'll get lucky and hit a button. So they're bouncing around in the same way; it's just that we can't really see them.

So in order to set the image of the button, we're going to say clickMe setBackgroundImage:[UIImage imageNamed:@"ball.png"] forState:UIControlStateNormal. Now let's go over what this does. clickMe is the button; setBackgroundImage forState is our method. The first argument is the image UIImage imageNamed, basically this just gives you a UIImage for this ball. A UIImage is their class, their object, and Objective-C for an image, so this just gives you that from the resource.

Then for State, we have UIControlStateNormal; that just means when the button is in its normal state—it's not highlighted or anything—this will be the image. So let's go ahead and run this, and you'll see here that our images are now in place. You can click on it, and when you tap down, it gets darker automatically. Apple's API does that for us, so that's very nice, very slick.

Now my challenge for you guys today is to make it so when you press down on the image, instead of getting darker, it actually switches to a different image. Uh, so let's see if you guys can do that.

In the next tutorial, I'm going to show you how to do that, and then in the next tutorial, I don't think I'm going to be working on this game anymore because people didn't seem to be liking this very much. So instead, I'm going to be showing you some other UI components that you might want to learn how to use, and eventually we're going to make some utility apps, stuff like that. Maybe we'll get back into games later on, but first you guys need to be more comfortable with the language, I think.

So, um, that's that. So thanks for watching Mac Hasz 101, subscribe, and goodbye!