IOS Development notes-Basic UI (3) button usage (zoom in and out, change location, first and last animation) and learning cases, iosui

IOS Development notes-Basic UI (3) button usage (zoom in and out, change location, first and last animation) and learning cases, iosui
The UIKit framework provides a lot of UI controls, but not all of them are commonly used. Some controls may not be used for one year, and some controls are used every day, such as UIButton, UILabel, UIImageView, and UITableView, the button control is a very important and basic UI control-UIButton. Generally, after you click a control, all the corresponding buttons are responded to. The buttons have many functions, it not only displays text, but also images, and can adjust the position of internal images and text at any time. Case:

Function Analysis

(1) four buttons in the lower left corner to control the position of the Avatar button (2) zoom in and out buttons in the lower right corner to control the size of the Avatar (3) the Avatar button has a background image, and text

Step Analysis

(1) Build the UI interface (2) Listen to the button and click (3) modify the attributes of the Avatar button to adjust the position and size. 1. After preparing the material Xcode5, the image material is used, click and drag. 2. After the UI design button is in the ios7 status, a setting is displayed. In the property viewer, system is selected by default for type, it is to let the system change. If it is changed to custom, it is custom. You can define the changes by yourself, instead of letting the system help us change. For example, after a graphic button is designed, the dot is highlighted in an instant, and the button is released to the original state. Click the previous icon and click it. The button is highlighted explicitly. After the button is released, change the attribute type to custom as it is to make custom modifications and modify the state config option, that is, you need to modify the highlighted status, text title, text color, and button background. Run as follows: Click it again. The highlight is not the same as before. Change it to "undo" and restore it to its original state. Set up or down four direction keys (when there are many identical controls, copy and paste them to save trouble). Remember to modify the highlighted background and click Next to change to green. Connect to the link and set the up direction for listening. Learn how to modify the properties of the control in three steps:

@property(nonatomic) CGRect frame;

Position and size of the rectangle of the control in the parent control (with the upper left corner of the parent control as the coordinate origin). You can define the position (origin), size (size), and frame itself is a struct, all the members are members of the struct attribute.

1 // 2 // ViewController. m 3 // The button uses 1 4 // 5 // Created by handsome on 15-2-28. 6 // Copyright (c) 2015 dashuai. all rights reserved. 7 // 8 9 # import "ViewController. h "10 11 @ interface ViewController () 12 @ property (weak, nonatomic) IBOutlet UIButton * HeadImageView; 13 14 @ end15 16 @ implementation ViewController17 // up direction key for Link 18-(IBAction) move19 {20 // use frame to modify the position of headimageview 21 // note that in oc, you cannot directly modify "pair 22 // frame of the "struct attribute" is a struct. orign and so on are all struct 23 // and orign is a member of the frame, it cannot be modified directly. The following statement is not correct in oc: 24 25 // self. headImageView. frame. origin. y = self. headImageView. frame. origin. y-10; 26 27 // 28 should be indirectly modified // 1. Retrieve the struct attribute 29 CGRect rect = self. headImageView. frame; 30 // 2. Modify the members in the struct. After the structure is retrieved, the frame is no longer an object 31 rect. origin. y-= 20; 32 // 3. Assign the value back, which is the three steps. This step is required. 33 self. HeadImageView. frame = rect; 34} 35 36 @ end

Step 3: retrieve the struct attribute, modify the struct member, and assign the value back.

After getting familiar with it, reconnect the four controls and change the move object method to a parameter

-(IBAction)move:(UIButton *)button

Delete the old connection, reconnect the new move method, and click the top, bottom, and left to call the move method. You only need to differentiate the methods. Tag:

@property(nonatomic) NSInteger tag;

The ID (identifier) of the control. The parent control can find the corresponding child control through tag. In the property viewer, set and modify the control button to pass the tag value, find different child controls.

Button. tag

 

Magic Number Concept (avoid hard coding)

Term: it is not a good habit for other programmers to see clearly-known numbers. In program development, you must avoid the occurrence of Magic numbers. In oc, you can use enumeration types, macro definition to avoid the appearance of magic numbers in the program. In other programming languages, it is similar to avoid hard coding.

1> the enumeration type is essentially an integer, which is used to replace magic numbers.

2> In the enumeration type, after the first integer is specified, the following numbers increase progressively.

Remember, some fixed things should be put on the subject of the program and defined in a uniform manner to avoid hard coding.

1 # import "ViewController. h "2 3 // 10 is up, 11 is down, 12 is left, 13 is right 4 // enumeration, 5 typedef enum 6 {7 kMovingDirTop = 10, 8 kMovingDirBottom, 9 kMovingDirLeft, 10 kMovingDirRight11} kMovingDir; 12 // macro definition offset 13 # define kMovingDelta 2014 15 @ interface ViewController () 16 @ property (weak, nonatomic) IBOutlet UIButton * HeadImageView; 17 18 @ end19 20 @ implementation ViewController21 // direction key for connecting 22-(IBAction) mov E :( UIButton *) button23 {24 // 1. Retrieve the struct attribute 25 CGRect rect = self. headImageView. frame; 26 // 2. Modify the members in the struct. After the structure is retrieved, the frame is no longer an object 27 switch (button. tag) {28 case kMovingDirTop: 29 rect. origin. y-= kMovingDelta; 30 break; 31 case kMovingDirBottom: 32 rect. origin. y + = kMovingDelta; 33 break; 34 case kMovingDirLeft: 35 rect. origin. x-= kMovingDelta; 36 break; 37 case kMovingDirRight: 38 rect. origin. x + = kMovingDelta; 39 bre Ak; 40 default: 41 break; 42} 43 // 3. This is the three steps. This step is required. 44 self. HeadImageView. frame = rect; 45}

The effect is as follows:

Continue. Do not mix the zoom-in and zoom-out functions with the move method, because the two types of tasks are implemented separately. Similar to location change, orign

// This location is orign, And the size is changed to the size Attribute-(IBAction) zoom :( UIButton *) button {CGRect rect = self. headImageView. frame; // if it is 1, it is enlarged; otherwise, it is reduced if (button. tag) {rect. size. height + = kMovingDelta; rect. size. width + = kMovingDelta;} else {rect. size. height-= kMovingDelta; rect. size. width-= kMovingDelta;} self. headImageView. frame = rect ;}

Oc has an automatic layout system autolayout since Xcode4.6. Because of this system, some settings and changes won't work. Apple stipulates that when the automatic layout system is used, do not use code to control the location. During the program running, the size and position of each control should be determined by the automatic layout system. So it will not change. If you remove it, it will take effect. The problem is that the origin remains unchanged when the zoom-in is reduced. Because the size attribute is changed and the origin location is not changed, remember:

1> frame can modify the position and size of an object.

2> bounds can modify the size of the object (here, bounds can be used to increase and reduce the surrounding area, rather than the origin will not change, the bounds width and border are equal! Remember first .)

3> the center can modify the object location.

-(IBAction) zoom :( UIButton *) button {CGRect rect = self. headImageView. bounds; // if it is 1, it is enlarged; otherwise, it is reduced if (button. tag) {rect. size. height + = kMovingDelta; rect. size. width + = kMovingDelta;} else {rect. size. height-= kMovingDelta; rect. size. width-= kMovingDelta;} self. headImageView. bounds = rect ;}

 

In this way, the effect is reduced by four weeks instead of the origin.

 

 

Introduce an animation effect: code implementation of the first and last animation Effects

// BeginAnimations indicates that the subsequent code will be "involved" in the animation [UIView beginAnimations: nil context: nil]; // setAnimationDuration is used to specify the animation duration [UIView setAnimationDuration: 2.0]; self. headImageView. bounds = rect ;...... // commitAnimations: Submit all animations after beginAnimation and generate an animation [UIView commitAnimations];

With the animation effect, the width and height are modified first, and then the center point is modified. You can set the duration. Before adding an animation, you can't see it very quickly.

// This location is orign, And the size is changed to the size Attribute-(IBAction) zoom :( UIButton *) button {CGRect rect = self. headImageView. bounds; // if it is 1, it is enlarged; otherwise, it is reduced if (button. tag) {rect. size. height + = kMovingDelta; rect. size. width + = kMovingDelta;} else {rect. size. height-= kMovingDelta; rect. size. width-= kMovingDelta;} // when the animation starts, all future code will be included in the animation [UIView beginAnimations: nil context: nil]; // set the animation duration to 2 seconds [UIView setAnimationDuration: 2.0]; self. headImageView. bounds = rect; // transparency in oc, 1 is completely visible, 0 is completely invisible, change the size, edge disappears effect self. headImageView. alpha = 0; // submit and generate an animation [UIView commitAnimations];}

You can also use the center property to change the object location (you can only change the location, but not the size, while orign can change the size and location)

 

About git

Click the icon in to view the modified version, which is different from the last submitted version.

 

This operation is used to submit the code version.

As shown in the following figure, m indicates that the file has been modified.

Once xcode exits, it does not work when it is used for Undo. Now git is out. It is useful to view and change the previous version, which helps improve development efficiency, correct errors, and review. When creating a project, check git. When the development stage ends, submit it to git, write comments on the pie, and view the version later. Even if xcode is disabled, the last modification can be undone after it is enabled, which is convenient. Summary: 1. cmd + shift + h is the home Key shortcut in the simulator. 2. When there are many identical controls, use copy and paste to save time, but note that, in this way, the corresponding connections will be copied together. 3. In oc, the first parameter of most control listening methods is the control itself, that is, the sender, and recall that the method name is name:. Do not drop the colon. 4, Common attributes of UIView @ Property (nonatomic, readonly) UIView * superview; get your parent control object @ property (nonatomic, readonly, copy) NSArray * subviews; obtain all of your child control objects (one parent can have multiple sons, but one son has only one parent) @ property (nonatomic) NSInteger tag; Control ID (identifier ), the parent control can use tags to find the corresponding child control @ property (nonatomic) CGAffineTransform transform; Control's deformation attributes (you can set attributes such as rotation angle, proportional scaling, and translation) @ property (nonatomic) CGRect frame; position and size of the rectangle in which the control is located in the parent control (the coordinate origin is located in the upper left corner of the parent control). location and size can be defined) @ property (nonatomic) CGRect bounds; position and size of the rectangle frame in which the control is located (the coordinate origin is in the upper left corner of the control, so the x and y values of bounds are generally 0. This attribute is amazing, for the time being, I will study it later. I can define the size, but I cannot define the position @ property (nonatomic) CGPoint center. The point position of the control (the coordinate origin is in the upper left corner of the parent control) location can be defined, and size cannot be defined Common Methods of UIView -(Void) addSubview :( UIView *) view; add a sub-control view-(void) removeFromSuperview; remove the-(UIView *) viewWithTag :( NSInteger) tag from the parent control; find the corresponding control based on a tag ID (generally sub-Control) 5. Pay attention to the pointer issue and modify the attribute. It is not the difference between the pointer and the pointer, for example:

// It should be indirectly modified // 1. Retrieve the struct attribute CGRect rect = self. headImageView. frame; // 2. Modify the members in the struct. After the Member is taken out, the frame is no longer an object rect. origin. y-= 20; // 3. Assign the value back, which is the three steps. This step is required. Self. HeadImageView. frame = rect;

If there is no third step, the attribute cannot be modified successfully. Because rect is not a pointer and the address is different from the address of the frame, the modification is complete and must be assigned back for the modification to take effect.

You can modify the struct attributes as follows:

1> use temporary variables to record the object's struct attributes

2> modify attributes of temporary variables

3> Reset the temporary variables to the object's struct attributes.

 

6. In the same project, do not duplicate code to complete similar functions. Do not copy the same code frequently. Large redundancy is caused. Make it as concise as possible.

7. After Xcode5, there will often be some inexplicable problems that cannot be solved. You can try to quit and re-open it and check again. 8. In oc, you cannot directly modify the "member" of "structure attribute" of "object", but indirectly modify it in the trilogy. 9. default in the switch statement when the value of the variable is not in any case in the branch, the statement is actually a case, it only refers to "situations other than the specified cases" and is a medium-security programming method. 10. Avoid the magic number problem. The function of enumeration is macro definition 11. Put the image material in images. in xcassets, image resources are stored in Images starting from Xcode5. management in xcassets 12. Pay attention to the usefulness of the three attributes

1> frame can modify the position and size of an object.

2> bounds can modify the object size.

3> the center can modify the object location.

 

13. First-and-last-style animation effects, transparency Setting alpha. Remember that in Apple, the animation is cheap and can easily achieve brilliant effects.

14. Getting started with git

15. If you find that you cannot modify the widget's position or size through the code, you should remove the autolayout function in the storyboard. This is a feature that has emerged since iOS6. As the name suggests, autolayout is used for automatic layout, used to constrain the widget's position and size. With this function removed, the widget's position and size are no longer limited.

16, UIButton status

Normal (normal STATE) refers to the enumerated constant corresponding to the Default condition: When the UIControlStateNormal highlighted (highlighted state) button is pressed (the finger has not been released: UIControlStateHighlighted disabled (invalid, unavailable) if the enabled attribute is NO, it is in the disable State, which means that the button cannot be clicked with the corresponding enumerated constant: UIControlStateDisabled 17. When setting the background image of a button in different states, to ensure normal display of the highlighted image, you must set the type of the button to custom (custom)