Objective-C iPhone Programming Lesson 20 - Segmented Controls

Hey guys, this is Mac Heads 101, with our 20th iPhone programming tutorial. In this video, I'm going to show you how to use the segment control for some pretty basic stuff, and I'm also going to be finishing up our first game that I was working on in the previous tutorials.

So, what I promised you guys I'd show you how to do in this tutorial with the game is, I promised I'd show you how to make it so when they press on a ball, when they tap a ball, it actually gets lighter instead of darker. What I actually said was I'm gonna make it so it changes images, and that's really what we're going to be doing. So let's have a look.

We have the image that we were using for our ball. Right now, it's just ball.png—pretty bland. But when you tap on it, right now it just uses Apple's API to make it darker. So, I have another image called ballpress.png, which is slightly brighter, and it looks more pressed, I guess. So, this is the image we're going to be using when they press on the button.

So, the first thing you want to do when you want to use an image in your app is you need to drag the image over to the resources. So, I'll do that now. I'll check "copy items" and that has to be checked. And click "Add". So now that’s checked, we can go in and write our code.

In our "create new button" method, where the button gets created, we're going to copy this line of code that sets the background image and we're going to paste it under itself. Now you're probably wondering why I'm doing this, and you'll see in a second. First, we're going to change the name of the image to ball underscore press.

Right now, if we were to run it, it would just make the default, the regular image the pressed image, and it would just do the same thing when you press it. The way to make it so that this is the background image when it's pressed is to change the control state. So, we're going to change it from UIControlStateNormal to UIControlStateHighlighted.

Now, what highlighted normally means with text—maybe you have text highlighted; you have it selected—but in this case, highlighted really means that the user is tapping down on it. So, it should be lit up, and that’s exactly what we're doing: we're giving it our lit-up image.

Now, let me set this to run on the iPhone simulator. Let's go ahead and run it. Let's wait for the simulator to load. Here are buttons bouncing around, and when I tap it, it gets lighter. Not sure if you can really tell that from the quality of the video, but hopefully you can.

Okay, so that's all we're going to be doing with this for now. What I promised you guys in the last tutorial is that I'm going to show you how to use some basic UI components with the iPhone, such as the switch. I showed you guys how to use the table view, stuff like that. Today, I'm going to be showing you how to use the segmented control.

So, the way this will work is we're going to create a new Xcode project, first of all, and let's call it Segment Testing. This is the project we're going to be using to work with the segmented controls. So, let's go over to the resources, and we're going to be using Interface Builder for now. Let's open up TestViewController or SegmentTesting.view or ViewController.xib.

So, it comes up whenever we have our library. From our library, we're going to drag on a segmented control. I'll make it look like that, and then in our attributes, we'll add a segment for a second, and then I'll call this third. Okay, so we have three things. What we're also going to do is have a label—a label that tells us the current thing. So, "Current Segment: First." This will change whenever we change this.

If you look at this, there are a couple of things we're going to need. First of all, we're going to need something that runs whenever they change the value of this segment. That way, we can know for sure whenever they change the segment so that we can update this label. Another thing we're going to do is we're going to want an outlet for this label so that way we can change its text, and we're going to want an outlet for this segment so that way we can get its value, we can get which one of these is selected.

Now, if you're not really familiar with how segments work, they’re basically called segments. So, the first one’s title is "First", the second one’s title is "Second", the third one’s title is "Third", etc. Now these are numbered from starting at zero going from left to right. So, first is actually zero; second is one; and third is two in this case.

So, you don't really have to understand that just yet. We're going to set up a couple of outlets and actions for this in our code. So, we're going to have an IBOutlet for UISegmentedControl segment, and we're going to have an IBOutlet for a UILabel, and I'll call it label. We're going to have an IBAction for when they change the segment; I'll call it segmentChange.

I'll just copy over this action to our .m file and type in the implementation. Here’s the code; I'll just put a comment called "when segment changes." Now, it's not actually going to be called when segment changes unless we hook it up in Interface Builder. So, let's go back in here and hook up from files owner. We're going to hold control while clicking to the segment, and we're going to click on segment and then do the same thing—hold ctrl, then click and then drag to current segment.

We’re going to be label, and then from the segment, we're going to control-click to files owner and say segmentChange so that way it knows to call segmentChange. Now, you might notice that the segmented control actually behaves just like a button in that it sends an action out to anything that wants to know about it whenever someone changes the value. So, that's very nice. We'll automatically get this action whenever someone changes this value.

So, the first thing we're going to do is print out—we're going to use NSLog to print out the currently selected segment. Now, this will be zero if "First" is selected, one if "Second" is selected, two if "Third" is selected, etc. So, let's go ahead and add an NSLog. This is just for debugging. So, let's say NSLog and then we're going to say "Current Segment: %ld".

And then here’s how we actually get the segment: it's left bracket segment, space, selectedSegmentIndex, right bracket. This means the selected index basically, so if the first one is selected at zero, etc., etc., and then this just corresponds to this. So, let’s go ahead and run this in the iPhone simulator and let's check it out.

Here it is! So when we change it—let’s just throw up our console—you can also do that by pressing Shift + Command + R. So we change this and it changes the current segment. Let me just move this. It changes the current segment. So this is 0, 1, 2, just as I told you it was, so you should always believe me.

So now we're going to actually make this set the title of our label. The first thing we're going to want to do is—we have the index, and from this, we could do something like this: we could do if this is 0, we say label setText "Current Segment: First". We could do this for all of them, and we could go through all of these, you know, one, two, and three, but that would be awful. No one wants to do that; it's just a waste of time when there's a much easier way to do it.

So, we can say NSString *currentTitle equals segment titleForSegmentAtIndex: selectedSegmentIndex. If this kind of confuses you, what segment titleForSegmentAtIndex: is right here is just the segment index. So, we could give it zero, and it would always be "First". If we give it one, it would always be "Second" or whatever, you know, whatever we typed here—here and here.

So, in this case, we're giving it this segment’s selectedSegmentIndex; that way, we get the current title, basically the title that they have selected. Now, let's log this just real quick. Let's log currentTitle. Whoops! And let’s see what it comes out as—whoops, let’s open up our console.

So, "Second", "Third", "Second", "First", "Second", "Third"; you know, it's right! It's correct! So now, the final step is to actually set our labels. So, we're going to say label setText; and a string with format, and then here we're going to say "Current Segment: %@", currentTitle. What you really have to know about this is that this is the placeholder; this percent at sign is the placeholder for this.

Okay, so basically, we're just giving it a current title right there. This reads the title of the current segment, logs it, and then sets the text to the label. What will it set the text of the label to? It’ll set it to this value right here.

Now, if you already understand this, that’s good, but I'm just going to re-explain it. String with format—you give it a format string; a format string is a normal string, but whenever it sees a percent sign, it knows, “Oh, there's something magical,” when we give it an @ after the percent sign, as I did here.

So, this says percent @, it means, “Oh, there’s going to be a piece of text. It's going to be an NSString," which it is. So right here is my NSString that I give it after this comma, and so this is basically the placeholder for whatever is there.

Alright, so that should work. Let’s check it out! Let’s see if it works. And voila! It works fabulously! So, that is basic segmented controls.

Now, as I like to do at the end of every video, I give a challenge. So, my challenge for you guys today is try to make what we’ve made right here, except make it all with code. I want you to try to, like, look it up—maybe Google stuff. I'll have a link in the description for some documentation on how the segmented control works, but I want you guys to try to make the same exact thing that we made in this video without using Interface Builder.

So, it's quite a challenge. I'm not sure—I’ll definitely show you how to do it in the next video, so don’t struggle over it if you can't figure it out, but that's certainly a challenge.

So, thanks for watching Mac Heads 101. Subscribe and goodbye!