邊緣人:我可以戳你一下嗎>///////<
UIButton:變...變態!!
------------------------------你什麼也沒看到------------------------------
那就先來認識一下UIButton吧~
UIButton是個非常重要的UI元件,許多使用者點擊後的回饋動作、或是與應用程式的互動,都是由UIButton所實現的。
在swift的api裡定義了創建button的5個步驟,跟把大象放進冰箱3步驟有87%像:
關於第5點大家可能比較陌生。
判斷的依據是,我一開始看到覺得很陌生!因為我從沒設定過這些。
而且可能有人發現,其實就算不提供這些資訊,app還是會跑,動作還是會回饋。
那為什麼還需要設定這些資訊呢?這是apple的小貼心,之後會跟大家說明。
首先要建立一個UIButton的實體,可以直接從Library裡面拉button至storyboard
或是由程式碼建立
let newButton = UIButton()
let detailButton = UIButton(type: .detailDisclosure)
let constraintsButton = UIButton(frame: CGRect(x: UIScreen.main.bounds.width / 2, y: UIScreen.main.bounds.height / 2, width: 100, height: 30))
以上3種生成button的程式碼
第1種只初始化了一個button實體
第2種在初始化時指定了button的type
第3種則同時指定了button的位置及長寬
初始化並設定完botton之後,記得要將button加進view裡面才能顯示。
view.addSubview(newButton)
此時執行專案,畫面中應該會有一個很單純的button(如果用code建立,需要設定他的顯示位置)。
這時候不管你怎麼點,他都不會反抗,嘿嘿,因為我們還沒有設定他的回饋動作。
不過先別急,不覺得這個button看起來有點單調嗎?先做些設定讓他變成我的形狀吧~
接下來會介紹一些button有的特性,其實這些東西在attribute inspector裡設定是很快的,但我想趁機學一下純code,所以以下呈現幾乎都會用純code來完成。
apple本身為UIButton提供了7種形式(roundedRect即將被淘汰,不建議使用,故沒有出現在attributr inspector的下拉式選單內),除了在attributes inspector裡選擇外,也可以像上述第2行程式碼一樣在初始化時指定。
System是系統為button預設提供的樣式(下圖左)。
Detail Disclosure, Info Light, Info Dark的外型是一樣的(下圖右),聽說iOS7以前長得不一樣,後來蘋果採用扁平化設計之後就長一樣了,但沒有從buttonType的enum裡移除case(晶晶體?),因此殘留到現在。
Add Contact則為下圖中間的樣式。
如果上述的type你都不喜歡,沒關係,swift還有一個類別是custom,就是專門對付你這種人。
custom完全客製化,可以是文字、圖片或2種同時存在的形式。有4個比較主要的attibutes,分別是image, title, title color和background image。
(圖片來源:UIButton)
下列程式碼分別設定了以上介紹的4種屬性,實作阿寶與老皮2個按鈕:
finnButton.setTitle("finn", for: .normal)
finnButton.setTitleColor(.black, for: .normal)
finnButton.setImage(UIImage(named: "finn"), for: .normal)
finnButton.setBackgroundImage(UIImage(named: "blue"), for: .normal)
jackButton.setTitle("jack", for: .normal)
jackButton.setTitleColor(.black, for: .normal)
jackButton.setImage(UIImage(named: "jack"), for: .normal)
jackButton.setBackgroundImage(UIImage(named: "yellow"), for: .normal)
而button中的title,還可以再額外設定字型、種類、大小、對齊位置等等⋯⋯
//字體italic、大小50、水平對齊靠左(預設置中)
finnButton.titleLabel?.font = UIFont.italicSystemFont(ofSize: 50)
finnButton.contentHorizontalAlignment = .leading
//預設字體、粗細(weight)為heavy、大小30,垂直對齊靠下(預設置中)
jackButton.titleLabel?.font = UIFont.systemFont(ofSize: 30, weight: .heavy)
jackButton.contentVerticalAlignment = .bottom
italic跟system都是內建的字體,如果你有import自己喜歡的字型的話,也可以將字型的family name設為font name來對字體進行指定。
看來button已經漸漸變成我的形狀了呢!很好很好~
下一回就來講講button state的應用和設定action吧!
UIView 有一個屬性是 semanticContentAttribute
, 可以調整 UIbutton 上的 imageView 與 label 的左右順序