Sometimes you need to create UI elements with code. This video shows how to do just that.
- Sometimes when you're developing an application it's necessary to create user interface elements using code. So let's take a look at how to create both a label, and a button with code. So first, a label. And we'll create that at the bottom of view did load. I'll define a label constant that's going to be of the type UI label. And I'll call it the UI label constructor. And the one that we want is the one that receives a frame. A frame has information in the data type of CGRect which contains the X and Y position and the width and the height.
So we'll run that constructor. And with CGRect highlighted I'll press Return on my keyboard and open up the parenthesis. Now here we have all of these different types of CGRects that we can create. And the main one's we're concerned with are the ones with origin and these X and Y coordinates. Now, origin and size give you two parameters. A CG point having an X and Y coordinate. And a CG size having a width and a height. So you can define those other objects in there.
Or, you can provide the X and Y and width and height values just as numbers. And that's what I'm going to do right here. So I'm going to select the one that receives integers. And press Return on my keyboard. Let's do X 20. Y 40. Width, I'm going to put 300. And height, let's do 20. Now we'll put some text in the label just like we would with any other label. So label dot text. We'll set that equal to code label.
Go to the next line. And the last thing we need to do after we create a user interface object is add it as a sub-view to another view. Remember, when we create user interfaces in storyboards, we drag a label or whatever user interface element onto our view. And it gets added as a sub-view of that view. And the main view inside of your storyboard is called view. It's inside of your view controller. So, we already have that view property.
So, view dot add sub-view. Then we pass in the sub-view which in this case, is going to be label. And that's what actually puts the label on the screen. So we've created a label of a certain size and position. We've given it text. And we put it on the screen. So let's run the app. And there's our code label. Stop the app, and return to Xcode. So label is actually pretty straightforward. But what if you want to do something a little bit more complex like a button.
Let's do that. Let button. And this is going to be a UI button. And I'll set it equal to the constructor for UI button. And the one that we want again, is going to be the one that receives a frame. So, we actually already created a CGRect for our labels. So I'm just going to copy and paste that for the button. So I'll select it right there. Command C to copy. Select CGRect. Command V to paste. So X 20 is good.
Y 40 is not good. Let's do Y 100. And remember, that these X and Y coordinates are from the top left. So 20 points to the right from the top left corner. And then 100 points down from the top left. Width 300. Height, let's put it at 40. And now let's give the button a title so go to the next line it's called button dot set title to add a title for the button. This is going to be the text that appears on the button. You'll notice that it also receives a UI control state.
So, when you're developing a button inside of your storyboard using the attributes inspector you can say what the button looks like for each particular state. So when the button is normal or just sitting there not being tapped, it has a certain appearance. But then you can say, what the button looks like when it's selected. And that's what UI control state is. So, in our code, we can say that it has a different title for various control states. So I'm going to set the title right in here.
As code button. Tab over to UI control state. And then type dot and then select normal. So this is the default state of the button. Let's go to the next line. And then we want to add it as a sub-view. So, view dot add sub-view. And we pass in the button. Now it's going to put the button on the screen. Now when we run the application it may be a little bit confusing because when we look at it we see only the label and no button.
The reason why we don't see the button is because the button has a default title color of white. And a default background color of white, as well. So we need to give either the title or the background a color in order to see the button. Stop and return to Xcode. And I'm going to do this above where we call call view at sub-view. But you can do it below, it doesn't make a difference. So button and then type background color and that's going to be a UI color.
And I'll set that equal to UI color dot let's do light gray. So with that set, let's run the application and see if we can now see the button. And there we go, there's our code button. The last thing we want to do is respond to a button Press. And we can do that by creating a method that handles the press. So I'll create a method below view did load. And I'll call this button press just like that.
It's very bare bones. And then I'm just going to print button press. Now, we need to connect our button to this button press method. Now, we can do that by adding an action. So, back inside view did load, I can call button dot add target. And that's what we want here. Now, if we select that it says associate the target object and action method, with the control.
So we have a target object that's the object that has the method that you want to run. The action is the method that you want to execute on the target object. And for contains the UI control events that are going to trigger the action. So the target is going to be self because that's the object that has the button press method which is the method we want to handle. The action is going to be the button press method. The data type for this is selector. Now to provide a selector we type hash selector.
And then in parentheses we pass in the method name. So I'll press Return. And it's asking for an objective C method so I'll type in button press. Press Return. And there we go. Tab over to for UI control events. Press a dot. And what we usually do a for a button is touch up in size. Type touch. And find touch up in size. Hit Return. And that's all we do. Now we get associated our method, which is the button press method, with our button.
We're receiving this warning so if we click on this right here, this says, the argument of selector refers to instance method button press that is not exposed to objective C. So in order to have a selector connected to a button we need to expose that method to objective C. Which really is a simple process you can simply click Fix and watch what happens to our button press method. We click Fix. And then we get this at objective C call out and then we can pass it in as a parameter inside of our add target method.
At this point, we should be able to click on the button and you see that button press message in the debug window. Click on the button and there's the message. I'll stop the app and return to Xcode. So, if you ever need to create objects in code the process is pretty simple. You create it, you need to give it a frame. Make any adjustments you want to give. And then you add it as a sub-view. You can handle methods by calling the add target method and giving it an event that you want to handle.
For more information I would suggest going to the documentation for UI button, UI label or any other user interface object you want to create with code.
Instructor Todd Perkins shows how to use pickers, pop-up messages, sliders, switches, and indicators to build a sophisticated app interface, and display HTML content, files, and data with web views. Plus, learn how to dynamically update your layouts using size classes, and get a brief overview of the Apple Human Interface Guidelines.
- Picker views, controllers, sliders, and indicators
- Creating UI elements with code
- Displaying images with image views
- Creating web views to display web content
- Changing fonts, pins, and views with size classes