IPhone development entry (4) --- step 1 of Application Development

At the beginning of this review, we will introduce how to develop the actual iPhone application.

Create an Xcode Project

Now let's start the first iPhone application. Start Xcode and click "file"> "new project..." in the Xcode menu ...」.

 

Select View-Based Application from the template 」

Select View-Based Application for the template 」. This example shows the application BargainSale that has logged on to the App Store. It is an application that automatically calculates the discount price. After obtaining the name "BargainSale", select Save.

After saving, the project and source code files are generated based on the selected template. Let's take a look at all of them.

Source code file

 

The automatically generated. h and. m files are saved in the Classes directory on the left. They are Objective-C header files and source code files.

XIB File

The XIB file is a file that records the composition and configuration of the application screen. In the Resources directory. Using Cocoa Touch to develop programs, editing XIB files is the most basic. When editing the XIB file, you can use "Interface Builder" to easily drag various controls on the screen.

 

XIB file and Interface Builder

Resource file

Other files used to create applications are resource files. XIB files are also a type of resource files, which are listed separately because they are important. Simple Applications may not need any resource files, but as the complexity of the Program increases, it is also important to manage the resource files.

Interface Builder

As mentioned above, the "Interface Builder" attached to Xcode is used to edit the XIB file. Double-click the XIB file in Xcode to automatically start Interface Builder.

After Interface Builder is started, Click Tools> Library to open the help of the standard container Library. The various components used in Cocoa Touch development are listed here. Through Library → Cocoa Touch Plugin → Inputs & Values, you can gain a deeper understanding of the use of various components.

 

Select a library from the menu

For example, the Label control that represents the Text, the Round Rect Button, and the Text Field Text box. You can drag your favorite widget to your configuration.

 

Configure control labels

First, we use the "Label" Control for text representation.

 

Label Control

At first, the control displays the Label letters by default. Here we double-click it and change it to "123456789 」.

 

Text Field

Next, we will drag the Text Field control to the View.

 

Text Field

When you click Text Field on the iPhone, the keyboard is displayed. The standard keyboard is for text input. Here, it is limited to a numeric keyboard because it is only for price input.

 

To change the default settings of Text Field, Click Tools → Inspector in the Interface Builder menu bar.

 

Inspector

In Inspector, you can change the attributes of various controls.

 

There are four tab buttons on the top of the Inspector. When setting control properties, select the leftmost tab. Here, you only need to enter a Number for Text Field, so select "Keyboard Type" of the Keyboard Type "Number Pad.

 

KeyBoard Type

Segmented Control

Segmented Control is a one-to-one button. Here, we use it to indicate the ratio of various discounts.

 

Segmented Control

After configuration, you can set different options. First, set four discount rates. In Inspector's Segments, select 4.

 

Next, set the ratio of different discounts. Double-click different Segmented Control buttons to set the discount text.

Compilation and Testing

So far, we have configured the most basic controls. You may notice that these controls are placed in the upper half of the screen. When you run the program, you will understand the reason. Compile it first. Click "compile" in Xcode and save the current project to start compilation.

After compilation, start the iPhone simulator and you will be able to see the configured program interface. Note that on the iPhone simulator, the mouse replaces the touch action on the actual device.

Click the Segmented Control, select 20%, and then confirm. Or click the Text Field control. The keyboard is displayed.

 

As previously set in Segmented Control, only the numeric keypad is displayed. This keyboard occupies the field below the screen. This is exactly why we just configured all the controls on the top of the screen.

If you configure the controls to the lower half of the screen and use the keyboard, these controls will be overwritten by the keyboard. Therefore, when you use a keyboard, we recommend that you set all the controls to the top of the screen. Otherwise, you need to dynamically change the control position, which is troublesome.

 

This time, we mainly learned how to configure and use controls. Next time, we will calculate and represent the input price to the discount price. For example:

Author: Yi Feiyang