First, create a single view application as follows:
Click Next.
Enter the product name and click Next. Select the location of project and click create. After the app creation, on the left hand panel, select AppDelegate.swift
App delegate is the starting point of an app. It is responsible for managing the life cycle of an app. This is also where you can start your code customization. App delegate contains the a single window object. From this window, app delegate will track all the content drawn within the window hierarchy. The sample code below belongs to app delegate.
Next we are looking at ViewController.swift. View controller is responsible for controlling the behaviors of the view. At the same time, it is also responsible for interfacing between data model and the view. View controller will fetch data from the data source and present information to the view.
Next, we would explore main.storyboard. This storyboard is where we place all visual objects that we would like to present to the user. This is also where the design element help in arranging all the visual objects.
We have start using storyboard to place our labels. The next few tutorial will focus on various visual objects at our disposal.
The next area we like to explore is Assets.xcassets. This section is where we store various pictures that we would be using including app icon.
Within assets, select the Appicon folder. There are various app icon placeholder available. To distribute an app, we need to include app icon of various size stipulated in the design guideline. Once we created the icon pictures, we can drag the picture to the appropriate placeholder for the appropriate size.
In addition we can store any app related pictures in this folder.
The next section is storyboard launch screen. This is the image where it appears while the app is starting.
The next section is info.plist. This is where we store all the app related information.
Next we would like to repeat what we did on the first tutorial. Select main.storyboard, under object library please drag the label to the top left corner of the storyboard. Please refer to the first tutorial if you are still not familiar with the procedure.
Double click the label and enter any text. You may need to re-adjust the label position again.
Select the label and explore the properties on the right panel. This is where we store all the most common properties for each label. We can customized it according to our liking.
Select the fourth item from the left and we would be shown the properties below. This panel contain all the adjustable properties relating to label. We can adjust the alignment, font, color of font, text size and many other properties. Please explore these different setting and observe the changes in the storyboard.
Select the fifth item from the left. The details of the panel is shown below. This panel contain information of the size of the label and its relative position in relation to other object when auto-layout is being deployed.
Select the third item on the panel. This is where we store the class and identity information. All labels are objects under UILabel class. If we subclass UILabel and create your custom properties or method. We can link the object to the new subclass under custom class section.
Next we would like to explore the top bar. There are 3 section in the top bar. The right most section is shown below. The right 3 button are used to toggle on/off the left panel, bottom panel and the right panel.
A sample of bottom panel is shown below.
The left 3 button shows different type of editors. The left most is the standard editor. The middle button with 2 circle intersecting each other is used to trigger the assistant editor. Assistant editor is useful when we need to link the visual objects to our code in the view controller.
The center portion of the top bar contain various build status. It will display when the app was last saved or last build. It will also display any errors occurred.
The left portion of the top bar might be familiar to us. We used it to select the device we would like the app to run and we run by clicking the play button and stop the app by clicking the stop button.
Finally, select the top most item in the left panel.
The app information will display in the middle as shown below. This is where we store all the build information relating to this app. For now, there is no need for us to be concern about the settings. If we are developing app solely on iPhone or iPad, then we might want to change the device from Universal to iPhone or iPad. We might also want to consider whether if our app support landscape mode. If we are not supporting landscape mode then we can just uncheck Landscape Left and Landscape Right.
A copy of this project is stored at Github at https://github.com/SwiftiCode/Intro2
*** End ***
No comments:
Post a Comment