This tutorial explains how to add more than one screen to your iOS app and link screens together using buttons. We will use a simple example for this tutorial as show below…
Watch the video below or scroll down to read the step-by-step instructions and sample code.
Video
Step 1
Start by creating a new solution (click File > New Solution).
Step 2
Give your app a name, select a minimum supported iOS version and click Next.
Confirm the project and solution names, the project folder location and click Create.
Step 3
Open the Main.storyboard file and drag a Button element on to the screen. Give it a name and change its text value.
Step 4
Drag a Navigation Controller anywhere onto the storyboard. It should look like this…
Step 5
Right-click the Root View Controller and click Delete.
Step 6
Hold down the Ctrl (Control) key while dragging the Navigation Controller screen to your main screen (you will see a blue line linking the two screens together). The select Root from the list of options – this will make the main screen the root screen (the screen that loads first when the app starts running).
Step 7
Now drag a View Controller element onto the storyboard and place it to the right side of your main (root) screen. This will create a new screen which will be the second screen in your app.
Step 8
Hold down the Ctrl (Control) key while clicking and dragging the button on the main screen to the second screen. When you see the list of options appear, select Appear.
Step 9
Now we can add a Button to get from the second screen back to the main screen. Drag a button element on to the second screen. Give it a name. When you name the first element that you add to a new screen, you will see a yellow warning icon. Click it and then you will need to type in the name of the new ViewController for this screen (for example, ScreenTwoViewController)– the name you provide will be the name of a new C# file that will contain the code for this screen. Change the Title property of the button the Back.
Step 10
Now click on the new button on the second screen. Hold down the Ctrl (Control) key while dragging this button to the main screen. Click on Show. This will make the Back button take the user back to the main screen when they tap it.
Lastly, double-click on the main screen’s title so you can rename it.
In this tutorial we will make a Cookie Clicker game for iOS mobile devices using Xamarin.We made the same app for Android in a previous tutorial and now we are going to make it for iOS devices. You will also learn how to use images for buttons instead of plain text.
This is what the basic working app will look like but you can improve the look of it by change the text and background colours and by adding more options.
iOS Cookie Clicker app
Watch the video below or scroll down for the full instructions and sample code.
Video
Step 1
Start a new Solution (File > New > Solution). Select App under iOS and then select Single View App. Click on Next.
Step 2
Give your app a name, select the minimum iOS version you want to support and click Next.
Step 3
Give your project and solution a name (you can keep it as the default) and then choose the location where you will store your project (eg. the Projects folder). Then click on Create.
Step 4
Open the Main.storyboard file (in the Resources directory). Change the view from Generic to the iPhone model you are targeting (eg. iPhone 6S).
Step 5
Drag a Button element on to the screen from the Toolbox.
Step 6
You will need a cookie image for your app. Once you have an image on your computer, select the Resources folder. Click the cog icon, then Add > Add Files from Folder.
Step 7
Find the folder that contains your cookie image. Then click on Open.
Step 8
Click the checkbox next to the image you want to use and then click OK.
Step 9
Choose Copy the file to the directory and then click OK.
You should now see the image in the Resources directory.
Step 10
Now select the Button you added earlier and from the Widget tab on the Properties panel, scroll down until you see the Background property. Click the dropdown box and choose the image you want to use (eg. cookie.png). Alternatively, type in the filename in the text box.
Now you have a cookie image as the background for your button. However, the button is very small so it will need resizing.
Step 11
Click and drag the corners of the button to enlarge it so that the background image of the cookie is nice and clear.
Step 12
Now go and remove the Default title value under Title on the Properties panel so that the button text is no longer visible on the button.
Step 13
Add a Label element to the screen under your cookie button and change its Text value to say ‘0 clicks’.
Step 14
Change the Name of the Button element to cookieButton.
Step 15
Change the Name of the Label element to clicksLabel.
Step 16
Now all that remains is adding the code that will count and display the number of clicks. Open the ViewController.cs file to begin coding.
Step 17
Firstly, create a variable called clicks that will contain an integer value. Its initial value should be 0 before any clicks have been recorded. Inside the public partial class ViewController : UIViewController section, add the following line of code:
int clicks = 0;
Step 18
Now you need to add a button touch event so that every time the cookie button is touched, the clicks variable’s value will increase by 1. To do this, go to the ViewDidLoad method and make some new space under the base.ViewDidLoad() line. Start typing cookieButton.TouchUpInside+= and then press the Spacebar. As you do this, you will see a list of options. Double click the CookieButton_TouchUpInside option to create a new method.
After creating the new CookieButton_TouchUpInside method, you can now add code inside the method that will run when the cookie button is touched by the user. This code should increase the clicks variable by 1 and display the number of clicks every time the button is touched.
Step 19
Add the following code inside the CookieButton_TouchUpInside method:
This code will increase the clicks variable by 1 every time the button is tapped as well as displaying the value of the variable and concatenating (joining) the value to the text ‘ clicks!’ – for example 20 clicks! Note that the clicks variable’s value has to be converted to a string before it can be displayed on the button.
Now you can test the app!
When you test the app, click or touch the cookie button and you should see the number of clicks displayed increased, as shown below.
iOS Cookie Clicker app
Try extending the app by adding some buttons with the options to ‘buy’ items or unlock items after a certain number of clicks. You could also use a timer to increase the number of clicks automatically over a period of time (eg. 5 clicks every second). You might also like to change the colour of the text and the background of the app.
Sample C# code
Here is the sample C# code for the ViewController.cs file (please note that the namespace should match the project/solution/app name of your app. It is called CookieClickerIOS in this example.
using System;
using UIKit;
namespace CookieClickerIOS
{
public partial class ViewController : UIViewController
{
int clicks = 0;
public ViewController (IntPtr handle) : base (handle)
{
}
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
cookieButton.TouchUpInside+= CookieButton_TouchUpInside;
}
void CookieButton_TouchUpInside (object sender, EventArgs e)
{
clicks++;
clicksLabel.Text = clicks.ToString () + " clicks!";
}
public override void DidReceiveMemoryWarning ()
{
base.DidReceiveMemoryWarning ();
// Release any cached data, images, etc that aren't in use.
}
}
}
This tutorial will show you how to create a Temperature Converter app for iOS devices using Xamarin. We made the same app for Android in a previous tutorial and now we are going to make it for iOS devices. The app will look like this…
Although we will be using Xamarin for designing and coding the app, you will still need to have XCode installed on your Mac device (click here for detailed installation instructions).
Watch the video below or scroll down to view the step-by-step instructions and sample code.
Video
Step 1
To get started, open Xamarin and begin a New Solution.
Step 2
Select App under iOS and then select Single View App (C#). Click on Next to continue.
Step 3
Give your app a name. In this case, it will be called TempConverter. You also need to select a minimum iOS version you want to support. In this case, the target version is iOS 9.1. Make sure the target version is either an older or same version of iOS that you will be using to run the app on. Click Next to continue.
Step 4
Now just confirm the project and solution name (making sure it is not the same name as a solution that already exists in your projects folder) as well as the project folder location and click Create.
Step 5
Once the new solution has loaded, Xamarin will automatically open a file called AppDelegate.cs. Don’t worry about this file for now as we won’t really be changing anything there. The two files that we will be working with are the Main.storyboard file (for adding the buttons, text labels, and text boxes) and ViewController.cs (for coding the functionality).
Double-click the Main.storyboard file to open it. It may take a minute to load. The storyboard is where you will add your user interface elements such as buttons, text boxes and text labels. Choose the iPhone device that you want to use as the preview for your storyboard eg. iPhone 6.
Step 6
In the Toolbox panel (use the search box to find and add the Toolbox to your layout if you don’t see it there), scroll down until you see Label (you can also search in the Toolbox for the Label element.
Drag a Label element on to the phone screen where you would like to place it.
Step 7
Change the Text value in the Properties panel (on the Widgets tab) to ‘Enter temperature in degrees:’.
Step 8
Drag the edges of the Label element to resize it so that you can see all of the text.
You can also change the colour of the text, the font and alignment (eg. align to center) from the Properties panel.
Step 9
Drag a Text Field element from the Toolbox on to the screen under the text label. Change its Placeholder text to ‘Temperature in degrees’. Resize the Text Field and center-align the text.
Step 10
Drag two Button elements on to the screen and resize them to fit their text. Change the first button’s text to ‘Convert to Celsius’ and the second button’s text to ‘Convert to Fahrenheit’.
Step 11
The last element to add is the text label which will display the result of the temperature conversion. Drag a Label element on to the screen and change its default Text to 0, change its Colour and Font size/style. You can also change the Alignment to center.
Step 12
Now we need to name each of the screen elements so that they can be accessed by the code. Firstly, click on the temperature text field and change its Name to tempTextField.
Step 13
Now give the ‘Convert to Celsius’ button the Name cButton.
Also set the Name of the ‘Convert to Fahrenheit’ button to fButton.
Step 14
Lastly, click on the text label which will display the conversion result and change its Name to resultLabel. Now is a good time to save the Main.storyboard file (Click File > Save).
Step 15
Now its time to do some coding. Open the ViewController.cs file. In this file, click inside the ViewDidLoad method and add the code highlighted below. This code will add a button touch event that will occur when the user touches to Convert to Celsius button. When we create the cButton.TouchUpInside event it will also automatically create a new method CButton_TouchUpInside which will contain the code that will convert a temperature to Celsius.
Step 16
We now need to also create a button touch event for the Convert to Fahrenheit button and a method that will contain its code.
Step 17
Now let’s add the code for the FButton_TouchUpInside method first. This method will be called when the Convert to Fahrenheit button is pressed by the user. Add the highlighted code below. Firstly, a float variable called temp is created to store the temperature value that the user enters into the text field as a float value. Then a variable called fResult will convert the temperature from Celsius to Fahrenheit and store the result as a float value. Lastly, the text on the resultLabel element will display the result and the text ‘degrees Fahrenheit’ at the end of the sentence eg. ’68 degrees Fahrenheit’.
Note: You may need to resize the fResult label element in the Main.storyboard file so that it can fit the result and text.
Step 18
We can now add the code for the Convert to CButton_TouchUpInside method to run the conversion when the Convert to Celsius button is pressed. Add the highlighted code to this method shown below. Then save your code (File > Save).
Step 19
Now go back to the Main.storyboard file and select the Text Field element. In the Properties panel and on the Widget tab, scroll down and change the Keyboard Type to Decimal Pad so that numbers with decimal place can be typed in and the most suitable keypad is displayed. Save the file.
Step 20
At this point, the app will work and will allow the user to type in a temperature (as a whole or decimal number) and convert it to either Celsius or Fahrenheit. However, after the user has typed in a number they should be able to hid the keyboard if it is no longer needed.
Before testing the app we will add a little piece of code that will allow the keypad to be dismissed by the user when it is no longer needed. To do this, go back to the ViewController.cs file and start typing the highlighted line of code (where it is shown below). As you start typing override touchesBegan you should see an auto-complete suggestion called TouchesBegan(NSSet touches, UIEvent evt). Press the Enter/Return key on your keyboard to auto-complete the line of code. This will create a new override method called TouchesBegan. Inside this method we will add some code to dismiss the keyboard.
As you start typing override touchesBegan you should see an auto-complete suggestion called TouchesBegan(NSSet touches, UIEvent evt). Press the Enter/Return key on your keyboard to auto-complete the line of code.
Add the following code inside the new override method called TouchesBegan to allow the keyboard to be dismissed when typing has been completed by the user. Then save the file.
Finishing up
All of the coding is done. Congratulations – you have made your first iOS app using Xamarin and the C# programming language! Remember to save your files.Now just select a type of iPhone model you would like to test this app on and click on the Build button to start testing/emulating the app.
And this is what the completed app should look like…
What next?
Test your app thoroughly. Are there any problems with your app? Does it crash under some circumstances? Is there any way it could be improved. Jump into the next tutorial to see how this app can be improved.
Sample code
You can download the sample code for the ViewController.cs file here:
using System;
using UIKit;
namespace TempConverter
{
public partial class ViewController : UIViewController
{
public ViewController (IntPtr handle) : base (handle)
{
}
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.e
cButton.TouchUpInside+= CButton_TouchUpInside;
fButton.TouchUpInside+= FButton_TouchUpInside;
}
void FButton_TouchUpInside (object sender, EventArgs e)
{
float temp = float.Parse(tempTextField.Text);
float fResult = temp * 1.8f + 32f;
resultLabel.Text = fResult.ToString () + " degrees Fahrenheit";
}
void CButton_TouchUpInside (object sender, EventArgs e)
{
float temp = float.Parse (tempTextField.Text);
float cResult = (temp - 32f) / 1.8f;
resultLabel.Text = cResult.ToString () + " degrees Celsius";
}
public override void DidReceiveMemoryWarning ()
{
base.DidReceiveMemoryWarning ();
// Release any cached data, images, etc that aren't in use.
}
public override void TouchesBegan (Foundation.NSSet touches, UIEvent evt)
{
base.TouchesBegan (touches, evt);
this.View.EndEditing (true);
}
}
}
This video tutorial explains how to use the Adobe Shape CC app (on iOS and Android) to take a photo of a hand-drawn sketch and turn it into an SVG vector graphic which can be opened and edited in Adobe Illustrator CC.
