Tag Archives: iphone

Adding more screens to an iOS app

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…

iosmultiscreenapp

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).

ims1

Step 2

Give your app a name, select a minimum supported iOS version and click Next.

ims2a

Confirm the project and solution names, the project folder location and click Create.

ims2b

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.

ims3

Step 4

Drag a Navigation Controller anywhere onto the storyboard. It should look like this…

ims4

Step 5

Right-click the Root View Controller and click Delete.

ims5

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).

ims6

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.

ims7

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.

ims8

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.

ims9

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.

ims10

Lastly, double-click on the main screen’s title so you can rename it.

ims11

That’s it! Now you can test out your app.

Making a Cookie Clicker game for iOS

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
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.

ioscc1

Step 2

Give your app a name, select the minimum iOS version you want to support and click Next.

ioscc2

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.

ioscc3

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).

ioscc4

Step 5

Drag a Button element on to the screen from the Toolbox.

ioscc5

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.

ioscc6

Step 7

Find the folder that contains your cookie image. Then click on Open.

ioscc7

Step 8

Click the checkbox next to the image you want to use and then click OK.

ioscc8

Step 9

Choose Copy the file to the directory and then click OK.

ioscc9a

You should now see the image in the Resources directory.

ioscc9b

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.

ioscc10

Now you have a cookie image as the background for your button. However, the button is very small so it will need resizing.

ioscc10b

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.

ioscc11

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.

ioscc12

Step 13

Add a Label element to the screen under your cookie button and change its Text value to say ‘0 clicks’.

ioscc13

Step 14

Change the Name of the Button element to cookieButton.

ioscc14

Step 15

Change the Name of the Label element to clicksLabel.

ioscc15

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.

ioscc16

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;

ioscc17

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.

ioscc18

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.

ioscc18b

Step 19

Add the following code inside the CookieButton_TouchUpInside method:

clicks++;
clicksLabel.Text = clicks.ToString() + “ clicks!”;

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.

ioscc19

Now you can test the app!

ioscc19b

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
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.
    }
  }
}

Creating your first iOS app

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…

iosapp

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.

ios1

Step 2

Select App under iOS and then select Single View App (C#). Click on Next to continue.

ios2

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.

ios3

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.

ios4

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).

ios5

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.

ios6

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.

ios7

Step 7

Change the Text value in the Properties panel (on the Widgets tab) to ‘Enter temperature in degrees:’.

ios8

Step 8

Drag the edges of the Label element to resize it so that you can see all of the text.

ios9

You can also change the colour of the text, the font and alignment (eg. align to center) from the Properties panel.

ios10

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.

ios11

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’.

ios12

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.

ios13

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.

ios14

Step 13

Now give the ‘Convert to Celsius’ button the Name cButton.

ios15

Also set the Name of the ‘Convert to Fahrenheit’ button to fButton.

ios16

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).

ios17

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.

ios18

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.

ios19

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’.

ios20

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).

ios21

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.

ios22

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.

ios23
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.

ios24

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.

ios25

And this is what the completed app should look like…

ios26

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);
    }
  }
}

Using Adobe Shape CC app to turn sketches into Illustrator drawings

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.

Watch the video below or on YouTube.