iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
1
自我挑戰組

Hey! UIKit, 做個朋友吧~系列 第 2

Day 02: 你就是UIButton嗎?久仰久仰!

  • 分享至 

  • xImage
  •  

邊緣人:我可以戳你一下嗎>///////<
UIButton:變...變態!!

------------------------------你什麼也沒看到------------------------------

那就先來認識一下UIButton吧~
UIButton是個非常重要的UI元件,許多使用者點擊後的回饋動作、或是與應用程式的互動,都是由UIButton所實現的。
在swift的api裡定義了創建button的5個步驟,跟把大象放進冰箱3步驟有87%像:

  • 建立一個button,並設定他的類型。
  • 設定button內的文字或圖片,並將大小調整至符合按鈕的內容。
  • 為button連結一個或多個點擊後的回饋動作(action method)。
  • 設定button的auto layout。
  • 提供button一些輔助使用以及在地化等資訊。

關於第5點大家可能比較陌生。
判斷的依據是,我一開始看到覺得很陌生!因為我從沒設定過這些。
而且可能有人發現,其實就算不提供這些資訊,app還是會跑,動作還是會回饋。
那為什麼還需要設定這些資訊呢?這是apple的小貼心,之後會跟大家說明。

建立button

首先要建立一個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看起來有點單調嗎?先做些設定讓他變成我的形狀吧~

Attributes of UIButton

接下來會介紹一些button有的特性,其實這些東西在attribute inspector裡設定是很快的,但我想趁機學一下純code,所以以下呈現幾乎都會用純code來完成。

Type

apple本身為UIButton提供了7種形式(roundedRect即將被淘汰,不建議使用,故沒有出現在attributr inspector的下拉式選單內),除了在attributes inspector裡選擇外,也可以像上述第2行程式碼一樣在初始化時指定。

System是系統為button預設提供的樣式(下圖左)。
Detail Disclosure, Info Light, Info Dark的外型是一樣的(下圖右),聽說iOS7以前長得不一樣,後來蘋果採用扁平化設計之後就長一樣了,但沒有從buttonType的enum裡移除case(晶晶體?),因此殘留到現在。
Add Contact則為下圖中間的樣式。

Title / Title Color / Image / Background Image

如果上述的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)

Title Font and Attributes

而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吧!


上一篇
Day 01: 我...我喜歡你!請跟我做朋友!
下一篇
Day 03: 利用UIButton的State來實作點擊後的按鈕變化吧~
系列文
Hey! UIKit, 做個朋友吧~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ytyubox
iT邦新手 5 級 ‧ 2019-09-17 23:58:09

UIView 有一個屬性是 semanticContentAttribute, 可以調整 UIbutton 上的 imageView 與 label 的左右順序

我要留言

立即登入留言