IOS Development notes-Basic UI (1)-simple calculator, iosui
(1) UI is the foundation of the App: an App should first have a UI interface, and then add practical functions on the basis of the UI (2) the UI is relatively easy to learn: UI is generally the simplest part in the learning process, and can quickly have a sense of accomplishment and Learning Interest (3) UI is crucial: most of the time in development is processing the UI
Keep in mind the IOS software development law: Everything is an object. Every element on the UI interface is an object.
IOS and android software development process
The UIKit framework is related to the UI, including labels, text, buttons, progress bars, switches, and other controls, which are encapsulated in the UIKit framework. The UIKit framework provides a variety of visual component elements, use the classes provided by the UIKit framework to create various visual component objects, and finally form a complex and beautiful UI. To facilitate developers to develop powerful functions, Apple provides a variety of frameworks (1) UIKit: User Interface for creating and managing applications (2) QuartzCore: provides animation effects and hardware rendering capabilities (3) CoreGraphics: provides a C-based API for 2D rendering (4) CoreLocation: gets location information using GPS and WIFI (5) MapKit: provides an embedded map interface for applications (6) AVFoundation: Audio and Video Processing (7 )......
When some special functions are required during development, You can first try to use the built-in framework of the system.
Through the development of a simple calculator, you can learn and understand the basic controls for IOS development.
Analysis: (1) Add the required controls and build the UI: 1 button, 3 text labels (+, =, 30 points), 2 text input boxes (2) click Event of the listener button (3) get two text box values and display the calculated final result to the text tag on the right. What is the control? What you can see on the interface can interact with each other, that is, the common control introduction of controls: UILabel-text Tag: display a string of fixed text UIButton-button: listens to user click events and responds after user clicks UITextField-text input box. The text input box can pop up with a keyboard for users to enter text content UIView: What you can see on the screen is UIView, such as buttons, text, and images on the screen. UIButton, UILabel, and UITextField all inherit from UIView. Every UIView is a container that can accommodate other uiviews (for example, the entire keyboard is a UIView, which contains many numbers with small grids) In the "addition calculator", the white full screen at the end is also a UIView, which contains many small uiviews, the view hierarchy is shown in the large white UIView. It contains 6 small uiviews (1 UIButton, 2 UITextField, and 3 UILabel ), the white Large UIView is the parent control (parent view) of the six small uiviews, and the six small uiviews are the child controls (child views) of the white Large UIView ). Every new interface is a new UIView. During the switching process, the following information is involved: 1. create and destroy a UIView. 2. Interaction between a UIView and a user (processing the click of each row in a UIView). This is the work of the View Controller viewController. The UIView is responsible for display and the controller controls the view. When a new interface is displayed, a new UIViewController object is created first, and a full-screen UIView is created. UIViewController is responsible for managing the UIView. UIViewController is the butler of UIView. It is responsible for creating, displaying, and destroying UIView, listening for internal events of UIView, and handling interaction between UIView and users. Most of the Code is written in the controller. UIViewController has a UIView attribute, that is, it is responsible for managing the UIView Object Code as follows:
@property(nonatomic,retain) UIView *view;
UI design is implemented first, and Single View pages are used for development (commonly used). Single View Application is the most suitable template for beginners.
After the project is created, Xcode automatically configures many files and automatically adds the framework on which the development depends. The arrow on understanding the storyboard shows that the interface pointed by the arrow is displayed when the program is started. Before iOS5, Apple uses the xib file to describe the UI. After iOS5, apple adopts a more enhanced and advanced storyboard file to describe the interface (Xcode5 is based on iOS7). Therefore, it can be concluded that the Main. the storyboard file can be used to modify the UI. Open the Main. storyboard file and check that there is a full-white interface, which is displayed on the simulator. To add other controls to the storyboard interface, you must display the toolbar. We recommend that you use the Nine-Cell Layout control icon to display Multiple widgets at a time, with a large field of view. Drag the required controls to the story board for UI design. After clicking a control, you can change the properties of the control in the menu toolbar on the right. Note: In the property viewer, the control does not automatically adjust its width when you change the display content of the control, double-click the control to enter the content, and the control automatically adjusts the width to adapt to the entered content. You can use the mouse to control the spacing and position, and then use the arrow keys to fine-tune each widget. Run the program using command + r and check the results. Note that the Apple APP requires that only numbers must be entered where the number should be used; otherwise, the program cannot pass. That is to say, you should enter numbers. At least the pop-up keyboard should be a numeric keyboard, not. Improvement Method: In the property viewer, locate the keyboard attribute and change it to number. Set both text input boxes. Click "computing" to perform addition calculation: Use the following edit mode and click the assistant editor to perform Association operations, The circle on the left of the method changes from hollow to solid, indicating that it has been connected to a button. In OC, the method associated with the Interface usually starts with IB (Interface builder). below is the m file:
-(IBAction) compute {NSLog (@ "click the button to calculate:"); // you can use this method to obtain the NSString * str1 = self of the two text boxes. num1.text; NSString * str2 = self. num2.text; // Add the input value // convert the text to a numerical value using intValue int result = str1.intValue + str2.intValue; // display the result to the specified tag // convert the integer to the string self. sum. text = [NSString stringWithFormat: @ "% d", result];}
Summary:
IOS program development steps:
1. Design Interface
2. Link Association
3. write code to implement functions (the most difficult and complex)
IBAction and IBOutlet1. IBAction: From the returned value perspective, the function is equivalent to void. Only the method that declares the returned value as IBAction can be connected to the control in storyboard. 2. IBOutlet is used to establish a relationship with the interface elements, it is used to modify and obtain the properties of the interface control, so it corresponds to @ property,
IBAction corresponds to a method..
Only the property declared as IBOutlet can be connected to the control in storyboard.UIViewController is responsible for program control, which is equivalent to the butler role, while UIView is responsible for interface display and contacting MVC mode. Strictly speaking, the arrow refers to a UIViewController object. The white interface inside is only the UIView attribute storyboards inside the UIViewController: essentially an xml file, you can manually set the storyboard to be loaded when the program starts. This setting indicates that the Main is loaded when the program starts. storyboard understands the concept of delayed loading and lazy loading. It is loaded into the memory only when the program needs it. The efficiency is reduced, but the memory consumption of the program is reduced, this is one of the reasons why Apple's mobile phone performance is optimized! Simple addition calculator operation process 1. read Main. storyboard file 2. create the ViewController object indicated by the arrow. 3. create the UIView object of ViewController according to the description in the storyboard file. 4. display the UIView object to the user. Now we know that ViewController should listen for button clicks. In other words, ViewController should provide a method. When a user clicks the button, call this method to notify the ViewController button to be clicked. ViewController implements anything you want to do in this method, such as calculating the sum of values in two text input boxes. Two ways to exit the keyboard ResignFirstResponder when the keyboard control (the first responder) calls this method, it can exit the keyboard endEditing. As long as the control that calls this method has the first responder, it can exit the keyboard.
Apple's official recommendation: From xcode5, put non-open attributes and method declarations in the. m file.Complete code
1 // 2 // ViewController. h 3 // addition calculator 4 // 5 // Created by handsome on 15-2-10. 6 // Copyright (c) 2015 dashuai. all rights reserved. 7 // 8 9 # import <UIKit/UIKit. h> 10 11 @ interface ViewController: UIViewController12 // declare a calculated object Method 13-(IBAction) compute; 14 // With IBOutlet, you can modify and obtain the properties of the control 15 @ property (weak, nonatomic) IBOutlet UITextField * num1; 16 @ property (weak, nonatomic) IBOutlet UITextField * num2; 17 @ property (weak, nonatomic) IBOutlet UILabel * sum; 18 @ end
1 // 2 // ViewController. m 3 // addition calculator 4 // 5 // Created by handsome on 15-2-10. 6 // Copyright (c) 2015 dashuai. all rights reserved. 7 // 8 9 # import "ViewController. h "10 11 @ interface ViewController () 12 13 @ end14 15 @ implementation ViewController16 17-(void) viewDidLoad {18 [super viewDidLoad]; 19 // Do any additional setup after loading the view, typically from a nib.20} 21 22-(void) didReceiveMemo RyWarning {23 [super didReceiveMemoryWarning]; 24 // Dispose of any resources that can be recreated.25} 26 27 // methods with IBAction can be associated with the control 28-(IBAction) compute29 {30 NSLog (@ "click the button for calculation:"); 31 // you can use this method to obtain the input values of the two text boxes: 32 NSString * str1 = self. num1.text; 33 NSString * str2 = self. num2.text; 34 // Add the input value to 35 // convert the text to a value using the intValue method 36 int result = str1.intValue + str2.intValue; 37 // display the result to the specified tag 38 // convert the integer to 39 self. sum. Text = [NSString stringWithFormat: @ "% d", result]; 40 // remember the habit of designing an OOP 41 // disable the keyboard 42 // that is to say: Who creates an object, who is responsible for destroying objects, because of the mobile phone memory, the land of money! 43 // who opens the keyboard and who closes the keyboard 44 45 // call the first responder, that is, the control that opens the keyboard and closes the keyboard 46 // [self. num1 resignFirstResponder]; 47 // [self. num2 resignFirstResponder]; 48 49 // or use the method of forcibly disabling the keyboard, YES or NO50 [self. view endEditing: YES]; 51 // NO can also be disabled, but there is a difference with YES, involving the problem of multithreading! If you don't have to worry about it, you can always write it as YES. If it is NO, it will not be able to be closed in some situations. 52} 53 @ end