iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Mobile Development

在 iOS 開發路上的大小事系列 第 10

【在 iOS 開發路上的大小事-Day10】為你的 UIButton 進行客製化吧!

一般在設定 UIButton 的時候,可能會設定文字顏色、背景色、陰影顏色等屬性
那如果要設定按鈕外觀、按鈕框線顏色、按鈕框線寬度等其他屬性的話,可能就要透過 Code 來處理

假設只有一個按鈕的話,那可能只要設定一次就好
那如果有很多按鈕都要這樣做的話,有點太花時間了

所以我們可以透過寫一次 Code,然後套用在每個有這種需求的 Button 上,所以下面就開始吧~

開始實作囉

先新增一個 Swift 檔案,選 Cocoa Touch Class

class 就自己取就可以了,Subclass 選 UIButton

目前應該會長這樣

import Foundation
import UIKit

class CustomButton: UIButton {

}

接著我們可以透過 @IBInspectable 這個屬性的定義來讓按鈕可以在介面建構器裡進行客製化設定
像是 cornerRadius、borderWidth、borderColor 等這些沒有出現在介面建構器上的選項
都可以透過這個方式來新增出來,讓我們可以方便設定

但要注意一下,只有下面這幾種屬性可以透過 @IBInspectable 的方式新增喔

  • Int
  • Double
  • String
  • Bool
  • CGFloat
  • CGPoint
  • CGSize
  • CGRect
  • UIColor
  • UIImage

下面會以 cornerRadius、borderWidth、borderColor 這三個來做示範

class CustomButton: UIButton {
    // MARK:- UIButton 圓角設定
    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }
    
    // MARK:- UIButton 框線設定
    // 框線寬度
    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        } set {
            layer.borderWidth = newValue
        }
    }
    
    // 框線顏色
    @IBInspectable var borderColor: UIColor {
        get {
            return UIColor(cgColor: layer.borderColor!)
        } set {
            layer.borderColor = newValue.cgColor
        }
    }
}

接著,點想要套用的 Button,將他的 class 改為剛剛新增的 Swift 檔案裡面的 class 名稱
以我的為例的話就是 CustomButton

接著就可以看到剛剛新增的 cornerRadius、borderWidth、borderColor 這三個選項了

雖然現在算是用好了,但如果要看到實際變化的話,還是得 Build 到模擬器或是手機/平板上才可以

這時候我們可以透過 @IBDesignable 這個屬性的定義,將其加在 class 的前面
就可以讓我們可以在不執行的情況下,就看到按鈕的改變

下面是本篇的完整程式碼

import Foundation
import UIKit

@IBDesignable class CustomButton: UIButton {
    // MARK:- UIButton 圓角設定
    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }
    
    // MARK:- UIButton 框線設定
    // 框線寬度
    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        } set {
            layer.borderWidth = newValue
        }
    }
    
    // 框線顏色
    @IBInspectable var borderColor: UIColor {
        get {
            return UIColor(cgColor: layer.borderColor!)
        } set {
            layer.borderColor = newValue.cgColor
        }
    }
}

好的,今天介紹的是比較偏向可以重複使用的小技巧,明天見~


上一篇
【在 iOS 開發路上的大小事-Day09】將常用的 Function 寫成一個 class,讓各個檔案都能使用
下一篇
【在 iOS 開發路上的大小事-Day11】透過 CocoaPods 來管理第三方套件
系列文
在 iOS 開發路上的大小事30

尚未有邦友留言

立即登入留言