Swift - 學習按鈕（UIButton）的用法

前言

開發中，按鈕必不可少，學習Swift按鈕的基礎知識，也絕對要了解。本篇文章，目的在於學習、留有資料，方便查看。

目錄:

1.按鈕的創建
2. 按鈕的文字設置
3. 按鈕文字顏色的設置
4. 按鈕文字陰影顏色的設置
5. 按鈕文字的字體和大小設置
6. 按鈕背景顏色設置
7. 按鈕文字圖標的設置
8. 設置按鈕背景圖片
9. 按鈕觸摸點擊事件響應
10. 按鈕文字太長時的處理方法

1.按鈕的創建

(1) 按鈕有下面四種類型：

- UIButtonType.system：前面不帶圖標，默認文字顏色爲藍色，有觸摸時的高亮效果   

- UIButtonType.custom：定製按鈕，前面不帶圖標，默認文字顏色爲白色，無觸摸時的高亮效果

-  UIButtonType.contactAdd：前面帶“+”圖標按鈕，默認文字顏色爲藍色，有觸摸時的高亮效果

- UIButtonType.infoDark：爲感嘆號“!”圓形按鈕

- UIButtonType.infoLight：爲感嘆號“!”圓形按鈕

（注意：自ios7起，infoDark、infoLight、detailDisclosure效果都是一樣的）

圖例

圖例代碼:

        // UIButtonType.system
         let btn1 = UIButton(type: .system)
         btn1.frame = CGRect(x: 35, y: 100, width: 250, height: 40)
         btn1.setTitle("UIButtonType.system", for: .normal)
         btn1.backgroundColor = UIColor.orange
         self.view.addSubview(btn1)
         
         // UIButtonType.custom
         let btn2 = UIButton(type: .custom)
         btn2.frame = CGRect(x: 35, y: 150, width: 250, height: 40)
         btn2.setTitle("UIButtonType.custom", for: .normal)
         btn2.backgroundColor = UIColor.cyan
         self.view.addSubview(btn2)
         
         // UIButtonType.contactAdd
         let btn3 = UIButton(type: .contactAdd)
         btn3.frame = CGRect(x: 35, y: 200, width: 250, height: 40)
         btn3.setTitle("UIButtonType.contactAdd", for: .normal)
         btn3.backgroundColor = UIColor.magenta
         self.view.addSubview(btn3)
         
         // UIButtonType.detailDisclosure
         let btn4 = UIButton(type: .detailDisclosure)
         btn4.frame = CGRect(x: 35, y: 250, width: 250, height: 40)
         btn4.setTitle("UIButtonType.detailDisclosure", for: .normal)
         btn4.backgroundColor = UIColor.green
         self.view.addSubview(btn4)
        
         // UIButtonType.infoDark
        let btn5 = UIButton(type: .infoDark)
         btn5.frame = CGRect(x: 35, y: 300, width: 250, height: 40)
        btn5.setTitle("UIButtonType.infoDark", for: .normal)
         btn5.backgroundColor = UIColor.yellow
         self.view.addSubview(btn5)
         
         // UIButtonType.infoLight
         let btn6 = UIButton(type: .infoLight)
         btn6.frame = CGRect(x: 35, y: 350, width: 250, height: 40)
         btn6.setTitle("UIButtonType.infoLight", for: .normal)
         btn6.backgroundColor = UIColor.brown
         self.view.addSubview(btn6)

(2) 對於Custom定製類型按鈕，代碼可簡化爲：

let button = UIButton(frame:CGRect(x:10, y:150, width:100, height:30))

2. 按鈕的文字設置

 button.setTitle("普通狀態", for:.normal)      //普通狀態下的文字
 button.setTitle("觸摸狀態", for:.highlighted) //觸摸狀態下的文字
 button.setTitle("禁用狀態", for:.disabled)    //禁用狀態下的文字
 button.setTitle("選中狀態", for:.selected)    //選中狀態下的文字

3. 按鈕文字顏色的設置

 button.setTitleColor(UIColor.black, for: .normal)      //普通狀態下文字的顏色
 button.setTitleColor(UIColor.green, for: .highlighted) //觸摸狀態下文字的顏色
 button.setTitleColor(UIColor.gray, for: .disabled)     //禁用狀態下文字的顏色
 button.setTitleColor(UIColor.gray, for: selected)     //選中狀態下文字的顏色

4. 按鈕文字陰影顏色的設置

 button.setTitleShadowColor(UIColor.green, for:.normal)       //普通狀態下文字陰影的顏色
 button.setTitleShadowColor(UIColor.yellow, for:.highlighted) //普通狀態下文字陰影的顏色
 button.setTitleShadowColor(UIColor.gray, for:.disabled)      //普通狀態下文字陰影的顏色
 button.setTitleShadowColor(UIColor.gray, for:.selected)      //選中狀態下文字陰影的顏色

5. 按鈕文字的字體和大小設置
 button.titleLabel?.font = UIFont.systemFont(ofSize: 11)

6. 按鈕背景顏色設置
 button.backgroundColor = UIColor.black

7. 按鈕文字圖標的設置

（1）默認情況下按鈕會被渲染成單一顏色

let btn7 = UIButton(type:.system)
btn7.frame = CGRect(x: 35, y: 400, width: 250, height: 40)
btn7.setTitle("   按鈕文字", for: .normal)
btn7.setImage(UIImage(named: "xunbao_icon"), for: .normal)
btn7.backgroundColor = UIColor.cyan
btn7.adjustsImageWhenHighlighted=false //使觸摸模式下按鈕也不會變暗（半透明）
btn7.adjustsImageWhenDisabled=false //使禁用模式下按鈕也不會變暗（半透明）
self.view.addSubview(btn7)

（2）也可以設置成保留圖標原來的顏色

 let iconImage = UIImage(named: "xunbao_iconv")?.withRenderingMode(.alwaysOriginal)
 btn7.setImage(iconImage, for: .normal)

8. 設置按鈕背景圖片

 button.setBackgroundImage(UIImage(named:"bg1"), for:.normal)

9. 按鈕觸摸點擊事件響應

 //不傳遞觸摸對象（即點擊的按鈕）
 button.addTarget(self, action:#selector(tapped), for:.touchUpInside)
 @objc func tapped(){
      print("tapped")
 }

 //傳遞觸摸對象（即點擊的按鈕），需要在定義action參數時，方法名稱後面帶上冒號
 button.addTarget(self, action:#selector(tapped(_:)), for:.touchUpInside)
  
 @objc func tapped(_ button:UIButton){
      print(button.title(for: .normal))
 }

常用的觸摸事件類型：

  touchDown：單點觸摸按下事件，點觸屏幕

  touchDownRepeat：多點觸摸按下事件，點觸計數大於1，按下第2、3或第4根手指的時候

  touchDragInside：觸摸在控件內拖動時

  touchDragOutside：觸摸在控件外拖動時

  touchDragEnter：觸摸從控件之外拖動到內部時

  touchDragExit：觸摸從控件內部拖動到外部時

  touchUpInside：在控件之內觸摸並擡起事件

  touchUpOutside：在控件之外觸摸擡起事件

  touchCancel：觸摸取消事件，即一次觸摸因爲放上太多手指而被取消，或者電話打斷

10. 按鈕文字太長時的處理方法

默認情況下，如果按鈕文字太長超過按鈕尺寸，則會省略中間的文字。比如下面代碼：
 let button = UIButton(frame:CGRect(x:20, y:50, width:130, height:50))
 button.setTitle("這個是一段 very 長的文字", for:.normal) //普通狀態下的文字
 button.setTitleColor(UIColor.white, for: .normal) //普通狀態下文字的顏色
 button.backgroundColor = UIColor.orange
 self.view.addSubview(button)
運行效果如下，中間文字使用 ... 代替

我們通過修改 button 按鈕中 titleLabel 的 lineBreakMode 屬性，便可以調整按鈕在文字超長的情況下如何顯示，以及是否換行。
   //省略尾部文字
   button.titleLabel?.lineBreakMode = .byTruncatingTail
lineBreakMode 共支持如下幾種樣式：

.byTruncatingHead：省略頭部文字，省略部分用...代替

.byTruncatingMiddle：省略中間部分文字，省略部分用...代替（默認）

.byTruncatingTail：省略尾部文字，省略部分用...代替

.byClipping：直接將多餘的部分截斷

.byWordWrapping：自動換行（按詞拆分）

.byCharWrapping：自動換行（按字符拆分）

注意：當設置自動換行後（byWordWrapping 或 byCharWrapping），我們可以在設置 title 時通過 \n 進行手動換行。

原文學習地址:Swift - 按鈕（UIButton）的用法