05-Basic use of buttons-development steps

• From Xcode5 onwards, the picture resources are put into the images.xcassets to manage
• First add the necessary pictures to the Images.xcassets

Adjusting the interface dimensions

• Since the default size of the simulator is 3.5inch, in order to avoid unnecessary trouble, it is best to adjust the UI interface dimensions in storyboard to 3.5inch

Add 4 directional buttons and 2 zoom buttons

• Drag the button onto the storyboard
• Set the size of the button to 35x35

Set the background picture of the button

• Buttons are available in a variety of states:

1. Normal (normal state): default, UIControlStateNormal
2. Highlighted (highlight state): When the button is pressed down (the finger is not released), uicontrolstatehighlighted

• Set the background picture of the button in different states (in order to ensure that the highlighted picture 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?"

Connect with the Controller

• 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;

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.

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.
• Here's a demonstration of creating a button with code

1. Create a custom button

UIButton *btn = [UIButton buttonwithtype:uibuttontypecustom];

2. Add a button

[Self.view ADDSUBVIEW:BTN];

3. Setting the position and size of the button

Btn.frame = CGRectMake (100, 100, 100, 100);

4. Tap the button click (The Btnclick method of self is called when the button is clicked)

[Btn addtarget:self Action: @selector (Btnclick) forcontrolevents:uicontroleventtouchupinside];

5. Set the properties of the button in the default state

5.1. Background of the default state

[Btn setbackgroundimage:[uiimage imagenamed:@ "btn_01"] forstate:uicontrolstatenormal];

5.2. Default state of text

[Btn settitle:@ "point me," forstate:uicontrolstatenormal];

5.3. The text color of the default state

[btn Settitlecolor:[uicolor Redcolor] forstate:uicontrolstatenormal];

6. Set the properties of the button in the highlighted state

6.1. Background of the highlighted state

[Btn setbackgroundimage:[uiimage imagenamed:@ "btn_02"] forstate:uicontrolstatehighlighted];

6.2. Text in highlighted state

[Btn settitle:@ "Touch me what to do" forstate:uicontrolstatehighlighted];

6.3. The text color of the highlighted state

[btn Settitlecolor:[uicolor Bluecolor] forstate:uicontrolstatehighlighted];

Storyboard to code conversion

To create a custom button

UIButton *btn = [UIButton buttonwithtype:uibuttontypecustom];

Background of default state

[Btn setbackgroundimage:[uiimage imagenamed:@ "btn_01"] forstate:uicontrolstatenormal];

Text in default state

[Btn settitle:@ "point me," forstate:uicontrolstatenormal];

The text color of the default state

[btn Settitlecolor:[uicolor Redcolor] forstate:uicontrolstatenormal];

　　

05-Basic use of buttons-development steps