05-Basic use of buttons

Basic use of buttons what is a button

• 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, and so on.
• Now let's learn a very important and relatively basic UI control---UIButton, commonly known as "button"
• In general, when you click on a control, the corresponding response is the button
• The function of the button is more, can display the text, but also can display the picture, can adjust the internal picture and the text position at any time

Small case

• Next, a small case study of the basic use of buttons

Master

• creating, adding controls Using code
• Set the buttons in different states of background, text, and text colors by storyboard and code respectively
• Click through storyboard and code listener buttons respectively
• Modify the position and dimensions of a control
• Make a simple animation effect
• Mastering the use of frame, center, bounds, transform

Homework

• Use plain code to rewrite small cases about buttons (do not drag controls)

Add a picture resource

• From Xcode5 onwards, the picture resources are put into the images.xcassets to manage
• Add the images used in the project to the Images.xcassets

To modify the dimensions of a control

• Is the size of the set control is 35x35

Remove AutoLayout

• If you find that you cannot modify the position or size of the control by code, you should remove the AutoLayout function from the storyboard, which is the feature that began to appear iOS6
• As the name implies, AutoLayout is used for automatic layout, which is used to constrain 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.

The state of UIButton

• Normal (normal state)

1. Defaults (default)
2. The corresponding enumeration constants: UIControlStateNormal

• Highlighted (highlight state)

1. When the button is pressed (the finger is not released)
2. The corresponding enumeration constants: Uicontrolstatehighlighted

• Disabled (fail State, unavailable state)

1. If the Enabled property is no, it is in the disable state, which means the button cannot be clicked
2. The corresponding enumeration constants: Uicontrolstatedisabled

Set the background picture of the button

• Set the background picture of the button in different states (in order to ensure that the picture in the highlighted state is normal, you must set the type of the button to be custom)

Set Avatar button

• Normal Status: Red text "Dot Me"
• Highlight Status: Blue text "What do you Touch me for?"

Change the position of the Avatar button

• You can modify the position and size of the control on the screen by modifying the frame property of the control
• For example, click the "Up" button to reduce the Y value of the button

-(Ibaction) Top: (UIButton *) sender

{

CGRect btnframe = self.headBtn.frame;

BTNFRAME.ORIGIN.Y-= 10;

Self.headBtn.frame = Btnframe;

}

• The following code is wrong, and the OC Syntax stipulates that the member that directly modifies the struct property of an object is not allowed

SELF.HEADBTN.FRAME.ORIGIN.Y-= 10;

Code creation button

• In the development process, not every time through the storyboard drag control to complete the UI interface, because storyboard above the interface is "fixed dead", and sometimes may be in the process of running the program to dynamically add some new controls to the interface
• such as QQ chat information, is someone sent a message after the dynamic display. Therefore, you need to know how to add controls dynamically in code
• In fact, the essence of storyboard is to switch to the corresponding code according to the graphical interface description.

Storyboard to code conversion

Implement simple animations

• In iOS development, it's very easy to implement some small animations.

1. The system automatically animates according to the change of a property value
2. For example, the X value would have been 10, and then the X value was suddenly changed to 100, and the system shifted the X value from 10 to 100 by panning the animation.

• There are roughly 2 ways to easily animate:

1. Tail type

[UIView Beginanimations:nil Context:nil];

/** code to perform the animation **/

[UIView commitanimations];

• Block type

[UIView animatewithduration:0.5 animations:^{

/** code to perform the animation **/

}];

Modify the position and dimensions of a control

• You can modify the position of the control by using the following properties

1. Frame.origin
2. Center

• You can modify the size of a control by using the following properties

1. Frame.size
2. Bounds.size

Transform Property

• Use the Transform property to modify the control's displacement (position), scale, rotation
• Create a Transform property

1. Cgaffinetransform cgaffinetransformmaketranslation (cgfloat tx, cgfloat ty);

2. Cgaffinetransform Cgaffinetransformmakescale (cgfloat sx, CGFloat sy);

3. Cgaffinetransform cgaffinetransformmakerotation (cgfloat angle)

4. (Angle is radian system, not angle system)

• Overlay on the basis of a transform

1. Cgaffinetransform cgaffinetransformtranslate (Cgaffinetransform t, cgfloat tx, cgfloat ty);

2. Cgaffinetransform Cgaffinetransformscale (Cgaffinetransform T, cgfloat SX, CGFloat sy);

3. Cgaffinetransform cgaffinetransformrotate (Cgaffinetransform t, cgfloat angle);

• Clears the previously set transform property

1. View.transform = cgaffinetransformidentity;

Common types

• A uicolor represents a color that can be obtained in many common colors by means of the Uicolor class method.

1. + (Uicolor *) Blackcolor; 0.0 white Black
2. + (Uicolor *) Darkgraycolor; 0.333 White dark Grey
3. + (Uicolor *) Lightgraycolor; 0.667 White Bright Grey
4. + (Uicolor *) Whitecolor; 1.0 White
5. + (Uicolor *) Graycolor; 0.5 White Grey
6. + (Uicolor *) Redcolor; 1.0, 0.0, 0.0 RGB Red
7. + (Uicolor *) Greencolor; 0.0, 1.0, 0.0 RGB Green
8. + (Uicolor *) Bluecolor; 0.0, 0.0, 1.0 RGB Blue
9. + (Uicolor *) Cyancolor; 0.0, 1.0, 1.0 RGB Cyan
10. + (Uicolor *) Yellowcolor; 1.0, 1.0, 0.0 RGB Yellow
11. + (Uicolor *) Magentacolor; 1.0, 0.0, 1.0 RGB Magenta
12. + (Uicolor *) Orangecolor; 1.0, 0.5, 0.0 RGB Orange
13. + (Uicolor *) Purplecolor; 0.5, 0.0, 0.5 RGB Purple
14. + (Uicolor *) Browncolor; 0.6, 0.4, 0.2 RGB Brown
15. + (Uicolor *) Clearcolor; 0.0 White, 0.0 alpha clear color (empty color)

• A UIImage object represents a picture, typically through the imagenamed: method to load a picture in a project by file name

(filename can omit extension)

UIImage *image = [UIImage imagenamed:@ "btn_01"];

Style of the button

• In fact, UIButton comes with a lot of different styles.

• To specify a button style while creating a button with code

UIButton *btn = [UIButton buttonwithtype:uibuttontypecustom];

1. Uibuttontypecustom: No type, the content of the button needs to be customized
2. Uibuttontypedetaildisclosure:

3. Uibuttontypeinfolight:

4. Uibuttontypeinfodark:

5. Uibuttontypecontactadd

05-Basic use of buttons