Introduction to Xamarin Designer for iOS (IOS102)

It is challenging to create a UI that looks good and works well on multiple devices with different screen sizes and different pixel densities. IOS handles this using the concept of constraints. Instead of giving fixed sizes and positions, you specify relationships such as "align these two views vertically" or "stretch this view to fit all the available space". This course first shows you how to use constraints to layout the views on a single screen. It then broadens the discussion to show you how to use segues to link together multiple pages in your app.

Recommended prerequisite for this course

• Introduction to Xamarin.iOS (IOS101)

Upon completion you will be able to:

• Create a single screen application and add controls
• Utilize Auto Layout to create a responsive UI
• Interact with controls and views programmatically
• Navigate between view controllers programmatically
• Utilize segues to navigate between view controllers

Course exercise download

Exercise materials are available from GitHub. The code can be cloned through a desktop Git client or downloaded directly as a ZIP file.

If you are using Windows, try to select a location with a shorter path length to make sure you don't exceed the 260 character limit.

Lecture

Here are the lecture slides.

Exercises

1. Exercise 1: Create and lay out a single view application
   

   The primary goal of this lab is to teach you how to create a new iOS application and add a basic UI using the iOS Designer.

2. Exercise 2: Use Auto Layout in your application
   

   The primary goal of this exercise is to teach you how to update your Fireworks application to use constraints to size and position your views relative to the view controller. The finished UI will look something like this:

3. Exercise 3: Add behavior to the UI
   

   The primary goal of this lab is to add behavior to your views using the View Controller's code behind. The finished UI should look something like this:

4. Exercise 4: Add a second screen and navigation
   

   The primary goal of this lab will be to add a second View Controller to the storyboard design surface and display it programmatically.

5. Exercise 5: Add segues to define the navigation
   

   The primary goal of this lab is to teach you how to display a second View Controller using segues. The finished storyboard should look something like this:

Additional resources

Additional Resources

Check out some more information about the iOS Designer and designing for iOS applications.