IOS Development Notes-Basic UI (1)-Simple calculator

(1) The UI is the foundation of the app: an app should have a UI interface first, and then add useful functionality on top of the UI(2) The UI is relatively easy to learn: The UI is generally the simplest piece of learning, with a quick sense of accomplishment and learning Interest (3) UI is critical: Most of the time in development is working with the UI

Remember an iOS software development law: Everything is an object, and every element on the UI interface is an object

Ios,android Software Development process

Uikit framework is related to the UI, tags, text, buttons, progress bars, switches and other controls are encapsulated inside the Uikit framework, Uikit Framework provides a variety of visual component elements, using the Uikit framework provides classes to create a variety of visual component objects, Finally, a complex and beautiful UI interface is formed. To make it easy for developers to develop powerful features, Apple offers a variety of frameworks (1) UIKit: User interface for creating and managing Applications (2) Quartzcore: Provides animated effects and the ability to render through hardware (3) Coregraphics: C-based API for 2D rendering (4) Corelocation: Get location information using GPS and WiFi (5) Mapkit: An interface that provides an inline map for an application (6) Avfoundation: Audio, Video processing (7) ... ...

When you need to use some special features in the development process, you can first try using the system's own framework.

Learn and understand the underlying controls for iOS development with a simple calculator development

Analysis: (1) Add the required controls, set up the UI interface: a button, 3 text labels (+,=, 30 positions), 2 text input boxes (2) Click events for the Listener button (3) Get 2 text box values, display the calculated final result to the text label on the rightWhat is a control? What can be seen on the interface, which is interactive, is the controlcommon controls are described in:uilabel-Text Tags: display a string of fixed text uibutton– button:listen to the user's click events and respond after the user clicks uitextfield– text input box, text input box can pop up the keyboard, let the user enter text content UIView:What can be seen on the screen is UIView, such as buttons on the screen, text, pictures,The general translation is called: View \ Control \ Component. UIButton, UILabel and Uitextfield all inherit from UIView,each uiview is a container that can accommodate other uiview (for example, the entire keyboard is a uiview, which holds many small squares of digital UIView) In the "addition Calculator", the back of the white full-screen thing is also a uiview, white large uiview accommodates a lot of small uiview, the view hierarchy as shown in the large white UIView, accommodates 6 small uiview (1 UIButton, 2 Uitextfield, 3 Uilabel),The large white UIView is a parent control of 6 small uiview (parent view), and 6 small uiview are white large uiview child controls (child views). Each new interface is a new UIView, which involves: 1, UIView creation and destruction during the switchover process.2, UIView with the user's interaction (processing UIView internal each row of clicks)This is the work of the View controller Viewcontroller, UIView is responsible for displaying the controller to control the view. Whenever a new interface is displayed, a new Uiviewcontroller object is created first, and then a corresponding full-screen Uiview,uiviewcontroller is created to manage the UIView. Uiviewcontroller is UIView's big housekeeper, responsible for creating, displaying, destroying uiview, monitoring events within UIView, and handling UIView interactions with users. Most of the code is written on the controller. There is a UIView attribute inside the Uiviewcontroller that is responsible for managing the UIView object code as follows:

@property (Nonatomic,retain) UIView *view;

UI Design First, using a single view page for development (commonly used), the one viewapplication is the most suitable template for beginners
After the project is created, Xcode automatically helps us to do a lot of configuration, but also automatically generated a lot of files,you can also automatically add frameworks that your development relies on. know the story boardThe arrows indicate that the interface indicated by the arrows will be displayed when the program startsbefore 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 based on iOS7),Therefore, it can be concluded that modifying the Main.storyboard file in a project modifies the UI interface. Open the Main.storyboard file look, there is an all-white interface, this interface is the simulator display interface.Add other controls to the storyboard interface to display the toolbarWe recommend that you use nine to arrange the control icons so that you can see more controls at once and have a large view. Drag and drop the required controls onto the storyboard for UI design. When you click to select 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, and the control automatically adjusts its width to fit the content that is filled in by changing the contents of the control's display.each control, not only can control the spacing and position with the mouse, also can select after, use the direction key to fine-tune. use command+r to run the program to see the effect Note that the Apple APP review rules that you must only enter a number where the number should be used, otherwise it cannot be passed. that is, you should have entered a number, at least the keyboard that pops up should be the numeric keypad, not. Improved method: In the property Viewer, locate the keyboard property and modify it to number. Two text input boxes are all set up.The following implementation, click on the button "calculation", the calculation of the addition:Using one of the following editing modes, click the Assistant editor to associate the operation, The circle on the left side of the method is filled with a hollow, indicating that a button has been wired In OC, the method associated with the interface, usually beginning with IB (Interface builder), below is the dot m file:

-(ibaction) compute{NSLog (@"Click the button to calculate:"); //with this method, you get the input values of two text boxesNSString *STR1 =Self.num1.text; NSString*STR2 =Self.num2.text; //Add the value of the input//convert text to numeric using Intvalue    intresult = Str1.intvalue +Str2.intvalue; //Show the results to the specified label//convert an integer to a stringSelf.sum.text = [NSString stringWithFormat:@"%d", result];}

Summary :

Development steps for IOS programs:

1. Design interface

2. Link connection

3, Write code implementation function (most difficult, most complex)

Ibaction and Iboutlet1, Ibaction, from the return value angle, the function is equivalent to void, only the return value is declared as Ibaction method, can be connected with the control in Storyboard 2, Iboutlet used to establish a relationship with the interface elements, to modify, to obtain the properties of the interface control, So it corresponds to the @property, and Ibaction corresponds to a method。 only properties declared as Iboutlet can be wired to the controls in storyboard. Uiviewcontroller is responsible for the control of the program, equivalent to the role of the housekeeper, while UIView is responsible for the interface display, contact MVC mode. Strictly speaking, the arrow refers to a Uiviewcontroller object, inside the white interface is only the UIView property of the Uiviewcontroller interiorStory Board: The essence is an XML file that can be manually set when the program starts to load the storyboard which this setting indicates: The program will load when it starts Main.storyboardUnderstanding the concept of lazy loading and lazily loadingWhen the program needs to be loaded into the memory, the efficiency is lower, but the memory consumption of the program is small, this is the Apple phone performance optimization of one of the good reasons!The simple addition calculator runs the process1. Read the Main.storyboard file 2. Create the Viewcontroller object that the arrow refers to 3. UIView object created Viewcontroller as described in Storyboard file 4. Display the UIView object in front of the user Now you know: it should be viewcontroller to listen to the click of the button,in other words, Viewcontroller should provide a way out when the user taps the button and calls this method to notify the Viewcontroller button to be clicked. Viewcontroller does whatever it wants to do in this method, such as calculating the value of 2 text input boxes. two ways to exit the keyboard Resignfirstresponder when the control that called the keyboard (the first responder) calls this method, it can exit the keyboard endediting as long as there is a first responder inside the control that calls this method, you can exit the keyboard Apple's official recommendation: To start with XCODE5, declare the properties and methods that are not open and put them in the. m file. Full code

1 //2 //ViewController.h3 //Addition Calculator4 //5 //Created by the handsome on 15-2-10.6 //Copyright (c) 2015 Dashuai. All rights reserved.7 //8 9 #import<UIKit/UIKit.h>Ten  One @interfaceViewcontroller:uiviewcontroller A //declaring a computed object method --(ibaction) compute; - //with Iboutlet to modify and get properties of the control the@property (Weak, nonatomic) Iboutlet Uitextfield *NUM1; -@property (Weak, nonatomic) Iboutlet Uitextfield *num2; -@property (Weak, nonatomic) Iboutlet UILabel *sum; - @end

1 //2 //VIEWCONTROLLER.M3 //Addition Calculator4 //5 //Created by the handsome on 15-2-10.6 //Copyright (c) 2015 Dashuai. All rights reserved.7 //8 9 #import "ViewController.h"Ten  One @interfaceViewcontroller () A  - @end -  the @implementationViewcontroller -  -- (void) Viewdidload { - [Super Viewdidload]; +     //additional setup after loading the view, typically from a nib. - } +  A- (void) didreceivememorywarning { at [Super didreceivememorywarning]; -     //Dispose of any resources the can be recreated. - } -  - //a method with Ibaction to associate with a control --(ibaction) Compute in { -NSLog (@"Click the button to calculate:"); to     //with this method, you get the input values of two text boxes +NSString *STR1 =Self.num1.text; -NSString *STR2 =Self.num2.text; the     //Add the value of the input *     //convert text to numeric using the Intvalue method $     intresult = Str1.intvalue +Str2.intvalue;Panax Notoginseng     //Show the results to the specified label -     //convert an integer to a string theSelf.sum.text = [NSString stringWithFormat:@"%d", result]; +     //remember a custom rule for OOP design A     //turn off the keyboard the     //that is to say: "Who created the object, who is responsible for destroying the object, because the phone memory, the amount of gold!"  +     //who turned on the keyboard, who turned off the keyboard -      $     //Call the first responder, which is the control that opens the keyboard, turns off the keyboard $     //[Self.num1 Resignfirstresponder]; -     //[self.num2 Resignfirstresponder]; -      the     //or use the method of forcing the keyboard off, YES or NO - [Self.view Endediting:yes];Wuyi     //No can also be closed, but there is a difference with YES, involving the problem of multithreading! If you don't tangle, always write YES. If it is NO, discouragement certain scenarios, it may not be able to close.  the } - @end

IOS Development Notes-Basic UI (1)-Simple calculator