The first iPhone program developed based on xcode4: "Hello World"

ArticleDirectory

• Display text of a specific font and size on the screen
• Display text in the center of the screen
• Familiar with xcode 4
• Create a new project
• Select a new project template
• Basic Project Options
• Select storage path
• Project created
• Trial Run Project
• Edit interface files
• Set label Control Properties
• Set the label control size and position
• Supports device Rotation

Project requirements

Write an iPhoneProgramThe text "Hello word", bold, 26-pound font size, red font color, black shadow, the top left corner of the Shadow light source, 1 pixel offset, supports device rotation.

Requirement Analysis

Before we start, let's first analyze the project requirements. This is a very simple project. As long as a piece of "Hello World" text is displayed on the screen, there are also some additional conditions:

• Requirements on font, font color, font size, shadow effect
• Requires text to be displayed in the middle of the screen
• Supports device rotation, and text is displayed in the center of the screen no matter how the device rotates

Based on these requirements, we will gradually implement the process from simple to complex, and divide it into two steps:

1. Display text on the screen, set the font and font size, so that the text is displayed in the center of the screen
2. Supports device rotation and ensures that the text is still in the center status after rotation.

Product Design

The screen before iPhone 4 is 320x480. By the time it reaches iPhone 4, the screen resolution is 640x960. The iPhone supports four directions of rotation. The horizontal and vertical screen performances are slightly different. Because the project requirements require that screen rotation be supported, the horizontal and vertical screens have different interface performances, A simple prototype design diagram is as follows:

System Analysis and Design

If we do not have development experience in iOS, we need to first read some relevant information to let us know how to develop an iPhone program. Apple provides a very detailed and comprehensive website for iOS developers: "iOS Developer Center" at http://developer.apple.com/ios. In the IOS Dev Center, there are all the class documents, Getting Started documents, various development guides, and examples of the ios sdk.CodeLibrary, develop iOS platform projects, and always come up with relevant materials. However, it is a pity that at present, the documents and materials for iOS Dev center are mainly in English and there are few Chinese documents, which is a test for students who cannot read English well.

Now, we will analyze how to implement project requirements from a technical perspective. There are no doubt many technical solutions for the same project. Therefore, we need to set a principle to help us select an appropriate solution. This principle is a simple and practical principle: "We try our best to adopt simple and practical technical solutions, avoid using complicated technical solutions, and waste our time and energy on some flashy techniques." based on this principle, let's start to select technical solutions for project requirements:

Display text of a specific font and size on the screen

To display texts of a specific font and size on the screen, we need to first check whether the ios sdk provides a simple and practical way to display the text. In the IOS Dev center, there is an article "iOS Human Interface Guidelines", which specifically explains the knowledge of the user interface in IOS. From this article, we can systematically understand the composition of the IOS interface and various basic interface elements, according to the instructions, we can find that the uilabel control is the most suitable control for our project needs. Of course, there are also complicated technical solutions, that is, the method of self-painting on the interface, based on the simple and practical principle, we can use the uilabel IOS built-in control.

Before using uilabel, we need to first learn about the uilabel control and find "uilabel class reference" in IOS Dev center ", we can see the introduction of uilabel and detailed descriptions of all attributes and methods.

The document is quite comprehensive, but for us, the key is to get project-related information. From the document, we can find the relevant attributes we need to display text one by one:

• Text: The text displayed by the label. The type is nsstring, that is, "Hello World" to be displayed in the project requirement ".
• Textalignment: The mode of text in the label. The type is uitextalignment enumeration. In this project requirement, the text must be displayed in the middle of the screen, and the corresponding property value is uitextalignmentcenter.
• Font: Text font and size, type uifont class, that is, the requirements of this project: "The font is bold, the font size is 26 lbs", the corresponding code is:[UifontBoldsystemfontofsize:26].
• Textcolor: Text color, type: uicolor class, that is, the requirement of this project: "font color red", corresponding code:[UicolorRedcolor].
• Shadowcolor: The shadow color of the label text, type: uicolor class, that is, the requirement of this project: "Black Shadow", corresponding code:[UicolorBlackcolor].
• Shadowoffset: The offset direction and offset of the label text shadow. The type is cgsize, which is required in this project: "The Shadow light source is in the upper left corner and the offset is 1 pixel." The corresponding code is:[Cgsizemake (1,1)].

Display text in the center of the screen

To display the text in the center of the screen, we should first set the uilabel-related attributes to achieve the goal. If the uilabel-related attributes are not supported, then we must calculate the coordinates of uilabel based on the size of uilabel and the screen size, so that the text is displayed in the center of the screen. In the uilabel document, we did not find any property to set its coordinates or its attributes. Does this mean that uilabel does not support it? Do not ignore a problem.Programming LanguageIt is objective-C, a language that is similar to C language that supports object-oriented features. Object-oriented has a very important feature called inheritance. Similarly, for the uilabel class, it has a parent class, that is, the attributes supported by the uilabel parent class. uilabel is supported. on the homepage of the uilabel document, we can see that uilabel is inherited from the uiview, therefore, we can link to the "uiview class reference" document.

From the document, we can find two important attributes to display text in the middle of the screen:

• Frame: The location and size attributes of the label. The type is cgrect. In this project requirement, the size value of the frame attribute of the label control must be displayed in the middle of the screen, the X and Y coordinates are calculated based on the size of the main interface to ensure that the label is displayed in the center of the screen.
• Autoresizingmask: This attribute indicates how the widget automatically adjusts its size or the top, bottom, and left margins when its parent container size changes.

Supports screen Rotation

By default, the iPhone does not support screen rotation. How can I make the interface support rotation? In the IOS Dev center, you can find "View Controller Programming Guide for iOS ", in the "m view controllers" section, there is a special section "Management A View Controller's interface orientation", which explains how to enable device rotation on your iOS interface:

• Override the "shouldautorotatetointerfaceorientation:" method of the corresponding View Controller and declare the supported direction in the method.
• Configure the autoresizingmask attribute of the view in the corresponding View Controller to adapt to layout changes caused by PAGE rotation. In this project, the device must be rotated to ensure that the text is centered. With this attribute, the width and height of the form can be changed after the page is rotated, uilabel can still be centered.

Familiar with xcode 4 in project development

After preliminary preparation, you can now start the actual project development based on xcode4. For xcode4, find "xcode 4 User Guide" in IOS Dev center. This is a detailed description and user guide for xcode 4.

In xcode 4, it integrates the interface builder software originally used to edit the Mac or IOS project interface, the "xcode 4 User Guide" consists of "Designing user interfaces in xcode" to describe how to edit the interface in xcode 4.

Create a new project

After xcode4 is started, a welcome window is displayed. Click "Create a New xcode project" to create a project.

You can also create a new project by using the menu or shortcut.

Select a new project template

Xcode4 provides several project templates by default to facilitate project generation:

• Navigation-based application: This template is applicable to applications that require UI navigation. Applications generated based on this template include a navigation bar that displays a list of items.
• OpenGL ES Application: This template is applicable to OpenGL ES-based applications, such as game programs. An Application Generated Based on this template, With a view for outputting OpenGL ES scenarios and a view supporting Animation
• Splite view-based application: This template is suitable for iPad apps that need to use the left and right column view. Based on the Application generated by this template, an interface control for left and right columns is provided.
• Tab bar application: This template is applicable to applications that use tabs. Applications generated based on this template have tabs by default.
• Utility application: This template is applicable to an application that has a main interface and an information page. Based on the Application generated by this template, there is an information button on the main interface, and after clicking it, there is a flip animation, switch to another information interface
• View-based application: This template is applicable to applications with a single interface. An Application Generated Based on this template has only one blank interface view.
• Window-based application: This template applies to blank applications. An Application Generated Based on this template has only one form and no view. You must manually add

For our hello World project, the most suitable project template is "View-based application". We only need to create a single application with a blank view based on it, then, drag the uilabel to implement the basic functions.

Basic Project Options

Click Next to go to the "Choose Options for your new project" Page. Here, you can select the basic options for setting the project, where:

• Product Name: Indicates the product name. In this project, we name it "Hello World"
• Company identifier: Company identifier. Generally, the naming rule is "com. Company Name"
• Bundle identifier: Indicates the package identifier, which is used to uniquely identify an application. It is generated by combining the company identifier and product name by default.
• Device Family: Indicates the device types supported by the app. There are three options: iPhone, iPad, and universal (for iPhone and iPad)
• Include unite tests: Whether to include the unit test code template. If checked, xcode will help generate the unit test code template.

Select storage path

Click Next To Go To The file storage path selection page. Here, you can select the directory of the project to be stored.

Project created

Click "CREATE". The project is created. The project window is displayed.

Trial Run Project

After the above steps, we have created a project based on the template. Before starting the development, we can try to test the project first to see the effect. Click the "run" button in the upper-left corner of xcode. xcode starts to compile the project. After the compilation is complete, the iPhone simulator will pop up and run the project in the simulator, of course, we can only see a blank interface when the project is running.

Click "stop" in the upper left corner of xcode to stop running the project.

Edit interface files

Generally, a new project contains one or more interface files. These interface files are called "nib Files" with the extension of nib or XIB. Alternatively, when you create a new view controller through the wizard, xcode will contain a corresponding NIB file, a header file, and an implementation file. In the hello World project we just created with the view-based application template, "hello_worldviewcontroller.xib" is the NIB file on the main interface.

Select the "hello_worldviewcontroller.xib" file on the left side of xcode, and click "hide or show the Navigator" and "hide or show the utilities" on the toolbar to hide the left navigator area and display the utility area, in this way, you can start to edit the interface in xcode 4.

Add a label to the interface

From the object library, find the required label control object and drag it to the main interface to add the label control.

Set label Control Properties

Select the newly added label control, click "show the attributes inspector" in the Inspector selector bar area, switch to the property editing page, and set the following attributes respectively:

• Text: Enter "Hello World"
• Alignment: Select center alignment
• Font: Select "helvetical bold 26.0"
• Text color: Select red
• Shadow: Select black color)
• Shadow offset: Enter 1 for the values of horizontal and vertical respectively.

Set the label control size and position

After setting the label attributes in the preceding steps, we found that the text is very small and the display is incomplete, not the selected font size. This is because uilabel has an attribute "adjustsfontsizetofitwidth ", the default value is "yes". If the value of this attribute is yes and the numberoflines attribute value of the label is 1, it will automatically adjust the font size based on the label width, and use the new label added by xcode, the default width is relatively small. The font size of the 26-pound font cannot be fully displayed, so the font size is automatically adjusted, resulting in different display and our expectation. To solve this problem, we need to reset the label width so that it can display the complete text.

Select the newly added label control and click the "show the size inspector" button in the Inspector selector bar area to switch to the dimension and position settings page and adjust the width, here, we set a sufficient width and height for the label: 200x40 to ensure that the font will not be reduced.

Next, adjust the label position so that it is displayed in the center of the screen. In xcode, drag the label with the mouse. During the drag process, xcode has guides to help locate the problem, so you can easily find the center position. Of course, you can also obtain the label through simple calculation. If you want to display the label in the center of the center, the coordinates should be: x = (screen width-label width)/2 = (320-200) /2 = 60; y = (screen height-Status Bar Height-label height)/2 = (480-20-40)/2 = 210;

Save the modified XIB file, run the project, and check the effect.

In this way, we have completed the first step: display text on the screen, set the font and font size, so that the text is displayed in the center of the screen. Next, let's make it support rotation, and after rotation, the text is still displayed in the center of the screen.

Supports device Rotation

We have learned how to support device promotion as follows:

• Override the "shouldautorotatetointerfaceorientation:" method of the corresponding View Controller and declare the supported direction in the method. That is, first rewrite the "shouldautorotatetointerfaceorientation:" method in "hello_worldviewcontroller.m ".
• Configure the autoresizingmask attribute of the view in the corresponding View Controller to adapt to layout changes caused by PAGE rotation. That is, you must set the autoresizingmask attribute of the label control.

In the interface file, select the label. On the size and position settings page, click the Red Line in autosizing to set the label to automatically adjust the width and height of the top, bottom, and left directions, in this way, after the device is rotated, the width and height of the interface are changed, and the position, length, and width of the upper, lower, and left directions of the control are also adjusted, the text is centered and aligned inside the label to ensure that the text is displayed in the center of the interface.

Click the "hide or show the Navigator" and "hide or show the utilities" buttons on the toolbar to display the left navigator area, hide the utility area, and select the "hello_worldviewcontroller.m" file in the left navigator area, find the "shouldautorotatetointerfaceorientation:" method and rewrite it. After rewriting, the Code is as follows:

-( Bool ) Shouldautorotatetointerfaceorientation :( Uiinterfaceorientation ) Interfaceorientation {// return YES For supported orientations return YES ; }

Save the changes, run the project, and bring up the simulator. Call the simulator's device rotation menu to turn the iPhone simulator into a horizontal screen. The text will automatically adjust the position, or in the center of the screen.

So far, we have met all the project requirements.

Project Summary

Through the simple project Hello world, we learned how to analyze and develop IOS projects based on xcode 4 and how to obtain required information through IOS Dev center.

source code download: https://github.com/JimLiu/The-practice-of-iPhone-application-development/tree/master/Hello%20World