This course will be retired on July 14, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to Xamarin!
You have completed Introduction to Xamarin!
Preview
We'll use the iOS designer in Visual Studio to customize our app in the iOS project. Using the iOS designer we'll provide outlet for presentation elements that we can later use in the code behind. We'll also use the outlet we created in the designer and hook them to our pizza service to handle the calculations and return results.
New Terms:
- MVC: Model View Controller pattern
Additional Learning
To learn more about iOS development, check out the courses and workshops available on Treehouse.
Further Reading:
MVC pattern by Apple
Apple Developer Documentation - Model-View-Controller
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
When implementing iOS, there are a number
of differences from Android.
0:00
First, layout is done in a designer only,
instead of an editable XML file.
0:05
Also, instead of an activity,
iOS uses a model view controller pattern,
0:11
or MVC, to render its interfaces.
0:16
We should not do any code here,
0:20
since the app environment is
not completely initialized.
0:21
The one thing this does is
identify the app delegate.
0:25
So when our app launches, the AppDelegate
will handle the delegate events.
0:29
Open AppDelegate.
0:36
This class must be registered
as the AppDelegate,
0:38
using the attribute, which must be
what we named it in the main CS.
0:41
With the AppDelegate registered,
we override the finish launching, which is
0:45
the first point where we know the app is
completely initialized and ready to run.
0:50
There's nothing to do in our app since
we're using a storyboard for this UI.
0:55
If we wanted to change the story board
based on a phone or tablet size,
0:59
this is the place we would do it, although
with some of the new IOS layout features.
1:05
We'll be able to make our app
look good at any resolution.
1:10
So we should not need
to change story board.
1:15
Now let's look at the main story board and
customize it for our app.
1:18
If you not setup your app to
connect with a MAC agent,
1:22
you'll get this error message.
1:25
So let's set it up.
1:28
To make sure we can
connect to the MAC agent,
1:30
we need to turn on sharing in
the system preferences on your MAC.
1:33
So let's switch to the MAC.
1:38
Open system preferences.
1:41
Sharing.
1:44
Enable remote login.
1:47
Allow access for all users.
1:49
This will make sure we can log in when we
setup the Mac agent on a Windows machine.
1:52
Since we set up our Mac agent,
1:58
we can connect it from our
Visual Studio for Windows.
2:00
Open up the Mac Agent dialogue.
2:05
You could open it from the Tools menu,
under iOS.
2:07
If your Mac Agent is on the same network,
it should show up on this list.
2:12
If it does,
simply right click and connect.
2:17
You'll be prompted for
your Mac log-in credentials, and
2:21
then we'll negotiate a connection.
2:24
If your Mac is not discovered
automatically, then click the add Mac
2:28
button, and enter either the IP address or
the name of the Mac.
2:31
Although if your Mac was not
automatically discovered,
2:36
your best choice is IP address.
2:39
You can get the IP address on the Mac
in the settings under the Network app.
2:41
So now, the Storyboard Designer's open and
2:46
we can see the button that counts
the clicks in the Template app.
2:48
Right-click on the background to select
the View Controller in the Designer.
2:51
This is a good time to explain
what a view controller does.
2:59
iOS uses a model view controller,
or MVC pattern, for its interfaces.
3:04
The view controller is
the controller which handles
3:10
all interactions between the model and
the view or any other services.
3:12
The view is simply the layout
of the user interface, and
3:18
is referenced by their ViewController.
3:21
There's more on the MVC pattern
in the teacher's notes.
3:24
Take a look at the ViewController,
which is a partial class,
3:28
and a UI view controller.
3:31
It's a partial class cuz when
the IOS project get's compiled,
3:34
it generates glue code
between the story board and
3:38
the view controller, also as a partial
class, that they're joined together.
3:42
If we look back at the main story board,
we can see where we assign
3:47
our ViewController to
the ViewController in the Designer.
3:50
Select the ViewController by
right clicking and selecting.
3:54
Open up Properties and
you can see a class property,
3:59
with the list of
UI ViewControllers in our app.
4:02
In this case, we only have one.
4:06
To start customizing our application,
right click the button, And delete it.
4:08
Now open the toolbox,
4:15
And add a text field
4:24
Button.
4:33
And a label.
4:40
We need to give each of
these controls a name so
4:46
that we can reference them
later in the ViewController.
4:49
Select the text, call this PeopleEntry,
4:54
And let's remove the text.
5:01
We'll call the button, calculate button
5:08
And change it's text to calculate.
5:16
And then Pizza label.
5:24
And remove its text.
5:36
Depending on which device you're using,
our app maybe completely unusable.
5:39
Because the text entry field is off
the screen or the button is not clickable.
5:44
This happens because iOS views
are absolutely positioned
5:49
when laying out on the screen.
5:53
So wherever you put the control,
while in the designer is where it stays.
5:54
So if your screen is smaller than
your designer it may not be visible.
6:00
As you can see, its different sizes
will make our app very difficult to use.
6:09
To fix this, we can add constraints so
that the controls will resize and
6:17
align with any screen size.
6:21
To do this,
we'll need to apply constraints.
6:23
This can get a little tricky to get right.
6:26
But a good way to approach it is
vertically, then horizontally.
6:29
Click the PeopleEntry, pause and
6:34
then click it again to put
you in constraint mode.
6:36
Drag the top T shaped icon
to the top of the screen.
6:45
This will give us a starting point for
all other controls.
6:51
Next, select the button and
6:56
drag the top T icon to the bottom
of the PeopleEntry control.
6:58
Once more for the Pizza account label
7:03
that drag it's top T icon to
the bottom of the calculate button.
7:05
For horizontal, starting with
the PeopleEntry, drag the left T icon to
7:10
the left side of the view and the right
T icon to the right side of the view.
7:15
Do the same for the button.
7:20
You will notice button is
too small to hold the text.
7:21
Lt's select it again and change its size.
7:27
Label also is probably too small.
7:41
So let's increase its size.
7:51
To test out the constraints, change the
View As option to something smaller and
8:08
larger.
8:12
And switch landscape to portrait and
back and forth.
8:14
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up