This tutorial uses the storyboard visual designer, document outline and toolbox to build a UI for the app. You’ll see how to change size and alignment of iOS controls, name controls and set properties for the controls.
- View Offline
- [Voiceover] Let's review the user interface that I'll build in this video. I took a screenshot of my wireframe and put it in this DemoCode folder. It's this PNG file that we're looking at on the screen. I've shown this wireframe before in the Android chapter. I've modified it somewhat for the iOS version. Some of the changes I made were to add this visual divider between the top and bottom of the screen. I also added this Calculate Tour Duration button to the bottom along with this text area where I'll output the duration value. Before I start creating the UI, here's a tip.
Remember that you have to have the connection open to the Mac computer in order to use the designer screen. You can verify that in the Tools menu. Verify that this is connected. There are two screens shown to the user in my app. The first is this launch screen defined here in this XIB file. The main screen for my app is defined in Main.storyboard. Let's look at the app configuration to see how the app knows which screens to show at launch. To do that, I'll open this Properties node and open this iOS Application section.
Here, you can see a section called Launch Storyboard, which lists my launch screen. It calls it storyboard. It's that XIB file I just showed you, and here's where I define the main interface. This drop-down lists all of the storyboard and XIB files in my app. Here, I choose the one that I designate as my main interface for the application. Now I'll open the Xamarin visual designer by double-clicking on Main.storyboard. My first order of business is to change this View As drop-down from Generic to a more specific phone.
I would like to see what my design looks like on an iPhone 5s. I'll also zoom out by clicking on this minus button and scroll up so I can see the entire designer surface. I'll also make sure that I can see my Document Outline window and my toolbox. If you don't see those windows docked to the side, then you can find them in the View menu. First order of business is to put some text at the top of my screen. To do that, I'll use the Label control. Labels represent read-only text. The user can't edit the text directly.
So I'll search my toolbox for Label. And then I'll drag this over to the top of the screen. First thing I'll do is change the text. There's a text property over here in the Properties window. I'll use our custom text. Next, I'll set the alignment of the text by clicking on this alignment button, the center align button, and I'll increase the font size to 24. The final step is to choose this Layout tab, and then use this Fill Parent option to stretch the control across the top of the screen.
For the next part of the UI, I'll need two labels and two buttons at the top. I'll put a label in the center of the screen and use that as the divider by removing the text and setting its background color, and then I'll need a button and a label across the bottom of the screen. So since I've already got the label selected, I'll drag the two labels here. The dividing label will go here, and the message label will go near the bottom of the screen. Now I need several buttons.
I've got my basic layout. Now I just need to go through and align all of my controls and give them names and change their properties. You want to give some of your controls names so that you can programmatically work with them. I'll name these buttons. Call this first one CallButton1. And the second button will be named CallButton2. This button will be named CalcButton.
And while I'm down here, I might as well name this label. I need to have a name for it so I can output the text into this label. I'll save my work before continuing. Up here, you probably know this, but you can drag around these items, and you get some blue marker lines that tell you where the margins will be. So I want this to align up to the left side of the screen, and I will choose an option in Layout to fill the parent.
Then once I've filled the parent, it's stretching all the way across. Then I'll grab the left edge and drag it over to the margin indicator. I'll do the same thing with this label. For this bottom label here, I'll stretch it across. I'll center align the text for this one. Now I need to go back to my Widget section. Center-align this text.
And then I'll replace the text with three dots. This label, I'll remove the text. Come down here and choose this section. The wrong section, I need to scroll a little bit further. I need the background section. I'll click on this Custom button, and I'll choose a custom background color. I'm gonna choose a light blue color. Go back to my Layout tab, fill the parent, and then I'll use the sizing handles to make this label about two pixels tall.
Now I also need to align this button. And while I'm here, I'll change the text. Go back to the widget screen. Here's one of the things about buttons. They don't have a text property, they have a title property, and depending on what state your button is, look at this drop-down here. Your button can be in different states. It can be in the default state, it can be highlighted, it can be selected, and it can be disabled, so you're allowed to pick four separate titles for each of these states, one for each state.
I'm only gonna set to default, but I just wanted you to see that there's multiple choices for the title option. I'll choose Default, and then here... Here's my text, Calculate Tour Duration. I need to add my custom text for these top two labels, and I also need to add the text for the buttons. I'll put the phone number on the button. One last change. These buttons, I'm going to do the same fill parent that I did. Remember what I did? I filled this label, and I dragged the left edge over so it's at the margin, and you can see how it goes all the way over to the right side of the screen.
Now, with this button, I'll do the same thing, only I'll do the margin on this side of the screen, on the right side. The text doesn't look correct now because it's centered, so I need to right-align the text. That's actually the content, so I'll click on this button here. That looks good, and by stretching this, I have an interesting thing that happens on my user interface is the button overlaps the label text.
That means when the user touches the screen, they can touch the screen here around the word art institute or anywhere along this line, and it will press the button. So they can click over here on the blue part, but they can also click anywhere else on this row. Do the same thing for this last button. Now the UI is finished. In the next video, I'll write the C# code for the call buttons and the Calculate Tour Duration button.
In this course, Walt Ritscher helps develop a sample app for each of the three platforms using Visual Studio and the IDEs in Xamarin (including Xamarin Studio). He touches on the processes that make Android, iOS, and Windows app development unique. Then he shows how to recreate the three apps as a single cross-platform app, and test and debug the app using Xamarin's powerful emulators. He also covers UI design with Xamarin Forms, the data binding engine that automatically syncs data between views and data sources, and pages, Xamarin's templates for content, navigation, tabbed, carousel, and master pages.
- What is Xamarin?
- Using Xamarin Forms and Xamarin Studio
- Setting up the development environment in Xamarin
- Touring the Xamarin IDEs
- Creating a new project in Visual Studio
- Creating the app UI
- Debugging the app on an emulator
- Creating a code library for the app
- Understanding the elements of a Xamarin cross-platform app
- Define UI with markup in Xamarin Forms
- Understanding data binding
- Exploring pages and the five page types