iOS development UI Chapter-Basic use of common UI controls

I. UIButton Overview:

The Uikit framework provides a lot of UI controls, some of which are used every day, such as UIButton, UILabel, Uiimageview, UITableView, and so on.

UIButton, commonly known as "button", usually after clicking on a control, the response is a button. The function of the button is more, can display the picture and the Chinese characters can also adjust the text and position of the picture at any time, such as the following two figures Group buying and music player apps: The following is a summary of the basic uses of this article through an example. Two. The button's basic Settings button can be created by Mainstoryboard or by code, and the following are all based on main.storyboard usage, which can be set to the right of the Chinese button in this file two. The setting of the state status of the UIButton, corresponding to the Status Config field 1. Normal (normal state) The default is the corresponding enumeration constant in this status code: UIControlStateNormal 2. Highlighted (highlighted) when the button is pressed down, the corresponding enumeration constant in this status code is: Uicontrolstatehighlighted 3. Disabled (invalid state, unavailable state) if the Enabled property is no, is in the Disable state, the button can not be clicked, the default is clickable. The corresponding enumeration constants: Uicontrolstatedisabled three. button setting background picture and text button can set the background picture in different states: background picture and text setting under normal state and highlight five. The addition of a simple animation refers to the change in the value of the property is a gradual process, not all of a sudden changes in the developer can freely set the property changes required Time, such as the X value is originally 20, then the X value is suddenly changed to 100, the system will translate the animation to let the X-value slowly from 10 to 100.the system automatically forms an animation based on changes to a property value. There are roughly three ways of simple animation: 1. Tail-

    // 0. Animation (head)     [UIView beginanimations:nil context:nil];         // 1. Set the execution time    of the animation [UIView setanimationduration:1.0];     /* * Code to perform animations * */    // Animation trailer (end animation)    [UIView commitanimations];

2. Block type one, this usage does not need to add the head and tail

[UIView animatewithduration:1.0 animations:^{        /**  }];

3. Block type two, is a block-type one extension, after the execution of the animation and then execute other code

[UIView animatewithduration:1.0 animations:^{        /** *     } Completion:^(BOOL finished) {        /**/    }]; 

Four. The button uses an instance to practice the basic use of the button and uiview the use of common properties. 1. Interface Description: The top, bottom, left, and right four buttons control the movement of the picture up and down, left rotation, right rotation control the rotation of the picture, each rotation 45 degrees, zoom out button to enlarge and reduce the image 2. Step analysis 1) Build interface (This article uses Main.storyboard method) 2) Click on the Monitor button 3) depending on the different buttons, change the position and size of the picture Properties 3. Essentials Analysis 1) How to distinguish between different button clicks? 1> for each button to write a method to listen to the click of a particular button can also 2> use a method by setting a different tag to distinguish this article using D2) change the position of the control 1 "Frame Property 2" Center Property 3) How to rotate and zoom out using the deformation properties transform4. The code is as follows:

#import "ViewController.h"#defineKdelta 50typedefenumTag {moveUp=1,//Move UpMoveRight,//Move RightMoveDown,//Move DownMoveLeft,//Move leftRotateleft,//left rotationRotateright,//Rotate RightChangesmall,//become smallerChangebig//getting bigger}btntag;@interfaceViewcontroller ()//Show Pictures@property (Weak, nonatomic) Iboutlet UIButton *btn;//move up or down-(Ibaction) Move: (UIButton *) sender;//Rotation monitoring-(Ibaction) Rotate: (UIButton *) sender;//zoom in and zoom out-(Ibaction) Scale: (UIButton *) sender;//restores the initial state and clears all the deformation properties-(ibaction) Reset: (UIButton *) sender;@end

Move method implementation: to monitor the upper and lower left and right four buttons

-(Ibaction) Move: (UIButton *) sender{    //Add animations use block Type here[UIView animatewithduration:1.0animations:^{        //1. Remove frame Structure        /*The OC syntax does not allow you to directly modify the members of a struct in an object, you must modify the whole (the entire structure)*/        //CGRect tempfram = _btn.frame;Cgpoint Tempcenter =_btn.center; //2. Change frame, according to the different tag to decide what to change the locationNsinteger tag = [sender tag];//Remove Tag        Switch(tag) { CasemoveUp://TEMPFRAM.ORIGIN.Y-= Kdelta;TEMPCENTER.Y-=Kdelta;  Break;  CaseMoveRight://tempfram.origin.x + = Kdelta;Tempcenter.x + =Kdelta;  Break;  CaseMoveDown://TEMPFRAM.ORIGIN.Y + = Kdelta;Tempcenter.y + =Kdelta;  Break;  CaseMoveLeft://tempfram.origin.x-= Kdelta;Tempcenter.x-=Kdelta;  Break; default:                                Break; }        //3. Write the new frame back//_btn.frame = Tempfram;_btn.center=Tempcenter;  }]; }

Rotate method implementation:

To listen to the left and right rotation, modify the control's Transform property, also use a simple animation, rotation is gradient.

1-(Ibaction) Rotate: (UIButton *) Sender2 {3     4     //Radian 3.14-pi5     //Angle6     //_angle-= m_pi_4;7     //_btn.transform = cgaffinetransformmakerotation (_angle);8 9[UIView animatewithduration:1.0animations:^{Ten         //modifying the deformation properties of an element One_btn.transform = Cgaffinetransformrotate (_btn.transform, M_pi_4 * ([sender tag] = = Rotateleft?-1:1)); A     }]; -      -}

The scale method implements:

To monitor the zoom in and Out button, modify the control's Transform property, also use a simple animation, rotation is gradient.

 1 -(ibaction) scale: (UIButton *) sender  2  {  [UIView animatewithduration:1.0  animations:^{ //  Modify the deformation properties based on the original deformation  5  cgfloat scale = [Sender tag] = = Changebig? 1.2 : 0.8   6  _btn.transform = Cgaffinetransformscale (_btn . Transform, scale, scale);  7   8 } 

The Reset method implements:

-(ibaction) Reset: (UIButton *) Sender {        //  Erase all deformation properties before    _btn.transform =  cgaffinetransformidentity;}

Summary:

♦ How to modify the position and dimensions of a control:

1. Change location:

1) frame.origin2) center2. Modify size 1) frame.size2)bounds.size♦? OC Syntax rules: it is not allowed to directly modify the members of an object's struct property under this line of code is wrong: self.headbtn.frame.origin.y-= 10;

iOS development UI Chapter-Basic use of common UI controls