Mobile app development -03-IOS primer development tutorial

What is iOS

iOS is a mobile operating system developed by Apple for its mobile devices (iPhone, iPad, iWatch, etc.).

iOS history

  • Apple released iPhone Runs OS X in 2007
  • Renamed iPhone OS in 2008
  • Renamed iOS in 2010
  • iOS 6 released on WWCD 2012 in 2012
  • iOS 7 released on WWCD 2013 in 2013
  • iOS 8 and Swift released on WWCD 2014 in 2014
  • 2015 iOS 9 and Watch OS released on WWCD 2015

Cocoa Touch framework

The iOS system architecture can be divided into 4 layers as shown in the following figure. The status of the Cocoa Touch framework is self-evident.这里写图片描述

Description: Core OS and Core Service provide underlying support, including file access, network protocols, low-level data types, and more. Media provides basic drawing and audio and video support, including OpenGL, Quartz, Core Audio and Core Animation. Cocoa Touch includes most of the APIs used for development, mainly consisting of Foundation (file access, network operations, data and container types) and UIKit (UI controls, controllers, etc.). In the development of the app, these technical levels should be used from top to bottom. The better the upper layer API is packaged, the easier it is to develop, but the less you can play.

Application and user interface

The user interface (also called the user interface) is the channel through which people and computers communicate. People tell the computer what they want to do, and the computer presents the results of the processing. The user interface is based on the computer's I/O devices.

An application is a computer program that performs a specific task or tasks. It runs in user mode and interacts with the user, with a visual user interface. Apps on mobile phones are often referred to as apps.

Several related terms:  - UI: User Interface (User Interface / Interface)  - App: Application  - API: Application Programming Interface

UIKit inheritance structure

这里写图片描述   实现App开发中的用户界面首先要从UIResponder及其子类开始研究,当然整个过程会覆盖整个UIKit框架,比如UIColor(颜色)、UIEvent(事件)、UIFont(字体)、UIGestureRecognizer(手势识别)、UIImage(图像)、UIScreen(屏幕)等诸多内容。

Getting started with iOS development

Create an iOS project in Xcode

Start Xcode and select "Create a new Xcode project" in the welcome page. Select iOS->Application->Single View Application in the project creation wizard and click Next. Next you need to set the project name, organization name, organization ID, development language (OC or Swift) and device (iPhone, iPad or Universal). After selecting the location of the project in the next step, you can click "Create" to complete the project creation.

Explanation: Selecting the type of application is actually selecting a project template, let Xcode do some tedious work for you. If you use Xcode 5, we recommend that beginners choose Empty Application, and it is more helpful to do a project from scratch. Understand how the code works. When you really do development, you can choose to write code or use a visual designer (storyboard or xib) to see what your company has.

Familiar with Xcode

这里写图片描述

Above the Xcode is a toolbar with lots of tool buttons.

The left side of Xcode is the navigation area, including: project navigation, symbol navigation, query navigation, problem navigation, test navigation, debug navigation, breakpoint navigation, report navigation

Tips: You can switch between 8 navigations using the Command+1-8 number keys.

In the middle of Xcode is the editor area; below the middle is the debug area.

Above the right side of Xcode is the inspector (review) area; below the right side is the area of ​​the various libraries.

Xcode common functions and shortcuts

  • Command+[ -> code block left shift
  • Comamnd+] -> Code block right shift
  • Tab -> Accept code auto-completion prompt
  • Esc -> Show code hints
  • Command+B -> compile
  • Command+R -> Run
  • Control+F -> Move cursor
  • Control+B -> Move cursor
  • Control+P -> Move the cursor to the previous line
  • Control+N -> cursor moves to the next line
  • Control+A -> Move the cursor to the beginning of the line
  • Control+E -> cursor moves to the end of the line
  • Control+T -> swap cursor left and right characters
  • Control+D -> delete the character to the right of the cursor
  • Control+K -> delete this line
  • Control+L -> Position the cursor at the center of the window
  • Hold down Option and double click the mouse -> Search for documents
  • Command+Y -> activate/deactivate power off
  • Command+Control+Y -> keep running
  • F6 -> Single Step Skip
  • F7 -> Single Step
  • F8 -> Jump out

First iOS app

You can see the files contained in the entire project in the project navigation. Open the Supporting Files folder and you can see a main.m file with the main function that everyone is very familiar with. The entry of C and Objective-C (hereinafter referred to as OC) programs are main functions. The entry of iOS application is of course the main function, but the main function is soaked in soy sauce, just calling a function called UIApplicationMain. The UIApplicationMain function creates an object of UIApplication. Each iOS application has one and only one UIApplication object. The purpose of this object is to maintain a message loop, listen to various events of the application, and execute the corresponding callback method. Callbacks are a common programming paradigm. When we know what to do when something happens, we don't know when this happens, we will use the callback programming mode, register a series of callback methods, when These methods are called by the delegated object when the event occurs.

#import <UIKit/UIKit.h>

import “AppDelegate.h”

int main(int argc, char * argv[]) { @autoreleasepool { return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); } }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Explanation: Four parameters of the UIApplicationMain method, where the first two are the command line parameters of the main method, the third parameter table is the name of the UIApplication class or its subclasses, and the UIApplication object starts a loop listener for each event listener. Events, which are then handled by delegates, and the fourth parameter happens to be the name of an application delegate class.

The code for the AppDelegate class is as follows:

head File

#import <UIKit/UIKit.h>

@interfaceAppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@end
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Source File

@implementationAppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // application loading is complete
    return YES;
}

- (void)applicationWillResignActive:(UIApplication *)application {
    // The app will be placed in the background
}

- (void)applicationDidEnterBackground:(UIApplication *)application {
    // The app is already in the background
}

- (void)applicationWillEnterForeground:(UIApplication *)application {
    // The app is about to be in the foreground
}

- (void)applicationDidBecomeActive:(UIApplication *)application {
    // The app has entered the foreground
}

- (void)applicationWillTerminate:(UIApplication *)application {
    // The app is about to terminate
}

@end
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

In other words, the execution flow and life cycle of our entire application should be as shown in the following figure.

The application is loaded into the foreground:这里写图片描述

The application is loaded into the background:这里写图片描述

The application goes from the foreground to the background:这里写图片描述

The application enters the foreground from the background:这里写图片描述

iOS coordinate system

The upper left corner of the screen is the coordinate origin, the horizontal direction is the positive direction of the X axis, the vertical direction is the positive direction of the Y axis, and the status bar is from Y=0 to Y=20.

这里写图片描述

The screen size is shown in the following table:

device screen size Resolution Coordinate points
iPhone 3 and 3s 3.5 inches 320*480 320*480
iPhone 4 and 4s (retina support) 3.5 inches 640*960 320*480
iPhone 5 and 5s (retina support) 4 inches 640*1136 320*568
iPhone 6 4.7 inches 750*1334 375*667
iPhone 6 Plus 5.5 inches 1080*1920 414*736
iPad 1 and 2 (Retina is not supported) 9.7 768*1024 768*1024
iPad 3 and 4 (retina support) 9.7 1536*2048 768*1024
iPad Air 9.7 1536*2048 768*1024
iPad Mini (retina is not supported) 7.9 768*1024 768*1024
iPad Mini2 (retina supported) 7.9 1536*2048 768*1024

The role of the form

UIWindow is equivalent to a frame. It can host other view objects (including subclass objects of the view), but usually we don't put all the view objects directly on the application's window, but by one or more view controller objects (later Introduce) to manage these content.

这里写图片描述

UIView and UIWindow

The principle of UIWindow rendering

We can add the following code to the AppDelegate.m file just now.

// callback this method when the application is finished loading
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Create a window object and set its size to screen size
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    / / Set the background color of the window
    self.window.backgroundColor = [UIColor whiteColor];
    / / Set the window object as the main window and visible
    [self.window makeKeyAndVisible];
    return YES;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Inheritance relationship between UIWindow and UIView

UIWindow is a subclass of UIView. The UIView defines a rectangular area and a programming interface that manipulates the contents of the rectangular area. In addition, the UIView also handles the interactive behavior (drawing, animation, and event handling) of the content in the runtime area. As you can see from the above diagram, the controls we want to use are all subtypes of UIView. The views are arranged in a hierarchy, and at the top of the view hierarchy is the application form.

Any application has one and only one UIWindow object, and a UIWindow object is like a container that is responsible for containing all the views in the application. The application needs to create and set the UIWindow object at startup and then add other views to it, as the code above renders.

A view that joins a window becomes a child of that window. Subviews can also have their own subviews to form a view hierarchy (tree structure) with UIWindow as the root.

这里写图片描述

Basic properties and methods of UIView

  • Frame property: set the coordinates and size of the view
  • backgroundColor property: set the background color of the view
  • Window attribute: the window object where the view is located
  • -addSubview method: add a subview

Detailed use of UILabel

Common properties of UILabel

To use the iOS programming API, you can download a tool called Dash to view the documentation, which is very convenient and easy to use. You can not only see the document but also the related issues on Google and StackOverflow, you will definitely like this tool. .

这里写图片描述

Common properties of UILabel: - text attribute: the text on the label - textColor property: the color of the text - textAlignment attribute: text alignment - font attribute: font - adjustsFontSizeToFitWidth property: adjust the text size to fit the label width - numberOfLines attribute: the number of lines displayed, set to 0 means no limit on the number of lines

Next we add the following code to the application we just created to place a label.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor orangeColor];
    [self.window makeKeyAndVisible];

    // Create a tag object
    UILabel *myLabel = [[UILabel alloc] init];
    // Set the size and coordinates of the label
    myLabel.frame = CGRectMake(50, 300, 275, 40);
    / / Set the font of the label
    myLabel.font = [UIFont systemFontOfSize:36];
    / / Set the color of the label
    myLabel.textColor = [UIColor blueColor];
    / / Set the alignment of the label
    myLabel.textAlignment = NSTextAlignmentCenter;
    // set the text on the label
    myLabel.text = @"Hello, world!";
    // add the label to the window
    [self.window addSubview:myLabel];

    return YES;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

The effect of the app running on the emulator (iPhone 6) is as follows:

这里写图片描述

Reference: Original link