The following tutorial introduces app development using Xcode. For the first tutorial, we are creating a new single view app and we will try to run the app using Xcode.
What you will need:
- You will need a Mac computer. It can be a Mac desktop or laptop computer.
- You need to download the latest version of Xcode. The latest version of Xcode can be downloaded from the App Store or at https://developer.apple.com/xcode/download/
To start a new project, please launch Xcode. Click on Create a new Xcode project and the following screen will appear.
Make sure iOS/Application is selected on the left plane. Select SingleView Application. Click Next. The following screen shows.
Enter your product name. My product name for this project is Intro1. You can enter your organization name and identifier or you can just enter example.com. Make sure Swift is selected for the language. Devices remain as Universal. Click Next.
Select the location where you want to place your project. Leave the repository unchecked. The project will be created and you will be shown a main screen as shown below.
The left hand panel, also named as navigator, allows you to navigate between different part of the project. The right hand panel, shows the properties / detail information we have selected in the middle section. We can modified certain properties or information on the right panel.
The main section, as shown below, display the basic setup of the application. If we are designing an app solely for iPhone, we can choose iPhone instead of Universal under Deployment info/ Devices. We can also decide if our app is capable of using the landscape mode (where the phone is turned sideways). If we prefer our app to be in portrait mode, just uncheck Landscape Left and Landscape Right.
On the left hand side panel, select Main.storyboard
The storyboard section will appear in the middle as follows:
The section on the left shows each object on the storyboard, its hierarchy and relationship. The section on the right is the visual and the main portion of the storyboard.
On the right hand panel, at the bottom, select the object library option (third button from left) as shown below.
This panel, allows you to select predefined object from the object library. These objects are used to construct the storyboard. The most common object is label. It is basically a box where you can enter text and display such text on the app. Under the filter section, type and search for label.
- Click and drag the label box to the main storyboard and release the mouse click. Double click the box and enter some text.
- Click and drag the box so that it centers in the storyboard as shown below.
Select the label box and the right hand panel shows all the details relating to Label. The text you entered in the label box is in the second row. We keep the other details as it is. we will explore these properties later.
With the label box drawn and text entered, we can run the app. To run the app in Xocde, look for the run button on the top left corner as shown below.
Before we run this app, please note that we can choose the target device we want to run. The default is iPhone 6s Plus. We can choose to run the app in other type of device.
After we run the app, the app may appear too big for our monitor. We can scale the app screen by change the scale of the app screen as shown below.
I find that the 75% or 50% is good for us to see the whole screen. After we set the scale, we should be able to get our app emulator running as shown below.
Yes, the label is truncate although we have centred the label in our storyboard.
The reason this is happening because the storyboard is designed for all types of device. We need to work with AutoLayout in order to cater for different sizes. Even if you set device as iPhone or iPad. Both iPhone or iPad have different sizes.
For now, we drag the label to the top left hand corner as shown below.
The screen of the running device is as shown below.
We can run the app on other device such as iPhone 5. The screen will be shown as follows.
This conclude our first tutorial.
A copy of this project is located at Github https://github.com/SwiftiCode/Intro1
*** End ***
No comments:
Post a Comment