上篇教學: 用 XCode 5寫第一支iOS入門程式
繼上次的HelloWorld之後,這次Bear 要介紹的是如何在畫面上加入物件囉
讓我們在接續上次的檔案繼續做下去!()
我們在
NSLog(@"Hello World”);
後面繼續加入三行程式碼,如下圖所示:
繼上次的HelloWorld之後,這次Bear 要介紹的是如何在畫面上加入物件囉
讓我們在接續上次的檔案繼續做下去!()
我們在
NSLog(@"Hello World”);
後面繼續加入三行程式碼,如下圖所示:
新增程式碼:
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 100, 200)];
view.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view];
以下Bear將爲每行程式碼做簡單的說明
(1) UIView *view = [UIView alloc] 為創立一個名為”view”的UIView元件
initWithFrame: 初始化該元件的框架
CGRectMake(xPoint, yPoint, width, height) 該框架為CGRect的標準
CGRect的坐標格式為左上為原點,往右為X正軸,往下為Y正軸
故本元件為一坐標(50,100),寬100長200的長方框
(2) view.backgroundColor = [UIColor yellowColor] 設定view的背景顏色
並使用UIColor裡面的yellowColor
代表view的背景顏色是黃色!!!
(3) [self.view addSubview:view] 將view加到畫面上
self就是viewController本身,是目前的畫面控制器
self.view就是當前畫面囉,預設為白色,就是之前HelloWorld時,一大片白茫茫的畫面!
同時按下鍵盤的command跟R來看我們的成果囉!
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 100, 200)];
view.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view];
以下Bear將爲每行程式碼做簡單的說明
(1) UIView *view = [UIView alloc] 為創立一個名為”view”的UIView元件
initWithFrame: 初始化該元件的框架
CGRectMake(xPoint, yPoint, width, height) 該框架為CGRect的標準
CGRect的坐標格式為左上為原點,往右為X正軸,往下為Y正軸
故本元件為一坐標(50,100),寬100長200的長方框
(2) view.backgroundColor = [UIColor yellowColor] 設定view的背景顏色
並使用UIColor裡面的yellowColor
代表view的背景顏色是黃色!!!
(3) [self.view addSubview:view] 將view加到畫面上
self就是viewController本身,是目前的畫面控制器
self.view就是當前畫面囉,預設為白色,就是之前HelloWorld時,一大片白茫茫的畫面!
同時按下鍵盤的command跟R來看我們的成果囉!
哇嗚~是不是很酷呢!我們學會了在畫面上放東西了呢!
當然, Bear可沒這麼混到這樣就結束了!!!
讓我們來回憶一下我們做了什麼
1.建立物件
2.設定物件屬性
3.將物件加至目前畫面
這邊就類似文書軟體的”插入圖片“的概念
[注意]
關於如何設定物件屬性這邊小編有個很實用的技巧
這邊請大家按著command對著程式碼中紫色的UIView點擊
此時程式碼頁面會跑出UIView的標頭檔
哇嗚~好噁心的程式碼,什麼都看不懂!!頭暈了
沒關係,跟著小編捲到以下的畫面
當然, Bear可沒這麼混到這樣就結束了!!!
讓我們來回憶一下我們做了什麼
1.建立物件
2.設定物件屬性
3.將物件加至目前畫面
這邊就類似文書軟體的”插入圖片“的概念
[注意]
關於如何設定物件屬性這邊小編有個很實用的技巧
這邊請大家按著command對著程式碼中紫色的UIView點擊
此時程式碼頁面會跑出UIView的標頭檔
哇嗚~好噁心的程式碼,什麼都看不懂!!頭暈了
沒關係,跟著小編捲到以下的畫面
有沒有看到很熟悉的東西呢?
@property(nonatomic,copy) UIColor *backgroundColor
回憶一下我們剛剛將view元件設定成黃色的程式碼
view.backgroundColor = [UIColor yellowColor];
沒錯!@property 就是UIView的屬性
因此我們可以在這找到backgroundColor屬性,且該屬性屬於UIColor形態
而yellowColor則可以在UIColor內找到
@property(nonatomic,copy) UIColor *backgroundColor
回憶一下我們剛剛將view元件設定成黃色的程式碼
view.backgroundColor = [UIColor yellowColor];
沒錯!@property 就是UIView的屬性
因此我們可以在這找到backgroundColor屬性,且該屬性屬於UIColor形態
而yellowColor則可以在UIColor內找到
對於不熟悉的物件我們都可以用這方法在這找到可以設定的屬性
是不是很方便呢!!
(P.S.這項方法在實務上也很常會使用到喔!!)
而要回到我們本來的程式碼只需要兩指手勢往左滑即可
進行到這邊相信讀者已經雀躍欲試了吧!!
xcode是不是很親近易人呢!?
有了圖塊接下來我們就來介紹由UIView延伸的文字UILabel囉!
將程式碼更改如下圖
是不是很方便呢!!
(P.S.這項方法在實務上也很常會使用到喔!!)
而要回到我們本來的程式碼只需要兩指手勢往左滑即可
進行到這邊相信讀者已經雀躍欲試了吧!!
xcode是不是很親近易人呢!?
有了圖塊接下來我們就來介紹由UIView延伸的文字UILabel囉!
將程式碼更改如下圖
新增程式碼:
UILabel *label = [[UILabel alloc] init];
label.frame = CGRectMake(50, 200, 150, 100);
label.backgroundColor = [UIColor colorWithRed:0.2f green:0.3f blue:0.5f alpha:0.5];
label.text = @"TakoBear";
label.textColor = [UIColor redColor];
label.font = [UIFont systemFontOfSize:20];
label.textAlignment = NSTextAlignmentCenter;
[self.view addSubview:label];
一樣是三個步驟:
1.建立物件
2.設定物件屬性
3.將物件加至目前畫面
接下來就是一段段解釋囉!
(1) UILabel *label = [[UILabel alloc] init]; 建立文字元件label
之前的view使用initWithFrame是順便設定方框大小,這邊使用設定物件屬性的方法讓讀者更好理解
(2) label.frame = CGRectMake(50, 200, 150, 100);
設定文字元件原點在(50,200)寬150長100的長方框
(3) label.backgroundColor = [UIColor colorWithRed:0.2f green:0.3f blue:0.5f alpha:0.5];
這裡介紹UIColor的另一種方法,經由設定紅綠藍三種顏色的數值及透明度來調配顏色,其數值則為0~1的浮點數(float)
該方法的介紹可藉由command點擊UIColor裡面尋找
*如果只想顯示文字而不需要背景顏色則不需要設定,或是使用[UIColor clearColor]設為透明
UILabel *label = [[UILabel alloc] init];
label.frame = CGRectMake(50, 200, 150, 100);
label.backgroundColor = [UIColor colorWithRed:0.2f green:0.3f blue:0.5f alpha:0.5];
label.text = @"TakoBear";
label.textColor = [UIColor redColor];
label.font = [UIFont systemFontOfSize:20];
label.textAlignment = NSTextAlignmentCenter;
[self.view addSubview:label];
一樣是三個步驟:
1.建立物件
2.設定物件屬性
3.將物件加至目前畫面
接下來就是一段段解釋囉!
(1) UILabel *label = [[UILabel alloc] init]; 建立文字元件label
之前的view使用initWithFrame是順便設定方框大小,這邊使用設定物件屬性的方法讓讀者更好理解
(2) label.frame = CGRectMake(50, 200, 150, 100);
設定文字元件原點在(50,200)寬150長100的長方框
(3) label.backgroundColor = [UIColor colorWithRed:0.2f green:0.3f blue:0.5f alpha:0.5];
這裡介紹UIColor的另一種方法,經由設定紅綠藍三種顏色的數值及透明度來調配顏色,其數值則為0~1的浮點數(float)
該方法的介紹可藉由command點擊UIColor裡面尋找
*如果只想顯示文字而不需要背景顏色則不需要設定,或是使用[UIColor clearColor]設為透明
(4) label.text = @“TakoBear"; 設定我們的文字內容
注意Xcode內中字串通常以NSString的方式存在, 要把字串或是其他既有的型別轉成物件只要加上@的符號就好
(對這不清楚的, Bear近期內解釋!)
(5) label.textColor = [UIColor redColor]; 文字顏色
(6) label.font = [UIFont systemFontOfSize:20]; 設定文字大小
systemFontOfSize 該方法可藉由command點擊UIFont裡面尋找
(7) label.textAlignment = NSTextAlignmentCenter; 對齊中間
NSTextAlignmentCenter 為一數值,直接打對應的數字也可以
可用command點擊textAlignment -> NSTextAlignment 裡面找到
* 注意, 以下的表示方式也是Apple對於列舉的常數的特殊處理方式, 大家可以把這種區分方式記錄下來
底下的NS_ENUM_AVAILABLE_IOS(6_0)代表從iOS 6 之後支援!!
(8) [self.view addSubview:label];
最後一步,將文字貼到畫面上即大功告成囉!
讓我們按下 command+R 看結果吧!
現在,對於xcode上靜態佈景流程我們已經完全掌握囉!!
其他的元件幾乎都是UIView的延伸,有機會Bear再做介紹!
對iOS 進階開發有興趣的, 可以關注以下
1. iOS 製作廣播電台
2. iOS 製作視訊串流
3. iOS 與Arduino製作藍芽聊天室
喜歡這篇文章嗎? 加入Takobear粉絲團吧!
其他的元件幾乎都是UIView的延伸,有機會Bear再做介紹!
對iOS 進階開發有興趣的, 可以關注以下
1. iOS 製作廣播電台
2. iOS 製作視訊串流
3. iOS 與Arduino製作藍芽聊天室
喜歡這篇文章嗎? 加入Takobear粉絲團吧!