一、手寫控件

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;

二、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 //一、寫一個按鈕控件，上面有一張圖片 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 //二、寫四個控制圖片左右上下移動方向的按鈕控件 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 //三、寫兩個縮放按鈕 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

實現效果：

三、簡單的動畫效果

簡單介紹首尾式動畫效果 （1）開始動畫 （2）設置動畫相關的時間等 （3）參與動畫的行動 （4）提交動畫 注：實現代碼參考上面的代碼

總結

以上是生活随笔為你收集整理的iOS开发UI篇—手写控件，frame，center和bounds属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。