Three ways to create a simple interface view for iPhone Development 2 Use Xcode4 to manually build the interface

Some people say that Xcode4 provides a fully automatic build interface (For details, refer to the first article). Why do I need to use the Fully manual interface? Although Xcode provides us with a convenient and convenient UI design framework, the Framework framework has its limitations after all. In some cases, it is better to add two lines of code to make it easy and pleasant, using the Fully manual build interface helps us to better understand the attributes and methods of various controls in Cocoa touch!

 

As in the first article, we will build an identical Temperature Converter here.

1. Create an Xcode Project

For the manual creation interface, the template is not important to us. It is easy to explain here. continue to use the same Navigation-based template as the previous article, and fill in the project name. Other options are default. Here I create a project named HelloWorld2.

2. modify the structure of the project file

The new project contains HelloWorld2AppDelegate. h/HelloWorld2AppDelegate. m RootViewController. h/RootViewController. m and two xib files.

Step 1: Delete the headers, implementation files, and xib files corresponding to the RootViewController from the project, right-click the project, and choose New File... ", select" UIViewController subclass "on the Cocoa Touch tab, enter" UIViewController "(default) in subclass of next, continue" Next ", and enter the name of the created subclass, then "Save ".

Step 2: delete HelloWorld2AppDelegate. h and implement the. m file.

Step 3, find the HelloWorld2-Info.plist file, delete the file containing the Main nib file base name field to save.

After completing these three steps, the document repair work will be completed. For example

 3. manually create an interface

In the View control class you created, there is such a method called viewDidLoad. You can see that the method will be called when the view is loaded, most of the initialization work of the view is stored in this method.

Based on the Interface we designed on the drawing, we now need two labels, two input boxes, one button, and the button response method.

Step 1: Click RootViewController. h to define two UITextField controls and button-response events.

 

 

@ Interface RootViewController: UIViewController

{

IBOutlet UITextField * field1;

IBOutlet UITextField * field2;

}

-(IBAction) convert :( id) sender;

@ End

Step 2: Open the RootViewController. m file, find the ViewDidLoad method, and paste the following code into it.

 

View plainprint?

UIView * contentView = [[UIView alloc] initWithFrame: [UIScreen mainScreen] bounds]; // create a view

ContentView. backgroundColor = [UIColor whiteColor];

Self. view = contentView;

[ContentView release];

 

UIImageView * bgImageView = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @ "1.png"]; // use the specified image to initialize UIImageView

BgImageView. userInteractionEnabled = YES; // Interaction

[Self. view addSubview: bgImageView]; // Add to view

 

Field1 = [[UITextField alloc] initWithFrame: CGRectMake (130.0, 39.0, 145.0, 31.0)]; // initialize the input box

Field1.keyboardType = UIKeyboardTypeNumbersAndPunctuation; // keyboard type

Field1.borderStyle = UITextBorderStyleRoundedRect;

Field1.contentVerticalAlignment = uicontrolcontentverticalignmentcenter;

 

Field2 = [[UITextField alloc] initWithFrame: CGRectMake (130.0, 82.0, 145.0, 31.0)];

Field2.borderStyle = UITextBorderStyleRoundedRect;

Field2.enabled = NO;

Field2.contentVerticalAlignment = uicontrolcontentverticalignmentcenter;

 

UILabel * label1 = [[UILabel alloc] initWithFrame: CGRectMake (42.0, 43.0, 90.0, 21.0)]; // initialize UILabel

Label1.text = @ "Fahrenheit temperature :";

Label1.textColor = [UIColor greenColor];

Label1.backgroundColor = [UIColor clearColor];

 

UILabel * label2 = [[UILabel alloc] initWithFrame: CGRectMake (42.0, 87.0, 90.0, 21.0)];

Label2.text = @ "Celsius temperature :";

Label2.textColor = [UIColor greenColor];

Label2.backgroundColor = [UIColor clearColor];

 

UIButton * btn = [UIButton buttonWithType: UIButtonTypeRoundedRect]; // initialize UIButton

Btn. frame = CGRectMake (124.0, 142.0, 72.0, 37.0 );

[Btn setTitle: @ "convert" forState: UIControlStateNormal];

[Btn addTarget: self // sets the click RESPONSE event

Action: @ selector (convert :)

ForControlEvents: UIControlEventTouchUpInside];

 

// Add the initialized control to the view

[BgImageView addSubview: field1];

[BgImageView addSubview: field2];

[BgImageView addSubview: label1];

[BgImageView addSubview: label2];

[BgImageView addSubview: btn];

 

[Field1 release];

[Field2 release];

[Label1 release];

[Label2 release];

// Set the title

Self. title = @ "Converter ";

 

Step 3: Create a delegate class

 

Click the main. m file and enter the following code.

 

# Import <UIKit/UIKit. h>

# Import "RootViewController. h"

 

@ Interface HelloWorld2AppDelegate: NSObject <UIApplicationDelegate>

@ End

 

@ Implementation HelloWorld2AppDelegate

 

-(Void) applicationDidFinishLaunching :( UIApplication *) application

{

RootViewController * rootView = [[RootViewController alloc] init]; // create a view

UINavigationController * nav = [[UINavigationController alloc] initWithRootViewController: rootView];

UIWindow * window = [[UIWindow alloc] initWithFrame: [UIScreen mainScreen] bounds];

[Window addSubview: nav. view];

[Window makeKeyAndVisible];

}

 

@ End

Int main (int argc, char * argv [])

{

NSAID utoreleasepool * pool = [[NSAID utoreleasepool alloc] init];

Int retVal = UIApplicationMain (argc, argv, nil, @ "HelloWorld2AppDelegate ");

[Pool release];

Return retVal;

}

4. Compile and run the program

 

In this way, a fully manual Temperature Converter for creating views is newly released. Although it is more exhausting than automatic, you also know how to create controls, how to create views, how to make the views realistic, and so on, I am also familiar with the response property methods of Cocoa Touch controls. Is it a benefit for beginners?

In fact, it can also be semi-automated and semi-manual. For example, the part for creating a control can be completely completed automatically. The next article will share how to create a semi-automated and semi-manual interface file.

 

Original article, reprinted please keep this Field Source: http://blog.csdn.net/everpenny/article/details/6892008