IOS Development Note-use of the basic UI (3) button (zoom out, change position, first animation) and study case

Source: Internet
Author: User

The Uikit framework provides a very wide range of UI controls, but not every one is often used, some controls may not be available for 1 years, and some controls are used every day, such as UIButton, UILabel, Uiimageview, UITableView, etc. A button control is a very important and relatively basic UI control---UIButton, in general, after clicking on a control, the corresponding response is a button, the function of the button is more, can display text, but also can display pictures, and can adjust the position of internal pictures and text at any time. Case:

Functional analysis

(1) The lower left corner of the 4-direction button, control the position of the Avatar button (2) The lower right corner is the zoom, zoom Out button, control the size of the Avatar (3) Avatar button Both background image, and text

Step analysis

(1) Build UI Interface (2) monitor button click (3) Modify the Avatar button properties to adjust the position and size 1, first prepare the material Xcode5, are the picture material, unified into the click, drag and Drop 2, UI Design button click state after iOS7, the appearance of a setting, In the property Viewer, type under the default choice is system, that is, let the systems to change, if you change to custom, is customized, you can define the change, and not let the system to help us change. For example: After the design of a picture-style button, the moment of the point is highlighted, release is restored to the original. Click before the appearance of click Down, the button explicit highlighting state, released, reply to the original attribute type to custom, to customize the modification, while modifying the State config option, that is, to modify the highlight status, as well as modify the text title, text color, button background and so on. As follows: Run, click again, highlight is not the same as before, changed to: After release, restore the original. Set up and down four arrow keys (when the same controls are a lot of time, use copy, paste, more convenient), and remember to change the background in the highlighted state, click and turn green. Connect, listen first set up direction, learn the process of modifying control properties three steps:
@property (nonatomic) cgrect frame;
The position and dimensions of the control's rectangle in the parent control (in the upper-left corner of the parent control are the coordinate origin), you can define the location (origin), the size, and the frame itself is the struct, and the members are members of the struct properties.
1 //2 //VIEWCONTROLLER.M3 //button Use 14 //5 //Created by the handsome on 15-2-28.6 //Copyright (c) 2015 Dashuai. All rights reserved.7 //8 9 #import "ViewController.h"Ten  One @interfaceViewcontroller () A@property (Weak, nonatomic) Iboutlet UIButton *Headimageview; -  - @end the  - @implementationViewcontroller - //uparrow keys to connect --(ibaction) Move + { -     //use frame to modify the location of Headimageview +     //Note that in OC, you cannot directly modify the members of the struct properties of the object A     //frame is the structure, inside the orign and so on are the structure of the body at     //and, here Orign is a member of the frame, not directly to modify, the following writing in OC is not right -      -   //Self . HEADIMAGEVIEW.FRAME.ORIGIN.Y = self. headimageview.frame.origin.y-10; -      -     //should be indirectly modified -     //1. Remove Structure Properties inCGRect rect =Self . Headimageview.frame; -     //2, modify the members inside the structure, at this time after the frame is not an object toRECT.ORIGIN.Y-= -; +     //3, the value of the return, is the three steps. Must have this step.  -Self. Headimageview.frame =rect; the } *  $ @end

Three steps: Take out the structure properties, modify the members of the struct, and assign the values back.

Good, familiar, reconnect four controls, change the Move object method to a parameter

-(Ibaction) Move: (UIButton *) button

Delete the old connection, reconnect the new Move method, click Up or down, you can call the Move method, as long as you can distinguish between the line. Use tag:

@property (nonatomic) nsinteger tag;

The ID of the control (identity), the parent control can find the corresponding child control through tag, in the property viewer, then set the change to let the control button through the value of the tag, to find different child controls.

Button.tag

The concept of magic numbers (avoid hard coding)

Terminology: Other programmers see, can not see the number of known, not good habits, in the development of the program need to avoid the magic number, in OC, you can use the enumeration type, macro definition to avoid the occurrence of magic numbers in the program. In some other programming languages, it is similar to avoid hard coding.

The 1> enumeration type is essentially an integer that is used to replace the magic number

2> enumeration type, after the first integer is specified, the subsequent number is incremented

Remember, some of the dead things, unified on the program body, unified definition, avoid hard coding

1 #import "ViewController.h"2 3 //10 is up,11 is down,12 is left,13 is right4 //enumeration,5typedefenum6 {7Kmovingdirtop =Ten,8 Kmovingdirbottom,9 Kmovingdirleft,Ten Kmovingdirright One } kmovingdir; A //macro Definition Offset - #defineKmovingdelta 20 -  the @interfaceViewcontroller () -@property (Weak, nonatomic) Iboutlet UIButton *Headimageview; -  - @end +  - @implementationViewcontroller + //arrow keys to connect A-(Ibaction) Move: (UIButton *) button at { -     //1. Remove Structure Properties -CGRect rect =Self . Headimageview.frame; -     //2, modify the members inside the structure, at this time after the frame is not an object -     Switch(Button.tag) { -          CaseKmovingdirtop: inRECT.ORIGIN.Y-=Kmovingdelta; -              Break; to          CaseKmovingdirbottom: +RECT.ORIGIN.Y + =Kmovingdelta; -              Break; the          CaseKmovingdirleft: *Rect.origin.x-=Kmovingdelta; $              Break;Panax Notoginseng          CaseKmovingdirright: -Rect.origin.x + =Kmovingdelta; the              Break; +         default: A              Break; the     } +     //3, the value of the return, is the three steps. Must have this step.  -Self. Headimageview.frame =rect; $}

The effect is as follows:

Continue, zoom in and out of the functional implementation do not mix with the Move method, because there are two kinds of things to achieve. A similar change in position, orign
 //  The position is orign, and the size is the sized property -( ibaction) Zoom: (UIButton * = //  if 1, zoom in or zoom out  if   (Button.tag) {rect.size.height  += += Kmovingdelta;   else   {rect.size.height -= Kmovingdelta;    Rect.size.width -= Kmovingdelta; } self. Headimageview.frame  = rect;}  
OC starting from Xcode4.6, there is an automatic layout system AutoLayout, because of this system, some settings and changes will not work, Apple rules, when using the automatic layout system, do not use the code to control the location. The size and position of each control should be assigned to the automatic layout system during the program's run. So there is no change. Hook it off, it's going to work. So the problem is, the original point is not changed when zoomed out. Because the Size property is changed, the origin location is not changed, remember:

1> frame can modify the object's position and size

2> bounds can modify the size of the object ( using bounds here can achieve a four-week enlargement, rather than the origin of the same, bounds the width of the height and the border is equal!) Remember first. )

3> Center can modify the position of an object

-(ibaction) Zoom: (UIButton *) button {    = self . headimageview.bounds;     // if 1, then zoom in or    zoom Out if (Button.tag) {        + = Kmovingdelta        ; + = Kmovingdelta    ; Else {        -= Kmovingdelta        ; -= Kmovingdelta    ;        } = rect;}

The effect of this modification is four weeks of shrinking, not the same as the origin.

Describes an animation effect: the end-to-end animation effect code implementation
// beginanimations indicates that subsequent code will "participate in" the animation [UIView Beginanimations:nil context:nil]; // setanimationduration used to specify the duration of the animation [UIView setanimationduration:2.0= rect; // Commitanimations, commits and generates animations for all animations after BeginAnimation [UIView commitanimations];

After the animation effect, it is to modify the width and height first, and then modify the center point, you can set the duration of the time. Not animated before, not to be seen, soon.

//the location is Orign, and the Size property is-(ibaction) Zoom: (UIButton *) button {CGRect rect=Self .    Headimageview.bounds; //if 1, then zoom in or zoom out    if(Button.tag) {rect.size.height+=Kmovingdelta; Rect.size.width+=Kmovingdelta; } Else{rect.size.height-=Kmovingdelta; Rect.size.width-=Kmovingdelta; }    //The animation starts, the future code all participates in the animation[UIView Beginanimations:nil Context:nil]; //Setting the animation duration 2 seconds[UIView setanimationduration:2.0]; Self. Headimageview.bounds=rect; //OC Transparency, 1 is completely seen, 0 is completely invisible, varying in size, the effect of vanishing sideSelf. Headimageview.alpha =0; //submit, and generate animations[UIView commitanimations];}

You can also use the Center property to change the position of the object (only the position can be changed, the size cannot be changed, and the orign changes size and position)

About Git

Click on the flag, you can view and the last submitted version of the same place, that is, the view of the modified situation

By doing this, you implement the version submission of the code

as follows, a file followed by m indicates that the file has been modified.

Once Xcode exits, the use of undo is no use, then Git comes out, by looking at and the last version of the changes, it is useful to help improve development efficiency, and change the wrong, review. So when creating a project, to tick git, when the phased development is over, choose to commit to git, cookies write comments, the next time through the version view. Even if you close Xcode, it is convenient to undo the last modification after opening. Summary: 1, Cmd+shift+h is the simulator in the Home Health shortcut key 2, when the same control a lot of time, the use of copy, paste, more convenient, but attention,This will also make the corresponding connection to the copy. 3, OC, most of the control's listening method is the first parameter of the control itself, that is sender sender, and recall, the method name is name: do not throw a colon. 4. Common Properties of UIView @property (nonatomic,readonly) UIView *superview; Get your own parent control object @property (nonatomic,readonly,copy) Nsarray *subviews; Get all of your child control objects (a father can u have multiple sons, but a son has only one father) @property (nonatomic) nsinteger tag; the ID (identity) of the control, the parent control can find the corresponding child control by tag @property ( nonatomic) Cgaffinetransform transform;the deformation properties of the control (you can set the rotation angle, scale, pan, and other properties)@property (nonatomic) cgrect frame; The position and dimensions of the control's rectangle in the parent control (in the upper-left corner of the parent control as the coordinate origin) you can define the location (origin), size @property (nonatomic) CGRect bounds; The position and size of the rectangle where the control is located (the origin of the coordinates in its upper-left corner, so bounds X, Y is generally 0, this is a magical property, for the time being so understood, later delving into) can define the size (size), cannot define the location @property ( nonatomic) Cgpoint Center; The position of the midpoint of the control (in the upper-left corner of the parent control as the coordinate origin) can define the position and cannot define the size Common methods of UIView -(void) Addsubview: (UIView *) view; Add a child control view-(void) Removefromsuperview; Remove from parent Control-(UIView *) Viewwithtag: (Nsinteger) tag; find the corresponding control (usually child control) according to a tag ID 5, attention to the problem of pointers, modify properties, not pointers and pointers are different, such as:
    // should be indirectly    modified // 1. Remove Structure Properties    CGRect rect = self . Headimageview.frame;     // 2, modify the members inside the structure, at this time after the frame is not an object     - ;     // 3, the value of the return, is the three steps. Must have this step. self    . Headimageview.frame = rect;

If there is no third step, the property cannot be modified successfully because RECT is not a pointer, the address is not the same as the address of the frame, the modification is complete, and the value must be re-assigned to take effect.

The member methods for modifying struct properties are as follows:

1> using temporary variables to record the structure properties of an object

2> modifying the properties of a temporary variable

3> to reset temporary variables to the structure properties of an object

6, the same project, try not to repeat the code to complete similar functions, do not routinely copy the same code. Cause a lot of redundancy. Be as concise as possible.

7, XCODE5, often there will be some inexplicable problems arise, can not solve, you may try to exit reopen, and then look. 8, in OC, you can not directly modify the "object" of the "structure attribute" of the "member", to the trilogy of indirect modification. 9, the default in the switch statement when the value of the variable is not in the branch of any case, the statement to do the processing, in fact, is a case, just refers to "in addition to the specified cases other than the circumstances", is a safe programming way. 10, attention to the problem of magic numbers to avoid, the role of enumeration, macro definition 11, picture material unified into the images.xcassets inside,from Xcode5 onwards, the picture resources are put into the images.xcassets to manage12. Note the usefulness of three attributes

1> frame can modify the object's position and size

2> bounds can modify the size of an object

3> Center can modify the position of an object

13, the end-to-end animation effect, the setting of transparency Alpha, remember the apple, the animation is cheap, it is easy to achieve a very beautiful effect.

14. Getting Started with Git

15, if found through the code can not modify the position or size of the control, you should remove the storyboard inside the AutoLayout function, which is from the beginning of iOS6 features, as the name implies, AutoLayout is used to automatically layout, to bind the position and size of the control. With this feature removed, the position and size of the control will no longer have a fixed binding.

16, the state of UIButton

Normal (normal state) the enumeration constant corresponding to default: UIControlStateNormal Highlighted (the highlight state) when the button is pressed (the finger is not released) the corresponding enumeration constant: uicontrolstatehighlighted Disabled (invalid state, unavailable state) if the Enabled property is no, is in the disable state, which means that the button cannot be clicked on the corresponding enumeration constant: uicontrolstatedisabled 17,when you set the background picture of a button in a different state,in order to ensure that the picture in the highlighted state is displayed properly, the type of the button must be set to custom.

IOS Development Note-use of the basic UI (3) button (zoom out, change position, first animation) and study case

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.