繼上篇說明如何在iOS內加入畫面元件

這次 Bear 要教大家如何在畫面上製作一個按鈕進行互動囉!!

雖然是很簡單的目的但是卻很重要!! 初學 iOS 的趕快往下看吧!

[cjtoolbox name=’google_ad’]

既然是說要做最基礎的按鈕

那不得不介紹這款重量級的物件 - 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方法

如圖,我們在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 一起來看看成果吧!!

是不是簡單又很酷炫呢!?知道這些以後, 接下來就能應用製作自己的按鈕或是其他元件了喔!!

如果大家有任何好奇的內容也歡迎來信給我們, 我們也會盡可能製作教學給大家參考喔!!!

喜歡這篇文章嗎? 加入Takobear粉絲團吧!