iOS Development UI Basics-handwriting controls, Frame,center and bounds properties

First, the handwriting control

1. Steps of the handwriting control (1) Use the corresponding control class to create the control object (2) to set various properties of the control (3) Add controls to the view (4) If you are a control such as a button, you also need to consider the control's Click event (5) Note: The relationship between View Contollor and view 2. Note

In OC Development, all operations in storyboard can be implemented by code, and programmers must be proficient in the ability of the code layout interface!

The sample code for setting the control listener method is as follows:

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

Tips:

The 1> Addtarget method is defined in the Uicontrol class, which means that you can add a listening method to all objects that inherit from the Uicontrol class

The first parameter of the 2> listener method is the object itself

The second parameter of the 3> listener method is the event that listens to the control

3. Code examples

 1//1. Create a button object using a Class 2//UIButton *headbtn=[[uibutton alloc] initwithframe:cgrectmake (100, 100, 100, 100)]; 3 Set button object to custom type 4 UIButton *headbtn=[uibutton Buttonwithtype:uibuttontypecustom]; 5 6//2. Set the properties of the object 7//(1) position and other common property settings 8 headbtn.frame=cgrectmake (100, 100, 100, 100); 9 10//(2) Set the properties of the button in the normal state one by one [headbtn setbackgroundimage:[uiimage imagenamed:@ "I"] forstate:uicontrolstatenormal]; [headbtn settitle:@] dot me!      "Forstate:uicontrolstatenormal];13 [headbtn settitlecolor:[uicolor Redcolor] forstate:uicontrolstatenormal];14 15     (3) Set the properties of the button in the highlighted state [headbtn setbackgroundimage:[uiimage imagenamed:@ "a"] forstate:uicontrolstatehighlighted];17 [Headbtn settitle:@ "OK ~" forstate:uicontrolstatehighlighted];18 [headbtn settitlecolor:[uicolor BlueColor] ForSta te:uicontrolstatehighlighted];19 20//3. Add the object to the view and show it. [Self.view addsubview:headbtn];22//Attention point! SELF.HEADIMAGEVIEW=HEADBTN; 

Second,frame,center and bounds attributes

1.frame, center, and bounds Properties frame: Control position and Size Center: Control position (center point) Bounds: Control size (in its own upper left corner as the origin) 2. Attention Point

(1) The position of the control can be modified by the following properties

Frame.origin

Center

(2) The size of the control can be modified by the following properties

Frame.size

Bounds.size

3. Code examples

A program (frame, center, and bounds properties) that controls how the picture is shifted up or down, scaled

  1//2//YYVIEWCONTROLLER.M 3//01-Practice using the button's frame and Center Properties 4//5//Created by Apple on 14-5-21. 6//Copyright (c) 2014 itcase.  All rights reserved. 7//8 9 #import "YYViewController.h" 10 11//Private extension @interface Yyviewcontroller () @property (nonatomic,weak) I Boutlet UIButton *headimageview; @end @implementation Yyviewcontroller 18 19//enumeration type, starting from 1 typedef enum {ktopbtntag=1, KDOWNB Tntag, Krightbtntag, Kleftbtntag-}btntag; //viewdidload is the method that is called after the view is loaded, typically performing the initialization of the view controller in this method (void) Viewdidload 30 {31 32//In the Viewdidload method, do not forget to call Method implementation of the parent class [Super Viewdidload]; 34 35 36//Handwriting Control Code 37//One, write a button control, there is a picture 38 39//1. Create a button object using a class//UIButton *headbtn=[[uibutto N alloc] Initwithframe:cgrectmake (100, 100, 100, 100)]; 41//Set button object for custom type UIButton *headbtn=[uibutton Buttonwithtype:uibuttontypecustom]; 43 44//2. Set the properties of the object 45//(1) Position Common properties set headbtn.frame=CGRectMake (100, 100, 100, 100); 47 48//(2) Set the properties of the button in the normal state [headbtn setbackgroundimage:[uiimage imagenamed:@ "I"] Forstate:uicontrolstatenorma L]; [headbtn settitle:@] dot me! [Forstate:uicontrolstatenormal]; Wuyi [headbtn Settitlecolor:[uicolor Redcolor] forstate:uicontrolstatenormal]; 52 53//(3) Set the properties of the button in the Highlight state [headbtn setbackgroundimage:[uiimage imagenamed:@ "a"] Forstate:uicontrolstatehighl Ighted]; [Headbtn settitle:@] is OK ~ "forstate:uicontrolstatehighlighted"; [Headbtn Settitlecolor:[uicolor Bluecolor] forstate:uicontrolstatehighlighted]; 57 58//3. Add the object to the view and show it. [Self.view addsubview:headbtn]; 60//Attention point! SELF.HEADIMAGEVIEW=HEADBTN; 62 63 64//Two, write four control the picture up and down move direction of the button control 65 66/**================ up Button =====================*/67//1. Create button Object UIButton *topbtn=[uibutton Buttonwithtype:uibuttontypecustom]; 69 70//2. Setting the properties of an object Topbtn.frame=cgrectmake (100, 250, 40, 40); [Topbtn SEtbackgroundimage:[uiimage imagenamed:@ "Top_normal"] forstate:uicontrolstatenormal]; [Topbtn setbackgroundimage:[uiimage imagenamed:@ "top_highlighted"] forstate:uicontrolstatehighlighted]; [Topbtn settag:1]; 75//3. Adding controls to the view [Self.view addsubview:topbtn]; 77 78//4. Click Control event for Button [topbtn addtarget:self Action: @selector (click:) forcontrolevents:uicontroleventtouchup Inside]; 80 81 82/**================ down button =====================*/83//1. Create button Object UIButton *downbtn=[uibut Ton Buttonwithtype:uibuttontypecustom]; 85//2. Setting the properties of an object Downbtn.frame=cgrectmake (100, 350, 40, 40); [Downbtn setbackgroundimage:[uiimage imagenamed:@ "Bottom_normal"] forstate:uicontrolstatenormal]; [Downbtn setbackgroundimage:[uiimage imagenamed:@ "bottom_highlighted"] forstate:uicontrolstatehighlighted]; [Downbtn Settag:2]; 90//3. Adding controls to the view [Self.view addsubview:downbtn]; 92 93//4 Click Control Event 94 [Downbtn AddTArget:self Action: @selector (Click:) forcontrolevents:uicontroleventtouchupinside]; 95 96 97/**================ Left button =====================*/98//1. Create button object UIButton *leftbtn=[uibutton b uttonwithtype:uibuttontypecustom];100//2. Setting the properties of an Object 101 Leftbtn.frame=cgrectmake ((), 102 [Leftbtn SE Tbackgroundimage:[uiimage imagenamed:@ "Left_normal"] forstate:uicontrolstatenormal];103 [leftbtn Setbackgroundimage:[uiimage imagenamed:@ "left_highlighted"] forstate:uicontrolstatehighlighted];104 [leftbtn settag:4];105//3. Add the control to the View 106 [Self.view addsubview:leftbtn];107 108//4. Click Control Events 109 [leftbtn Addtar Get:self Action: @selector (Click:) forcontrolevents:uicontroleventtouchupinside];110 111 112 113/**======= ========= right button =====================*/114//1. Create a Button object UIButton *rightbtn=[uibutton buttonwithtype:uibuttontypecus tom];116//2. Setting the properties of an object 117 Rightbtn.frame=cgrectmake (118 Setbackgroundimage:[uiimage imagenamed:@ "Right_normal"] forstate:uicontrolstatenormal];119 [rightbtn Setbackgroundimage:[uiimage imagenamed:@ "right_highlighted"] forstate:uicontrolstatehighlighted];120 [rightbtn settag:3];121//3. Add the control to the view 122 [Self.view addsubview:rightbtn];123 124//4. Click Control event for button [Rightbtn AddT        Arget:self Action: @selector (Click:) forcontrolevents:uicontroleventtouchupinside];126 127//Three, write two zoom button 128 /**================ enlarged button =====================*/129//1. Creating Objects UIButton *plusbtn=[uibutton Buttonwithtype:uibutton  typecustom];131//2. Setting Properties Plusbtn.frame=cgrectmake (------), 133 [Plusbtn Setbackgroundimage:[uiimage imagenamed:@ "Plus_normal"] forstate:uicontrolstatenormal];134 [plusbtn setbackgroundimage:[uiimage imageNamed:@] plus_highlighted "] forstate:uicontrolstatehighlighted];135 [plusbtn settag:1];136//3. Add to view 137 [Self.view AddS ubview:plusbtn];138//4. Click event 139 [plusbtn AddTarget:self Action: @selector (Zoom:) forcontrolevents:uicontroleventtouchupinside];140 141 142/**============= = = = Reduced button =====================*/143 UIButton *minusbtn=[uibutton buttonwithtype:uibuttontypecustom];144 minusbtn.fr Ame=cgrectmake, 145 [minusbtn setbackgroundimage:[uiimage imagenamed:@ "Minus_normal"] ForState:UICon trolstatenormal];146 [minusbtn setbackgroundimage:[uiimage imagenamed:@ "minus_highlighted"] forState: uicontrolstatehighlighted];147 [Minusbtn settag:0];148 [Self.view addsubview:minusbtn];149 [Minusbtn addTarget : Self action: @selector (Zoom:) forcontrolevents:uicontroleventtouchupinside];150}151 152//Control direction multiple buttons call the same method 153-(     void) Click: (UIButton *) button154 {155 156//Practice using the Frame Property 157//cgrect frame=self.headimageview.frame;158 159 /** Note that if you control the position of the two properties frame and center at the same time, there will be a very interesting effect, pay attention to analysis */160//Practice using the Center property 161 Cgpoint Center=self.headimageview.cen ter;162 switch (button.tag) {163 case Ktopbtntag:164 center.y-=30;165 break;166 Case kdownbtntag:167 center.y+=30;168            break;169 case kleftbtntag:170//found a bug, before the problem is because less write break, resulting in their sequential execution, sorry171 center.x=center.x-30;172 center.x-=50;173 break;174 Case krightbtntag:175 CE     nter.x+=50;176 break;177}178 179//SELF.HEADIMAGEVIEW.FRAME=FRAME;180 181//Set animation effect 182 [UIView beginanimations:nil context:nil];183 self.headimageview.center=center;184//Set time 185 [UIView Setanim ationduration:2.0];186 [UIView commitanimations];187 NSLog (@ "Move!"); 188 189}190-(void) Zoom: (UIButton *) btn191 {192//use frame in its own upper left corner (own origin) for Origin 193//CGRect Frame=self.headimagev     iew.frame;194//if (Btn.tag) {195//frame.size.height+=30;196//frame.size.width+=30;197//}198// else199//{$//frame.size.width-=50;201//FRAme.size.height-=50;202//}203//self.headimageview.frame=frame;204 205 206//Use bounds to scale with center point Origin 207 CGRect bounds = self.headimageview.bounds;208 if (btn.tag) {209 bounds.size.height+=30;210 BOUNDS.S ize.width+=30;211}212 else213 {214 bounds.size.height-=50;215 bounds.size.width-=50;216}     217 218//Set animation 219 [UIView Beginanimations:nil context:nil];220 self.headimageview.bounds=bounds;221 [UIView setanimationduration:2.0];222 [UIView commitanimations];223}224 @end

Implementation results:

Three, simple animation effect

A brief introduction to the end-to-end animation (1) Start animation (2) Set animation-related time, etc. (3) action to participate in animation (4) Commit animation Note: Implement code reference above

iOS Development UI Basics-handwriting controls, Frame,center and bounds properties