02-First iOS program-Development Steps

Open Xcode

Select Project Template

• Single View application is the most suitable template for beginners

Set project Properties

Run the program

• Anyway, run the first iOS program first to see the effect first (with the shortcut command + R also line)

Run results

• Xcode launches an iOS emulator to run the program
• The running result of the program is as shown in the picture on the right, in vain
• We have to add a variety of control elements to this blank interface.

Spying on the project environment

• After the project has been created, it automatically helps us to do a lot of configuration, but also automatically generated a lot of files
• The framework on which development depends is also automatically added:

How to build a UI interface

• So many files in the project, which affect the UI interface?
• Before iOS5, Apple used the Xib file to describe the UI interface
• After IOS5, Apple took a more powerful and advanced storyboard file to describe the interface (XCODE5 is iOS7 based)
• Therefore, it can be concluded that:
• Modify the Main.storyboard file in the project to modify the UI interface

Spy on Main.storyboard

• Open Main.storyboard file Look, there's an all-white interface inside.
• In fact, this interface is the interface shown on the simulator.
• The arrow on the left indicates that the interface that the arrow refers to is displayed when the program starts

Show toolbars

• To add additional controls to the storyboard interface, display the toolbar

Show Control Library

• Display the control library in the form of nine to see more controls at the same time
• A variety of controls, such as buttons, labels, text input boxes, and so on, can be seen from the image on the right.

Adding controls

• Left mouse button, long press a control on the right, you can drag it to the left side of the white screen

Modifying control properties

• When you click to select a control, you can change the properties of the control in the menu toolbar on the right

Run effect

• Run the program can be found that the software interface is basically built, you can also enter the number through the keyboard

How to increase the listening button

• Opening mjviewcontroller.m, adding method declarations in class extensions

@interface Mjviewcontroller ()

This is the first ibaction to be seen as

void-(ibaction) compute;

@end

• The methods declared in. m are private methods that cannot be accessed directly by the outside world, guaranteeing encapsulation
• Add method implementations:

@implementation Mjviewcontroller

-(void) compute

{

NSLog (@ "Click on the Calculation button");

}

@end

Establish a link between a button and a method

• Next, the relationship between the button and the compute method is established.
• Click Storyboard First, then click the "Middle" button

• Now you can see both the buttons and the compute methods on the storyboard, and then build the link between them.

• Hold down the Control key, drag the button to the compute method with the left mouse, and then release

• The circle on the left side of the method is filled with a hollow, indicating that a button has been wired

• Just click on the "Calculate" button and the compute method will be called automatically.

Run the program

• After re-running the program, click the "Calculate" button, you will find that the console has output information

Adding control properties

• Now you are able to listen for button click events, then you should get two text box values in Mjviewcontroller's Compute method, and then display the results to the rightmost text label

• In a class extension, declare 3 properties to access the 3 controls in storyboard

1. @property (nonatomic, weak) Iboutlet Uitextfield *number1;
2. @property (nonatomic, weak) Iboutlet Uitextfield *number2;
3. @property (nonatomic, weak) Iboutlet UILabel *result;

• Remind

1. The role of Iboutlet and weak will be explained later.

2. Beginners are the easiest to commit, the most should not make a mistake: the dead

Establishing control and property relations

• Hold down the Control key, drag the controls to the corresponding property with the left mouse button, and then release

• The 1th text box can be accessed using the Number1 property of Mjviewcontroller;

• The 2nd text box can be accessed using the Number2 property of Mjviewcontroller;

• Use the Mjviewcontroller Result property to access the text label on the right.

Calculation and

• Calculates the and of two text boxes in the Compute method and displays the results to the right label

1. -(void) compute

2. {

3. Gets the first value of the

4. int NUM1 = [Self.number1.text intvalue];

5. Get a second value

6. int num2 = [Self.number2.text intvalue];

7. Set the value of a text label

8. Self.result.text = [NSString stringwithformat:@ "%d", NUM1 + num2];

9. }

Relationship of UI controls and controllers

02-First iOS program-Development Steps