既然是說要做最基礎的按鈕
那不得不介紹這款重量級的物件 - UIButton
(還記得Bear在上篇文章中提到的 UIView 跟 UILabel 嗎?)
按鈕嘛, 當然就是按下去會有事情發生
今天Bear的範例內容是,當你每按一次按鈕時,畫面上的數字加1
(大家也可以自己練習思考看看這要怎麼做到喔!)
經由這範例,Bear順便介紹以下幾個實用技巧:
1.全域變數宣告(Global Variable)
2.標簽使用(Tag)
3.方法(Method)
廢話不多說, Bear馬上一一來介紹今天的程式碼
(程式碼參考上篇教學內容)
首先在ViewController.m 內的程式碼開頭
@interface ViewController ()
與
@end
之間插入一組大括號
並在裡面宣告一個 int (整數) i,如下圖所示
這樣我們會得到一個全域變數i
那不得不介紹這款重量級的物件 - UIButton
(還記得Bear在上篇文章中提到的 UIView 跟 UILabel 嗎?)
按鈕嘛, 當然就是按下去會有事情發生
今天Bear的範例內容是,當你每按一次按鈕時,畫面上的數字加1
(大家也可以自己練習思考看看這要怎麼做到喔!)
經由這範例,Bear順便介紹以下幾個實用技巧:
1.全域變數宣告(Global Variable)
2.標簽使用(Tag)
3.方法(Method)
廢話不多說, Bear馬上一一來介紹今天的程式碼
(程式碼參考上篇教學內容)
首先在ViewController.m 內的程式碼開頭
@interface ViewController ()
與
@end
之間插入一組大括號
並在裡面宣告一個 int (整數) i,如下圖所示
這樣我們會得到一個全域變數i
接著在跟之前創造UIView跟UILabel一樣的地方,編寫新的程式碼,如圖示
接下來一一解析程式碼內容!
-(void)viewDidLoad { }
大括號內隨我們自由編寫程式碼,程式碼會在畫面讀取完後執行一次
這次我們創造兩個物件分別為UIButton及UILabel
button為一藍色按鈕,上面則有白色的文字press!!
UIButton上也可設定文字的,但方法與UILabel不太一樣
它沒有text的屬性,而是用setTitle forState的方法
[button setTitle:@"press!!" forState:0];
state 0就是按鈕處在一般狀態,更有其他如:點擊時狀態
可用command點擊參考
(不清楚command點擊的意思的話, 參考上篇教學)
而文字屬性則需要先叫出button上的titleLabel之後就都相同了
接著我們將全域變數所宣告的整數 i 設其值為0
然後就創造一個我們熟悉的UILabel
但這次我們文字內容要使用會變動的 i
因次我們使用NSString 的stringWithFormat 方法
number.text =[NSString stringWithFormat:@“%d",i];
文字內容的部分我們打%d用以顯示後面的 i 整數
其他更 有%f 浮點數,%@ 物件資訊 等
(物件資訊的顯示相當有用, 請大家記好之後很常會用到!!)
%d前後也可自行增加靜態文字
而有兩個以上的變數的話,需要打兩次%d,變數的部分則以逗號隔開
不知道眼尖的讀者有沒有發現,有一個沒看過的東西出現了!!
numer.tag = 101;
這是什麼東西?!
在viewDidLoad這個方法大括號內創造的物件只能在這裡使用
在別的方法內你打number的話,程式碼根本就不知道它是什麼東西
因此我們把它貼上標簽101,這樣其他的方法就能根據101知道他是什麼東西囉
這裡有個小地方要注意的是,標簽儘量用100以上的數字,因為100以下的數字可能會被xcode內建的程式就使掉了
最後一行的程式碼就是讓button 可以有點擊後執行動作的功能
[button addTarget:self action:@selector(count) forControlEvents:UIControlEventTouchUpInside];
addTarget 目標 self 就是本視圖控制器viewController
@selector 選擇器內的方法 count 則是點選按鈕後要執行的動作,程式碼內容我們待會介紹forControlEvents是按鈕觸發的條件,這邊我們選擇UIControlEventTouchUpInside(點選button區域內)
這些都做完,可別忘了把元件加到畫面上呢!(想想addSubview)
不然可是會一片空白喲!
接著我們要做最後一個步驟了!
那就是撰寫我們的count方法
-(void)viewDidLoad { }
大括號內隨我們自由編寫程式碼,程式碼會在畫面讀取完後執行一次
這次我們創造兩個物件分別為UIButton及UILabel
button為一藍色按鈕,上面則有白色的文字press!!
UIButton上也可設定文字的,但方法與UILabel不太一樣
它沒有text的屬性,而是用setTitle forState的方法
[button setTitle:@"press!!" forState:0];
state 0就是按鈕處在一般狀態,更有其他如:點擊時狀態
可用command點擊參考
(不清楚command點擊的意思的話, 參考上篇教學)
而文字屬性則需要先叫出button上的titleLabel之後就都相同了
接著我們將全域變數所宣告的整數 i 設其值為0
然後就創造一個我們熟悉的UILabel
但這次我們文字內容要使用會變動的 i
因次我們使用NSString 的stringWithFormat 方法
number.text =[NSString stringWithFormat:@“%d",i];
文字內容的部分我們打%d用以顯示後面的 i 整數
其他更 有%f 浮點數,%@ 物件資訊 等
(物件資訊的顯示相當有用, 請大家記好之後很常會用到!!)
%d前後也可自行增加靜態文字
而有兩個以上的變數的話,需要打兩次%d,變數的部分則以逗號隔開
不知道眼尖的讀者有沒有發現,有一個沒看過的東西出現了!!
numer.tag = 101;
這是什麼東西?!
在viewDidLoad這個方法大括號內創造的物件只能在這裡使用
在別的方法內你打number的話,程式碼根本就不知道它是什麼東西
因此我們把它貼上標簽101,這樣其他的方法就能根據101知道他是什麼東西囉
這裡有個小地方要注意的是,標簽儘量用100以上的數字,因為100以下的數字可能會被xcode內建的程式就使掉了
最後一行的程式碼就是讓button 可以有點擊後執行動作的功能
[button addTarget:self action:@selector(count) forControlEvents:UIControlEventTouchUpInside];
addTarget 目標 self 就是本視圖控制器viewController
@selector 選擇器內的方法 count 則是點選按鈕後要執行的動作,程式碼內容我們待會介紹forControlEvents是按鈕觸發的條件,這邊我們選擇UIControlEventTouchUpInside(點選button區域內)
這些都做完,可別忘了把元件加到畫面上呢!(想想addSubview)
不然可是會一片空白喲!
接著我們要做最後一個步驟了!
那就是撰寫我們的count方法
如圖,我們在viewDidLoad{}結束後的地方,新增一個方法
-(void)count
{
i++;
UILabel *number = (UILabel *)[self.view viewWithTag:101];
number.text =[NSString stringWithFormat:@"%d",i];
}
程式碼內容 i++ 表示 i = i + 1
我們在 viewDidLoad已經給 i 值 0 了
所以這裡執行一次的話 i 就會變 1 ,第二次變 2 ,累加上去
i 更新了,那我number內的數字也要跟著更新囉,但是viewDidLoad內的程式碼只會執行一次
所以我們只好把number的文字內容在這裏在攥寫一次囉,讓她跟著 i 一起更新
糟糕!
viewDidLoad內用到的number是區域變數啊!這裡根本沒辦法使用
怎麼辦呢?
這個時候之前所設定的標簽(tag)就派上用場囉
UILabel *number = (UILabel *)[self.view viewWithTag:101];
self.view viewWithTag:101 就在這視圖控制器(self)的畫面(view)內找到標簽號碼101的view
但是找到後出來的東西只會是一個UIView而已,
因此我們要在前面加上(UILabel *)將它轉換成UILabel元件,
這裡我們一樣宣告成number變數,變數名字不同也無所謂
接著將number上的文字更新一次
number.text =[NSString stringWithFormat:@"%d",i];
大功告成!以後每點擊一次按鈕,就會執行一次count
讓我們command + R 一起來看看成果吧!!
-(void)count
{
i++;
UILabel *number = (UILabel *)[self.view viewWithTag:101];
number.text =[NSString stringWithFormat:@"%d",i];
}
程式碼內容 i++ 表示 i = i + 1
我們在 viewDidLoad已經給 i 值 0 了
所以這裡執行一次的話 i 就會變 1 ,第二次變 2 ,累加上去
i 更新了,那我number內的數字也要跟著更新囉,但是viewDidLoad內的程式碼只會執行一次
所以我們只好把number的文字內容在這裏在攥寫一次囉,讓她跟著 i 一起更新
糟糕!
viewDidLoad內用到的number是區域變數啊!這裡根本沒辦法使用
怎麼辦呢?
這個時候之前所設定的標簽(tag)就派上用場囉
UILabel *number = (UILabel *)[self.view viewWithTag:101];
self.view viewWithTag:101 就在這視圖控制器(self)的畫面(view)內找到標簽號碼101的view
但是找到後出來的東西只會是一個UIView而已,
因此我們要在前面加上(UILabel *)將它轉換成UILabel元件,
這裡我們一樣宣告成number變數,變數名字不同也無所謂
接著將number上的文字更新一次
number.text =[NSString stringWithFormat:@"%d",i];
大功告成!以後每點擊一次按鈕,就會執行一次count
讓我們command + R 一起來看看成果吧!!
是不是簡單又很酷炫呢!?
知道這些以後, 接下來就能應用製作自己的按鈕或是其他元件了喔!!
Bear實驗室iOS開發教學文:
[入門系列]
1. Xcode 5 - 你的第一支Hello World iOS程式
2. Xcode 5 - UIView 與 UILabel
[進階系列]
1. iOS 製作廣播電台
2. iOS 製作視訊串流
3. iOS 與Arduino製作藍芽聊天室
4. iOS 製作長曝光相機
5. iOS CoreblueTooth FrameWork
如果大家有任何好奇的內容也歡迎來信給我們, 我們也會盡可能製作教學給大家參考喔!!!
喜歡這篇文章嗎? 加入Takobear粉絲團吧!
知道這些以後, 接下來就能應用製作自己的按鈕或是其他元件了喔!!
Bear實驗室iOS開發教學文:
[入門系列]
1. Xcode 5 - 你的第一支Hello World iOS程式
2. Xcode 5 - UIView 與 UILabel
[進階系列]
1. iOS 製作廣播電台
2. iOS 製作視訊串流
3. iOS 與Arduino製作藍芽聊天室
4. iOS 製作長曝光相機
5. iOS CoreblueTooth FrameWork
如果大家有任何好奇的內容也歡迎來信給我們, 我們也會盡可能製作教學給大家參考喔!!!
喜歡這篇文章嗎? 加入Takobear粉絲團吧!