- iOS Development with Xamarin Cookbook
- Dimitris Tavlikos
- 719字
- 2021-07-16 11:45:04
Creating the UI
In this recipe, we will learn how to add and manage controls in the user interface.
Getting ready
Let's add a few controls in an interface. Start by creating a new iPhone single view application project in Xamarin Studio. Name the project ButtonInput. When it opens, double-click on ButtonInputViewController.xib in the Solution pad to open it with Interface Builder.
How to do it...
Now that we have a new project, and Interface Builder has opened the ButtonInputViewController.xib file, we'll add some controls to it.
Perform the following steps:
- Go to the Library pane and select Objects from the drop-down list, if it is not already selected.
- Select the Label object. Drag-and-drop Label onto the gray space of the view in the designer, somewhere in the top half.
- Select and resize the Label object from both the left and right sides so that it snaps to the dashed line that will show up when you reach close to the edges of the view.
- Again, with the Label object selected, go to the Inspector pane, select the Attributes tab, and in the Layout section, click on the middle alignment button.
Congratulations, you have just added Label in your app's main view!
We will perform similar steps to add a button in our interface, using the following steps:
- Again, in the Library pane, in the Objects section, select the Button object. It is next to the Label object. Drag-and-drop it onto the bottom half of the view. Align its center with the center of Label we added earlier.
- A dashed line will show up, and the Button object will snap to it when the centers of the two controls are almost aligned.
- Resize the Button object to the same width as that of Label. Since Label has a transparent background, and you cannot see how wide it is exactly, you will know when the Button object is of the same width when three dashed lines show up while you are resizing it.
- Now, let's add some text to Button. Select it and go to Inspector pane.
- In the Attributes tab of the Title field, enter
Tap here please!. - After adding the button, save the document by navigating to File | Save in the menu bar. The main view should now look like the following screenshot:
How it works...
As you can see, although some concepts of Interface Builder seem difficult, it is quite easy to use. It also provides a lot of feedback. When we drag objects, guidelines that basically act as snap points for positioning the control properly, appear. Also, when we resize a control, we see its dimensions next to it.
You can also resize and position the controls by modifying the values in the Size tab of the Inspector pane. Another useful feature in the Size tab is Autosizing. Autosizing provides layout options for the controls, and it can be very useful when we want our app to support different device orientations. You can select a control you want, and then click on the lines that are outside or inside of the square on the left in the Autosizing section. The image next to it animates to give you an impression of how the control will behave when the layout changes.
There's more...
Now, let's try running the app on iOS Simulator. Back in Xamarin Studio, select the project configuration Debug if it is not already selected. Depending on the version of iOS SDK you have installed, the following screenshot shows the available options of debugging targets:
Select your preferred target and click on the Run button. When the compilation finishes, iOS Simulator will automatically start and run the app we just created. You can even tap on Button by clicking on it with the mouse, and see it responding. Of course, our app does not have any other functionality right now.
See also
- The Compiling an iOS project and Debugging our application recipes
- The Receiving user input with buttons recipe in Chapter 2, User Interface – Views