iOS Development UI Basics — Handwriting controls ,frame,center and bounds attribute

One 、 Handwriting controls

1. To create a handwriting control
(1) Create control objects with corresponding control classes
(2) Set various properties of the control
(3) Add control to view
(4) If it is button Other controls , You also need to consider the click event of the control
(5) Be careful :View Contollor and view The relationship between
2. Be careful

stay OC In development ,Storyboard All operations in can be implemented in code , Programmers must master the ability of code layout interface !

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

[btn addTarget:self action:@selector(click:) forControlEvents:UIControlEventTouchUpInside];

Tips :

1> addTarget Method defined in UIControl Class , This means that it can be given to all inheritors from UIControl Class to add listening methods

2> The first parameter of a listening method is the object itself

3> The second parameter of the listening method is the event of the listening control

3. Code example

 1 //1. Use class to create a button object 
2 // UIButton *headbtn=[[UIButton alloc] initWithFrame:CGRectMake(100 ,100, 100, 100)];
3 // Set the button object to custom type
4 UIButton *headbtn=[UIButton buttonWithType:UIButtonTypeCustom];
5
6 //2. Set the properties of the object
7 //(1) Location and other general property settings
8 headbtn.frame=CGRectMake(100, 100, 100, 100);
9
10 //(2) Set the properties of the button in normal state
11 [headbtn setBackgroundImage:[UIImage imageNamed:@"i"] forState:UIControlStateNormal];
12 [headbtn setTitle:@" Am I !" forState:UIControlStateNormal];
13 [headbtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
14
15 //(3) Set the properties of the button in the highlighted state
16 [headbtn setBackgroundImage:[UIImage imageNamed:@"a"] forState:UIControlStateHighlighted];
17 [headbtn setTitle:@" That's OK ~" forState:UIControlStateHighlighted];
18 [headbtn setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
19
20 //3. Add the object to the view and display it
21 [self.view addSubview:headbtn];
22 // Be careful !
23 self.headImageView=headbtn;

Two 、frame,center and bounds attribute

1.frame、center and bounds attribute
frame: Control location and size
center: Control position ( Center point )
bounds: Control size ( Take the upper left corner as the origin )
2. Be careful

(1) You can modify the position of the control with the following properties

frame.origin

center

(2) You can modify the size of the control by using the following properties

frame.size

bounds.size

3. Code example

A control picture up and down left and right translation , Zoom program (frame、center and bounds attribute )

 1 //
2 // YYViewController.m
3 // 01- Practice using buttons frame and center attribute
4 //
5 // Created by apple on 14-5-21.
6 // Copyright (c) 2014 year itcase. All rights reserved.
7 //
8
9 #import "YYViewController.h"
10
11 // Private extension
12 @interface YYViewController ()
13
14 @property(nonatomic,weak)IBOutlet UIButton *headImageView;
15 @end
16
17 @implementation YYViewController
18
19 // Enumeration type , from 1 Start
20 typedef enum
21 {
22 ktopbtntag=1,
23 kdownbtntag,
24 krightbtntag,
25 kleftbtntag
26 }btntag;
27
28 //viewDidLoad Is the method called after the view is loaded. , The initialization of the view controller is usually performed in this method
29 - (void)viewDidLoad
30 {
31
32 // stay viewDidLoad In the method , Don't forget to call the method implementation of the parent class
33 [super viewDidLoad];
34
35
36 // Handwritten control code
37 // One 、 Write a button control , There is a picture on it
38
39 //1. Use class to create a button object
40 // UIButton *headbtn=[[UIButton alloc] initWithFrame:CGRectMake(100 ,100, 100, 100)];
41 // Set the button object to custom type
42 UIButton *headbtn=[UIButton buttonWithType:UIButtonTypeCustom];
43
44 //2. Set the properties of the object
45 //(1) Location and other general property settings
46 headbtn.frame=CGRectMake(100, 100, 100, 100);
47
48 //(2) Set the properties of the button in normal state
49 [headbtn setBackgroundImage:[UIImage imageNamed:@"i"] forState:UIControlStateNormal];
50 [headbtn setTitle:@" Am I !" forState:UIControlStateNormal];
51 [headbtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
52
53 //(3) Set the properties of the button in the highlighted state
54 [headbtn setBackgroundImage:[UIImage imageNamed:@"a"] forState:UIControlStateHighlighted];
55 [headbtn setTitle:@" That's OK ~" forState:UIControlStateHighlighted];
56 [headbtn setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
57
58 //3. Add the object to the view and display it
59 [self.view addSubview:headbtn];
60 // Be careful !
61 self.headImageView=headbtn;
62
63
64 // Two 、 Write four control picture up and down the direction of the button control
65
66 /**================ Up button =====================*/
67 //1. Create a button object
68 UIButton *topbtn=[UIButton buttonWithType:UIButtonTypeCustom];
69
70 //2. Set the properties of the object
71 topbtn.frame=CGRectMake(100, 250, 40, 40);
72 [topbtn setBackgroundImage:[UIImage imageNamed:@"top_normal"] forState:UIControlStateNormal];
73 [topbtn setBackgroundImage:[UIImage imageNamed:@"top_highlighted"] forState:UIControlStateHighlighted];
74 [topbtn setTag:1];
75 //3. Add control to view
76 [self.view addSubview:topbtn];
77
78 //4. Click control events for buttons
79 [topbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];
80
81
82 /**================ Button down =====================*/
83 //1. Create a button object
84 UIButton *downbtn=[UIButton buttonWithType:UIButtonTypeCustom];
85 //2. Set the properties of the object
86 downbtn.frame=CGRectMake(100, 350, 40, 40);
87 [downbtn setBackgroundImage:[UIImage imageNamed:@"bottom_normal"] forState:UIControlStateNormal];
88 [downbtn setBackgroundImage:[UIImage imageNamed:@"bottom_highlighted"] forState:UIControlStateHighlighted];
89 [downbtn setTag:2];
90 //3. Add control to view
91 [self.view addSubview:downbtn];
92
93 //4. Click control events for buttons
94 [downbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];
95
96
97 /**================ Left button =====================*/
98 //1. Create a button object
99 UIButton *leftbtn=[UIButton buttonWithType:UIButtonTypeCustom];
100 //2. Set the properties of the object
101 leftbtn.frame=CGRectMake(50, 300, 40, 40);
102 [leftbtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
103 [leftbtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];
104 [leftbtn setTag:4];
105 //3. Add control to view
106 [self.view addSubview:leftbtn];
107
108 //4. Click control events for buttons
109 [leftbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];
110
111
112
113 /**================ Button to the right =====================*/
114 //1. Create a button object
115 UIButton *rightbtn=[UIButton buttonWithType:UIButtonTypeCustom];
116 //2. Set the properties of the object
117 rightbtn.frame=CGRectMake(150, 300, 40, 40);
118 [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
119 [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];
120 [rightbtn setTag:3];
121 //3. Add control to view
122 [self.view addSubview:rightbtn];
123
124 //4. Click control events for buttons
125 [rightbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];
126
127 // 3、 ... and 、 Write two zoom buttons
128 /**================ Zoom in button =====================*/
129 //1. Create objects
130 UIButton *plusbtn=[UIButton buttonWithType:UIButtonTypeCustom];
131 //2. Set properties
132 plusbtn.frame=CGRectMake(75, 400, 40, 40);
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 addSubview:plusbtn];
138 //4. Click events
139 [plusbtn addTarget:self action:@selector(Zoom:) forControlEvents:UIControlEventTouchUpInside];
140
141
142 /**================ Zoom out button =====================*/
143 UIButton *minusbtn=[UIButton buttonWithType:UIButtonTypeCustom];
144 minusbtn.frame=CGRectMake(125, 400, 40, 40);
145 [minusbtn setBackgroundImage:[UIImage imageNamed:@"minus_normal"] forState:UIControlStateNormal];
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 // Multiple buttons that control the direction call the same method
153 -(void)Click:(UIButton *)button
154 {
155
156 // Practice using frame attribute
157 //CGRect frame=self.headImageView.frame;
158
159 /** Be careful , Here, if you control the two properties of position frame and center When used together , It's going to be fun , Pay attention to the analysis */
160 // Practice using center attribute
161 CGPoint center=self.headImageView.center;
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 // Find a bug, The previous problem was that there was less writing break, This results in their sequential execution ,sorry
171 //center.x=center.x-30;
172 center.x-=50;
173 break;
174 case krightbtntag:
175 center.x+=50;
176 break;
177 }
178
179 // self.headImageView.frame=frame;
180
181 // Head and tail animation
182 [UIView beginAnimations:nil context:nil];
183 self.headImageView.center=center;
184 // Setup time
185 [UIView setAnimationDuration:2.0];
186 [UIView commitAnimations];
187 NSLog(@" Move !");
188
189 }
190 -(void)Zoom:(UIButton *)btn
191 {
192 // Use frame, Take your own top left corner ( My own origin ) Origin
193 // CGRect frame=self.headImageView.frame;
194 // if (btn.tag) {
195 // frame.size.height+=30;
196 // frame.size.width+=30;
197 // }
198 // else
199 // {
200 // frame.size.width-=50;
201 // frame.size.height-=50;
202 // }
203 // self.headImageView.frame=frame;
204
205
206 // Use bounds, Zoom with center point and origin
207 CGRect bounds = self.headImageView.bounds;
208 if (btn.tag) {
209 bounds.size.height+=30;
210 bounds.size.width+=30;
211 }
212 else
213 {
214 bounds.size.height-=50;
215 bounds.size.width-=50;
216 }
217
218 // Animating the beginning and the end
219 [UIView beginAnimations:nil context:nil];
220 self.headImageView.bounds=bounds;
221 [UIView setAnimationDuration:2.0];
222 [UIView commitAnimations];
223 }
224 @end

Realization effect :

3、 ... and 、 Simple animation effect

Brief introduction to the head and tail animation effect
(1) Start the animation
(2) Set animation related time, etc
(3) Participate in the action of animation
(4) Submit animation
notes : Implementation code refer to the above code
 
 
 

iOS Development UI Basics — Handwriting controls ,frame,center and bounds More articles on attributes

  1. iOS Development UI piece — Handwriting controls ,frame,center and bounds attribute

    iOS Development UI Basics — Handwriting controls ,frame,center and bounds attribute One . Handwriting controls 1. To create a handwriting control (1) Create control objects with corresponding control classes (2) Set various properties of the control (3) Add control to view (4 ...

  2. iOS Development Foundation - Handwriting controls

    One . To create a handwriting control 1) Create control objects with corresponding control classes : 2) Set various properties of the control : 3) Add space to view : 4) If it is  UIButton  Other controls , You also need to consider the click event of the control : Two . add to  UIButton ...

  3. Handwriting controls ,frame,center and bounds attribute

    One . Handwriting controls 1. To create a handwriting control (1) Create control objects with corresponding control classes (2) Set various properties of the control (3) Add control to view (4) If it is button Other controls , You also need to consider the click event of the control (5) Be careful :View ...

  4. iOS Development UI piece — Realization UItableview Control data refresh

    iOS Development UI piece — Realization UItableview Control data refresh One . Project file structure and plist file Two . Realization effect 1. explain : This is a hero display interface , Click on the middle line , You can change the name of the hero ( Complete the operation of data refresh ). shipment ...

  5. IOS Development UI Basics -- Data Refresh

    IOS Development UI Basics -- Data Refresh cell Data refresh includes the following aspects Add data Delete data Change data Global refresh method ( Use... Most often ) [self.tableView reloadData]; // Full screen ...

  6. iOS Development ——UI Basics - controller ,IBAction and IBOutlet,UIView

    first ios Program @interface ViewController : UIViewController @property(nonatomic, weak)IBOutlet UILabel *la ...

  7. IOS Development UI Basics UIView

    Main introduction UIView Get the basic concepts and some properties of the introduction, as for the user attributes will be introduced in detail later -.UIView Basic concepts 1. What are controls ? Everything on the screen UI Elements are called controls ( There are also many books called views Components ) such as Button ...

  8. IOS Development UI Based on learning ------- summary

    What is a control ? All on screen UI Elements are called controls ( There are also views . Components ) Common properties of controls Size Location Background color ... Apple will control the common properties are extracted to the parent class UIView in All controls eventually inherit from UIView Parent child control ...

  9. IOS Development UI The foundation Plis file - Dictionary to model

    What is? plist file ? Write the data in the code directly in the development It's not a reasonable thing to do If the data changes frequently You often need to open the corresponding code to modify Cause low code scalability therefore , Consider putting the data that changes frequently in the ⽂ In the file ⾏ Row store , cheng ...

Random recommendation

  1. AutoLearnSkills.lua -- Upgrade automatic learning skills

    --[[ The author information : Auto Learn SKills ( Upgrade automatic learning skills ) author QQ:247321453 author Email:247321453@qq.com modification date :2014-3-12 function : In player ...

  2. Save session data ——cookie Study

    Cookie It's client technology , The program puts each user's data in cookie It's written to the user's browser . When the user uses the browser to access the web Resource time , They will bring their own data to . such ,web What the resource deals with is the data of each user ...

  3. distinguish copy Structure and copy assignment

    1. Widget w1; // call Default Construction method Widget w2(w1); // call copy Construction method w1 = w2; // call copy Assignment operator Widget w3 = w2;   / ...

  4. LINQ Multiple conditions OR Fuzzy query

    This article reprints :http://www.cnblogs.com/guyun/archive/2012/10/18/2729888.html This is the demand , There is a watch tbl(Key[int],Value[str ...

  5. Struts Custom result set for learning

    from :http://blog.csdn.net/hanxuemin12345/article/details/38763057 We often meet this kind of demand in the project —— Page partial refresh , for example : Add users , Go to add ...

  6. 【20190405】JavaScript- Analysis of regular form matching and replacement results

    In the application of regular form, there are three functions that are used most :exec().test() With string replace(reg, options). among test() The most simple , As long as the string matches the regular form , Just go back to true, Otherwise return to fal ...

  7. WPF Set the software interface background to MediaElement And play the video

    In our common software interface design, we often set the software background as SolidColorBrush perhaps LinerColorBrush.RadialGradientBrush  And so on a series of color brushes as the background , Sometimes we make ...

  8. 020-Json Asynchronous delivery of structure data serialization

    C# Lieutenant general .Net Object serialization to Json String method : JavaScriptSerializer().Serialize(p),JavaScriptSerializer stay System.Web.Extens ...

  9. ftp Analysis of interaction process between active mode and passive mode

    1. Related introduction 1.1 Active mode and passive mode Active mode : Server through the specified data transmission port ( Default 20), Actively connect to the port submitted by the client , Send data to client . Passive mode : The server adopts the client, and the passive mode is recommended , To open the data transmission port ...

  10. VB ( Empty string )、Null、Empty、 And Nothing The difference between

    VB ( Empty string ).Null.Empty. And  Nothing  The difference between http://blog.sina.com.cn/s/blog_3f39ffb50100bguw.html Variable A.B.C.D , respectively, ...