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

時間 2019-11-06

標籤 ios 應用開發教程使用代碼添加按鈕美化欄目 iOS 简体版

原文原文鏈接

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

豐富的用戶界面

在iOS9中提供了不少的控件以及視圖來豐富用戶界面，對於這些視圖以及控件咱們在上一章中作了簡單的介紹。本章咱們將詳細講解這些視圖。ios

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

按鈕是iOS應用中最常使用也是最簡單的控件，它經常使用來響應用戶的點擊事件，如圖2.1所示。在圖2.1中，藍色的矩形就是一個按鈕，它的標題爲「登陸」。在iOS 7之後按鈕只是一塊普通的文本，沒有輪廓，邊框，背景顏色，或其餘裝飾功能（爲了美觀，不少的應用程序中的按鈕仍是有背景的，就像圖2.1中的按鈕）。通常使用UIButton類來實現按鈕。本節將主要講解按鈕的添加、美化按鈕以及如何實現按鈕的響應等內容。swift

圖2.1 QQ登陸界面編輯器

ios9中使用代碼添加按鈕

因爲使用編輯界面添加視圖的方式比較簡單，因此不在介紹。這裏，直接講解代碼中如何添加。使用代碼爲主視圖添加一個按鈕的方式和在1.3.3節中講解的步驟是同樣的。首先須要使用UIButton類實例化一個按鈕對象，而後是設置位置和大小，最後是使用addSubview()方法將按鈕對象添加到主視圖中。（因爲視圖的添加方式都同樣，後面將省略使用代碼添加視圖這塊內容。）。ide

【示例2-1】如下將爲主視圖添加一個背景顏色爲橘黃色的按鈕對象。代碼以下：工具

import UIKitspa
class ViewController: UIViewController {.net
override func viewDidLoad() {code
super.viewDidLoad()orm
// 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
}
}
……
}