So hold down “control” on your keyboard, click your UITextField on the left hand side and drag it over to the right hand side, and drop it on an empty line under the label property. The end result is that your ViewController.h will have this code: ViewController : (strong, nonatomic) IBOutlet UILabel you’re going to do this for the UITextField element. This will pop-up a little dialog asking you to name the property that it’s about to create for you. Once you have ViewController.xib on the left hand side and ViewController.h showing on the right hand side, all you have to do is hold down “control” on your keyboard, click your UILabel on the left hand side and drag it over to the right hand side, and drop it on an empty line under ViewController : UIViewController”.Īs you’re dragging, you should see a blue line follow your mouse like this screenshot: If you’re not, you can change it like in the screenshot below. On the right hand side, you should be looking at ViewController.h. On the left hand side, you’ll have the Interface Builder view of ViewController.xib. Check the screenshot below.Ĭlicking that screen will give you a split window view. Next, you need to click an icon called the “Assistant Editor” located in the upper right corner of XCode. This way, our ViewController will have references to these UIElements and it can do things with them!įirst, click the ViewController.xib file in your navigator so that you see the Interface Builder view. Interface Builder has an easy drag-and-drop way for us to create the properties in our ViewController and also assign the UIElements we create in Interface Builder to these properties of the ViewController. However, before we can do that, the ViewController needs to have references to the UILabel and the UIButton that we added to the view otherwise, how does it know about them?
#Storyboard quick 6 tutorial code#
ViewController is the class that manages the view so naturally, it’s going to be the place we add the code to handle the button click. You can also take this opportunity to widen your UIButton and UILabel elements a little bit by adjusting it in Interface Builder.Įxposing UIElements to the ViewController
Since we’re going to make the button change the text of the label, let’s add the text “Switch Text” to our button. Let’s put some text on this button through the property inspector on the right hand side.
You should end up with a view with a label, textfield and button. Next, repeat the same steps but this time, search for “UIButton” and drag and drop that element onto your view. Next, repeat the same steps but this time, search for “UITextField” and drag and drop that element onto your view. Search for “UILabel” in the Library pane in the lower right hand corner and drag the UILabel onto your view. We’re going to add a UILabel to the view just like in our Hello World demo. The editor area is going to change to Interface Builder. If you’re using XCode 4, your storyboard file may be named differently. Let’s start with adding a UILabel, UITextField and UIbutton to our view!įirst let’s go into Interface Builder to edit Main.storyboard.
#Storyboard quick 6 tutorial how to#
If you forgot how to do this, please refer to the tutorial on creating your first XCode project. We’re going to start a brand new single-view project. I highly recommend that you follow along on your own computer to get the most out of these lessons. In this tutorial, we’re going to explore some additional UIElements and how to handle user interaction! In order to benefit the most from these lessons, you should open XCode and try to follow along. This means lots of hands on work and practice! We’re taking a practical approach to learning iOS programming. Updated Oct 3 2013: This tutorial is compatible with XCode 5 AND XCode 4!
0 kommentar(er)
