iOS開發UI篇—手寫控件，frame，center和bounds屬性

iOS開發UI基礎—手寫控件，frame，center和bounds屬性

1、手寫控件

1.手寫控件的步驟

（1）使用相應的控件類建立控件對象

（2）設置該控件的各類屬性

（3）添加控件到視圖中

（4）若是是button等控件，還需考慮控件的單擊事件等

（5）注意：View Contollor和view的關係

2.注意點

在OC開發中，Storyboard中的全部操做均可以經過代碼實現，程序員必定要熟練掌握代碼佈局界面的能力！

設置控件監聽方法的示例代碼以下：

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

提示：

1> addTarget方法定義在UIControl類中，這意味着能夠給全部繼承自UIControl類的對象添加監聽方法

2> 監聽方法的第一個參數就是對象自己

3> 監聽方法的第二個參數是監聽控件的事件

3.代碼示例

 1     //1.使用類建立一個按鈕對象
 2    // UIButton *headbtn=[[UIButton alloc] initWithFrame:CGRectMake(100 ,100, 100, 100)];
 3     //設置按鈕對象爲自定義型
 4     UIButton *headbtn=[UIButton buttonWithType:UIButtonTypeCustom];
 5     
 6     //2.設置對象的各項屬性
 7     //(1)位置等通用屬性設置
 8     headbtn.frame=CGRectMake(100, 100, 100, 100);
 9     
10     //(2)設置普通狀態下按鈕的屬性
11     [headbtn setBackgroundImage:[UIImage imageNamed:@"i"] forState:UIControlStateNormal];
12     [headbtn setTitle:@"點我！" forState:UIControlStateNormal];
13     [headbtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
14     
15     //(3)設置高亮狀態下按鈕的屬性
16     [headbtn setBackgroundImage:[UIImage imageNamed:@"a"] forState:UIControlStateHighlighted];
17     [headbtn setTitle:@"還行吧~" forState:UIControlStateHighlighted];
18     [headbtn setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
19     
20     //3.把對象添加到視圖中展示出來
21     [self.view addSubview:headbtn];
22     //注意點！
23     self.headImageView=headbtn;

2、frame，center和bounds屬性

1.frame、center和bounds屬性

frame:控制位置和大小

center:控制位置（中心點）

bounds：控制大小（以本身的左上角爲原點）

2.注意點

（1）經過如下屬性能夠修改控件的位置

frame.origin

center

（2）經過如下屬性能夠修改控件的尺寸

frame.size

bounds.size

3.代碼示例

一個控制圖片上下左右平移，縮放的程序（frame、center和bounds屬性）

  1 //
  2 //  YYViewController.m
  3 //  01-練習使用按鈕的frame和center屬性
  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 //私有擴展
 12 @interface YYViewController ()
 13 
 14 @property(nonatomic,weak)IBOutlet UIButton *headImageView;
 15 @end
 16 
 17 @implementation YYViewController
 18 
 19 //枚舉類型，從1開始
 20 typedef enum
 21 {
 22     ktopbtntag=1,
 23     kdownbtntag,
 24     krightbtntag,
 25     kleftbtntag
 26 }btntag;
 27 
 28 //viewDidLoad是視圖加載完成後調用的方法，一般在此方法中執行視圖控制器的初始化工做
 29 - (void)viewDidLoad
 30 {
 31     
 32     //在viewDidLoad方法中，不要忘記調用父類的方法實現
 33     [super viewDidLoad];
 34 
 35     
 36     //手寫控件代碼
 37     //1、寫一個按鈕控件，上面有一張圖片
 38     
 39     //1.使用類建立一個按鈕對象
 40    // UIButton *headbtn=[[UIButton alloc] initWithFrame:CGRectMake(100 ,100, 100, 100)];
 41     //設置按鈕對象爲自定義型
 42     UIButton *headbtn=[UIButton buttonWithType:UIButtonTypeCustom];
 43     
 44     //2.設置對象的各項屬性
 45     //(1)位置等通用屬性設置
 46     headbtn.frame=CGRectMake(100, 100, 100, 100);
 47     
 48     //(2)設置普通狀態下按鈕的屬性
 49     [headbtn setBackgroundImage:[UIImage imageNamed:@"i"] forState:UIControlStateNormal];
 50     [headbtn setTitle:@"點我！" forState:UIControlStateNormal];
 51     [headbtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
 52     
 53     //(3)設置高亮狀態下按鈕的屬性
 54     [headbtn setBackgroundImage:[UIImage imageNamed:@"a"] forState:UIControlStateHighlighted];
 55     [headbtn setTitle:@"還行吧~" forState:UIControlStateHighlighted];
 56     [headbtn setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted];
 57     
 58     //3.把對象添加到視圖中展示出來
 59     [self.view addSubview:headbtn];
 60     //注意點！
 61     self.headImageView=headbtn;
 62 
 63     
 64     //2、寫四個控制圖片左右上下移動方向的按鈕控件
 65     
 66     /**================向上的按鈕=====================*/
 67     //1.建立按鈕對象
 68     UIButton *topbtn=[UIButton buttonWithType:UIButtonTypeCustom];
 69     
 70     //2.設置對象的屬性
 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.把控件添加到視圖中
 76     [self.view addSubview:topbtn];
 77     
 78     //4.按鈕的單擊控制事件
 79     [topbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];
 80     
 81     
 82       /**================向下的按鈕=====================*/
 83     //1.建立按鈕對象
 84     UIButton *downbtn=[UIButton buttonWithType:UIButtonTypeCustom];
 85     //2.設置對象的屬性
 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.把控件添加到視圖中
 91     [self.view addSubview:downbtn];
 92     
 93     //4.按鈕的單擊控制事件
 94     [downbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];
 95 
 96     
 97      /**================向左的按鈕=====================*/
 98     //1.建立按鈕對象
 99     UIButton *leftbtn=[UIButton buttonWithType:UIButtonTypeCustom];
100     //2.設置對象的屬性
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.把控件添加到視圖中
106     [self.view addSubview:leftbtn];
107     
108     //4.按鈕的單擊控制事件
109     [leftbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];
110     
111     
112     
113     /**================向右的按鈕=====================*/
114     //1.建立按鈕對象
115     UIButton *rightbtn=[UIButton buttonWithType:UIButtonTypeCustom];
116     //2.設置對象的屬性
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.把控件添加到視圖中
122     [self.view addSubview:rightbtn];
123     
124     //4.按鈕的單擊控制事件
125     [rightbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];
126     
127       //3、寫兩個縮放按鈕
128        /**================放大的按鈕=====================*/
129     //1.建立對象
130     UIButton *plusbtn=[UIButton buttonWithType:UIButtonTypeCustom];
131     //2.設置屬性
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.添加到視圖
137     [self.view addSubview:plusbtn];
138     //4.單擊事件
139     [plusbtn addTarget:self action:@selector(Zoom:) forControlEvents:UIControlEventTouchUpInside];
140     
141     
142     /**================縮小的按鈕=====================*/
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 //控制方向的多個按鈕調用同一個方法
153 -(void)Click:(UIButton *)button
154 {
155 
156     //練習使用frame屬性
157     //CGRect frame=self.headImageView.frame;
158     
159     /**注意，這裏若是控制位置的兩個屬性frame和center同時使用的話，會出現很好玩的效果，注意分析*/
160     //練習使用center屬性
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             //發現一個bug,以前的問題是由於少寫了break,形成了它們的順序執行，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     //首尾式設置動畫效果
182     [UIView beginAnimations:nil context:nil];
183     self.headImageView.center=center;
184     //設置時間
185     [UIView setAnimationDuration:2.0];
186     [UIView commitAnimations];
187     NSLog(@"移動!");
188     
189 }
190 -(void)Zoom:(UIButton *)btn
191 {
192     //使用frame，以本身的左上角（本身的原點）爲原點
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     //使用bounds，以中心點位原點進行縮放
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     //設置首尾動畫
219     [UIView beginAnimations:nil context:nil];
220     self.headImageView.bounds=bounds;
221     [UIView setAnimationDuration:2.0];
222     [UIView commitAnimations];
223 }
224 @end

實現效果：

3、簡單的動畫效果

簡單介紹首尾式動畫效果

（1）開始動畫

（2）設置動畫相關的時間等

（3）參與動畫的行動

（4）提交動畫

注：實現代碼參考上面的代碼