iOS 9應用開發教程之使用代碼添加按鈕美化按鈕

標籤：

iOS 9應用開發教程之使用代碼添加按鈕美化按鈕豐富的使用者介面

在iOS9中提供了很多的控制項以及視圖來豐富使用者介面，對於這些視圖以及控制項我們在上一章中做了簡單的介紹。本章我們將詳細講解這些視圖。

ios9中使用按鈕接收使用者輸入

按鈕是iOS應用中最常使用也是最簡單的控制項，它常用來響應使用者的點擊事件，2.1所示。在圖2.1中，藍色的矩形就是一個按鈕，它的標題為“登入”。在iOS 7以後按鈕只是一塊普通的文本，沒有輪廓，邊框，背景顏色，或其他裝飾功能（為了美觀，很多的應用程式中的按鈕還是有背景的，就像圖2.1中的按鈕）。一般使用UIButton類來實現按鈕。本節將主要講解按鈕的添加、美化按鈕以及如何?按鈕的響應等內容。

 

圖2.1  QQ登入介面

ios9中使用代碼添加按鈕

由於使用編輯介面添加視圖的方式比較簡單，所以不在介紹。這裡，直接講解代碼中如何添加。使用代碼為主視圖添加一個按鈕的方式和在1.3.3節中講解的步驟是一樣的。首先需要使用UIButton類執行個體化一個按鈕對象，然後是設定位置和大小，最後是使用addSubview()方法將按鈕對象添加到主視圖中。（由於視圖的添加方式都一樣，後面將省略使用代碼添加視圖這塊內容。）。

【樣本2-1】以下將為主視圖添加一個背景顏色為橘黃色的按鈕對象。代碼如下：

 

• import UIKit
• class ViewController: UIViewController {
•     override func viewDidLoad() {
•         super.viewDidLoad()
•         // Do any additional setup after loading the view, typically from a nib.
•         //添加按鈕對象
•         let button=UIButton(frame: CGRectMake(143, 241, 88, 30))
•         button.backgroundColor=UIColor.orangeColor()
•         self.view.addSubview(button)
•     }
• ……
• }

 

此時運行程式，會看到2.2所示的效果。

 

圖2.2  運行效果

注意：在圖2.2中所顯示的橘黃色地區其實就是添加的按鈕。

IOS9中美化按鈕

美化按鈕說白了就是對按鈕的屬性進行設定，設定按鈕的屬性有兩種方法：一種是使用編輯介面中的屬性偵測器；另一種是使用代碼進行設定。以下將主要講解如何使用代碼對按鈕進行設定。

1.設定按鈕的外觀

設定按鈕的外觀其實就是對按鈕的標題、映像等進行的設定。表2-1列出了常用的一些設定按鈕外觀的屬性。

表2-1  常用屬性

 

【樣本2-2】下面將在主視圖中添加一個按鈕。此按鈕的標題為I am button，標題的顏色為黑色。代碼如下：

 

• import UIKit
• class ViewController: UIViewController {
•     override func viewDidLoad() {
•         super.viewDidLoad()
•         // Do any additional setup after loading the view, typically from a nib.
•         //添加按鈕對象
•         let button=UIButton(frame: CGRectMake(135, 241, 97, 30))
•         button.setTitle("I am Button", forState: UIControlState.Normal)                                  //設定標題
•         button.setTitleColor (UIColor.blackColor(), forState: UIControlState.Normal)          //設定標題顏色
•         self.view.addSubview(button)
•     }
• ……
• }

 

此時運行程式，會看到2.3所示的效果。

2.設定按鈕的狀態

在樣本2-2中，設定按鈕的標題和顏色時，需要對按鈕的狀態進行設定，表示按鈕在某一狀態下的標題和標題顏色是什麼樣子。例如，UIControlState.Normal就表示按鈕的一種狀態。對於像按鈕的這類別檢視，即可以接受使用者輸入的視圖也被稱為控制項。這些控制項都有自己的狀態。表2-2就為開發人員詳細介紹了控制項的狀態。

表2-2  控制項的狀態

 

3.設定按鈕的類型

按鈕的形式是多種多樣的。例如，在通訊錄中，添加新連絡人的按鈕是一個加號；查看來電的詳細資料時是一個驚嘆號等。這些按鈕的實現，可以在執行個體化按鈕對象時使用UIButtonType來實現。UIButtonType中的內容如表2-3所示。 

表2-3  UIButtonType的內容

 

【樣本2-3】以下將在主視圖中添加兩個不同風格的按鈕。代碼如下：

 

• import UIKit
• class ViewController: UIViewController {
•     override func viewDidLoad() {
•         super.viewDidLoad()
•         // Do any additional setup after loading the view, typically from a nib.
•         //添加按鈕對象
•         let button1=UIButton(type: UIButtonType.ContactAdd)
•         button1.center=CGPointMake(190, 250)
•         self.view.addSubview(button1)
•         //添加按鈕對象
•         let button2=UIButton(type: UIButtonType.DetailDisclosure)
•         button2.center=CGPointMake(190, 450)
•         self.view.addSubview(button2)
•     }
• ……
• }

 

此時運行程式，會看到2.4所示的效果。

 

圖2.3  運行效果                      圖2.4  運行效果

ios9中實現按鈕的響應

按鈕主要是實現使用者互動的，即實現響應。按鈕實現響應的方式可以根據添加按鈕的不同分為兩種：一種是編輯介面添加按鈕實現的響應；另一種是使用代碼添加按鈕實現的響應。

1.編輯介面添加按鈕實現的響應

使用編輯介面添加按鈕可以使用拖動的方式來實現按鈕的響應，它也是最簡單的一種實現響應的方式。

【樣本2-4】以下將實現輕拍按鈕，改變主視圖背景顏色的功能。具體的操作步驟如下：

（1）建立一個Single View Application模板類型的項目，命名為UIButton-response。

（2）開啟Main.storyboard檔案，將主視圖的尺寸設定為iPhone 4.7-inch。從視圖庫中拖動按鈕控制項到主視圖中，將Title設定為Tap me,Change View Color。

（3）使用設定編輯器的三個視圖方式的表徵圖，將Xcode的介面調整為2.5所示的效果。這一過程在前面的章節中講解過。

 

圖2.5  調整Xcode的介面

（4）按住Ctrl鍵拖動介面中的按鈕對象，這時會出現一個藍色的線條，將這個藍色的線條拖動到ViewController.swift檔案的空白處中，2.6所示。

 

圖2.6  按住Ctrl鍵拖動介面中的按鈕對象

（5）鬆開滑鼠後，會彈出聲明關聯插座變數一起進行的對話方塊（在前面章節中講解過），2.7所示。

 

圖2.7  彈出聲明關聯插座變數一起進行的對話方塊

（6）將Connection選項設定為Action，表示關聯的是一個動作；將Name設定為tapButton，表示關聯的動作名為tapButton，2.8所示。

 

圖2.8  填寫對話方塊

注意：這裡的Name可以是任意的。

（7）單擊Connect按鈕，會在ViewController.swift檔案中看到2.9所示的代碼。

 

圖2.9  動作

此時，當使用者輕拍按鈕後，一個叫tapButton()的方法就會被觸發。

注意：以上這一種方式是動作聲明和關聯一起進行的，還有一種先聲明動作後關聯的方式。聲明動作可以使用關鍵字IBAction。該關鍵字可以告訴故事面板的介面，此方法是一個操作，且可以被某個控制項觸發。聲明動作的文法形式如下：

 

• @IBAction func 動作名(參數:參數類型){
• }

 

2.10所示，就是在ViewController.swift檔案中編寫的動作的聲明代碼。

 

圖2.10  聲明的動作

注意：在聲明動作後，會在代碼的前面出現一個空心的小圓圈，它表示此動作還未進行關聯。

聲明好動作後，就可以進行關聯了，首先使用調整視窗中的工具，將Xcode的介面進行調整。將其調整為和圖2.5一樣的效果。

然後，按住Ctrl鍵拖動介面中的按鈕對象，這時會出現一個藍色的線條，將這個藍色的線條和檔案ViewController.swift中的動作進行關聯，2.11所示。

 

圖2.11  關聯動作

最後，鬆開滑鼠後，按鈕對象就與動作成功的關聯在一起了，此時動作前面的空心小圓圈就變為了實心的小圓圈，它表示此動作已被關聯，效果和圖2.9一樣。

（8）開啟ViewController.swift檔案，編寫代碼，此代碼將實現按鈕的響應。代碼如下：

 

• import UIKit
• class ViewController: UIViewController {
•     var isYellow:Bool=false
• @IBAction func tapButton(sender: AnyObject) {
•     //判斷主視圖的背景是否為黃色
•         if(isYellow){
•             self.view.backgroundColor=UIColor.whiteColor()                                 //設定主視圖的背景顏色
•             isYellow=false
•         }else{
•             self.view.backgroundColor=UIColor.yellowColor()
•             isYellow=true
•         }
•     }
• ……
• }

 

此時運行程式，首先會看到2.12的效果。當輕拍Tap me,Change View Color按鈕後，主視圖的背景變為黃色，2.13所示。當再一次輕拍Tap me,Change View Color按鈕，主視圖的背景顏色將會變回原來的白色。

 

圖2.12  運行效果                              圖2.13  運行效果

2.使用代碼添加按鈕實現的響應

使用代碼添加的按鈕，實現響應需要使用到addTarget(_:action:forControlEvents:)方法，其文法形式如下：

 

• func addTarget(_ target: AnyObject?,
•           action action: Selector,
• forControlEvents controlEvents: UIControlEvents)

 

其中，參數說明如下：

 

•   target：表示目標對象。它是動作訊息的發送方。
•  action：表示選取器，用來識別動作訊息。它不可以為空白。
•   controlEvents：表示控制項事件。在iOS中有19種控制項事件，如表2-4所示。

 

表2-4  控制項事件

 

【樣本2-5】以下將實現輕拍按鈕，改變主視圖背景顏色的功能。代碼如下：

 

• import UIKit
• class ViewController: UIViewController {
•     var isCyan:Bool=false
•     override func viewDidLoad() {
•         super.viewDidLoad()
•         // Do any additional setup after loading the view, typically from a nib.
•         //添加按鈕對象
•         let button=UIButton(frame: CGRectMake(90, 545, 225, 30))
•         button.setTitle("Tap me,Change View Color", forState: UIControlState.Normal)  //設定按鈕的標題
•         button.setTitleColor (UIColor.blackColor(), forState: UIControlState.Normal)   //設定按鈕標題的顏色
•         self.view.addSubview(button)
•         //實現按鈕的響應
•         button.addTarget(self, action: "tapbutton", forControlEvents: UIControlEvents.TouchUpInside)
• }
• func tapbutton(){
• //判斷主視圖的背景顏色是否為青色
•         if(isCyan){
•             self.view.backgroundColor=UIColor.whiteColor()
•             isCyan=false
•         }else{
•             self.view.backgroundColor=UIColor.cyanColor()
•             isCyan=true
•         }
•     }
• ……
• }

 

此時運行程式，首先會看到2.14的效果。當輕拍Tap me,Change View Color按鈕後，主視圖的背景變為青色，2.15所示。當再一次輕拍Tap me,Change View Color按鈕，主視圖的背景顏色將會變回原來的白色。

 

圖2.14  運行效果                                 圖2.15  運行效果

本文選自：iOS 9應用開發基礎教程大學霸內部資料，轉載請註明出處，尊重技術尊重IT人！

iOS 9應用開發教程之使用代碼添加按鈕美化按鈕