Join Helen Miller for an in-depth discussion in this video Tour the Xamarin iOS Designer, part of Introduction to the Xamarin Designer for iOS.
- [Voiceover] In this video, we're going to quickly review the UIView base class and then take a look at the Xamarin.iOS Designer. The UIView is the base class for everything visual in iOS. Although it can be used directly in your UI, you're more likely to use the UIView derived classes that extend its functionality. Here we can see many of the provided iOS views you can use to build your UI. The UIView base class provides three basic services. First, it provides the visualization.
The area the view can join to is always defined by a rectangle. The rendering itself doesn't have to be a rectangular in shape, though. You can use transparent content to give the appearance of other shapes. Second, the UIView class can also host child views, and it provides the area for all the subviews it owns to render into. And last, it publishes events that your code can handle to provide interactivity logic and react to things like animations, touches, and gestures. Each screen in an iOS application is managed by a view controller.
The view controller derives from the UIView controller class or is a descendant of that class. Each view controller owns a route UIView which then hosts controls and subviews that render the UI. The route view is also used to notify the view controller about its life cycle state, when its loaded, active, or inactive. When we build our UI for an iOS application, we will organize our UI using parent-child relationships. We start with the route view, owned by the view controller. This is what manages the screen's display and it stretches over the whole screen area.
This route view is automatically added and is normally a base UIView element, but you can change that. This view is often used to set the background color. We then add child views to the route view to build out the UI. These can be UIView elements, but more commonly, they're specialized versions of UIView with specific behavior and visual appearance or what we commonly call controls. They're positioned relative to the top left corner of the route view. In iOS 101, we did everything by hand and in code.
In this class, we're going to use a designer that's included with both Visual Studio and Visual Studio for Mac. If you've ever used a GUI designer tool in the past, you should find this one to be very familiar. I'm going to switch over to Visual Studio and do a short demo to give you an overview of the designer and a few of the things you can do with it. Okay, so now I've switched over to Visual Studio and I'm looking at the main storyboard file which you can see here in the solution explorer.
And the first thing I'd like to show you is this large area on the screen here which is the design surface, and this is where you're going to do the layout for your app. And you can put multiple view controllers with different UIs for each screen on the surface. When you're ready to put controls onto your view controller you're going to use the toolbox. And the toolbox has all of the different controls and views that you can add to your screen. There's quite a few of them so if there's something you're looking for specifically, you can use the toolbox search function and search for something such as a button and here you see, first thing on the list, is a button control and I can just click, drag, and drop that button onto my view controller.
And with that button selected, I can change its properties in the properties panel here on the right. Depending on what you have selected, the options for properties will change. So these are the properties for the view controller and when I select button, these are the properties for the button and as you can see there's quite a few. So for instance, I can give the button name such as submit button and you always want that name to be meaningful and include the type of control it is.
So submit would imply that this button will do some sort of data submission and I can change the title of the button to say submit. And as you can see now the submit does not fit so I can just drag these handles to make my button a little longer and now we can see the entire word submit. There's several other options we can choose such as the text color and here we can see it's the standard blue but let's say I wanted mine to be purple.
I can give it a purple color and there I have a purple submit button. Now when you have a lot of controls on the screen, and you have multiple screens on the storyboard, it can sometimes be a little complex and difficult to find what you're looking for and that's where the document outline becomes handy. The document outline arranges views in a hierarchical order depending on the way you place them on the screen.
So here you can see we have our view controller and there's our button so if I had 50 controls on this screen I could just grab my submit button and it would automatically select that control for me on the screen so I wouldn't have to find it. The next thing I'd like to show you is the toolbar. And the toolbar is pretty cool. We can zoom in and out on the design surface.
We can add and remove constraints which we're going to get to in a little bit and we've got an option for what device we want. So here I have an iPhone 4S but I think I want to design an iPhone 6 screen. So I choose that one. And the last thing I'd like to show you is the info.plist. If you are going to design an app that has multiple storyboards, you're going to want to decide which one is the storyboard that the app should start with.
And we do that in the info.plist. So I select this file, open it up, and I go to the main interface and here you can see I have two options: the launch screen zip and the main, which is the main storyboard here in the solution explorer. And I think for this app I want main to be the main storyboard so I'll select that one, I'll close that, and there you have it. That's the iOS Designer.
This course was created by Xamarin University. We are honored to host this training in our library.