iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
Mobile Development

《菜鳥のSwift》持續30天開發挑戰系列 第 5

《DAY 5》想在多個按鈕上重複使用已經設定好的外觀?

如果有同樣外觀的按鈕要重複使用,難道要每個都拉藍線建立 IBOutlet 去設定嗎?
https://ithelp.ithome.com.tw/upload/images/20200903/20129680aFYgX806j3.png

其實是不必的,這樣做非常的惱人,我們可以先建立一個子類別為 UIButton 的檔案。
https://ithelp.ithome.com.tw/upload/images/20200903/20129680lFivGVmvbE.png

在檔案的 class 內加入程式碼,結果如下。

import UIKit

class CustomButton: UIButton {

    override init(frame: CGRect) {
        super.init(frame: frame)
        style() // 把要設定的樣式放在這
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        style() // 把要設定的樣式放在這
    }
    func style() {
        titleLabel?.font = UIFont.systemFont(ofSize: 20)
        setTitleColor(UIColor.red, for: .normal)
        layer.borderWidth = 5
        layer.borderColor = UIColor.red.cgColor
        layer.cornerRadius = 20 // 設定圓角
        
        // 注意上面五行前面都不需要加 IBOutlet 的屬性名稱
    }

}

然後在要設定成同樣外觀的按鈕各自面板中的 Class,都設為我們剛剛建立好的 CustomButton。
https://ithelp.ithome.com.tw/upload/images/20200903/20129680Bdibyraf5e.png

可看到即使沒有拉藍線建立 IBOutlet 各自去設定,一樣可以達到同樣效果。
https://ithelp.ithome.com.tw/upload/images/20200903/201296807QHhP0RiUi.png

這是開發專案常常用到的技巧,分享給各位!


上一篇
《DAY 4》客製化屬於自己的按鈕外觀吧!
下一篇
《DAY 6》使用表格元件
系列文
《菜鳥のSwift》持續30天開發挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言