1. 程式人生 > >Swift-顏色設定技巧和(.clr)檔案的建立和使用

Swift-顏色設定技巧和(.clr)檔案的建立和使用

在 iOS 開發中,顏色設定大致有兩種方式,一種是在Storyboard或 XIB 中通過顏色色板設定,另一種是出程式碼中通過 UIColor 這個類來設定,下面我總結下平時顏色設定的常用方法和一些技巧

一、iOS 顏色色板介紹

在iOS開發中,我們使用 Storyboard 和 XIB 的時候,對控制元件顏色的設定都是通過顏色色板來設定的,Xcode 自帶顏色色板,利用它,可以非常方便的選取和設定顏色。
其實顏色色板的色彩元素是從(.clr)檔案獲取的

下面是Xcode自帶色板截圖:

這裡寫圖片描述 這裡寫圖片描述 這裡寫圖片描述

二、自定義顏色色板元素

如何建立(.clr)檔案,我google一下,發現最方便快捷的方式就是通過Xcode自帶的顏色色板進行建立

參考資料

01-按照箭頭指示建立新的色板
這裡寫圖片描述

02-選擇“new“,建立一個色板,並”rename“重新命名
這裡寫圖片描述這裡寫圖片描述

03-通過箭頭所指示位置的加號和減號新增顏色,雙擊顏色可以重新命名
這裡寫圖片描述

04-以後通過 Storyboard 或 XIB 設定顏色,就可以通過自定義色板進行設定了

用法跟其他顏色選取一樣

05-獲取自定義顏色色板檔案(.clr)所在位置

額外介紹,為下一篇做鋪墊

分享一個最新開啟隱藏檔案的命令

command + shift + .

開啟系統隱藏檔案,按著箭頭找到 (.clr) 檔案

這裡寫圖片描述

三、Xcode顏色色板功能介紹

  • 通過顏色選擇器選擇任何位置任何顏色
  • 可以設定顏色的透明度
  • 可以設定 RGB 顏色
  • 也可以設定 CMYK 顏色,還有 HSB 顏色
  • 最重要的是:可以通過(.clr)檔案,自定義顏色色板

四、專案中顏色的設定和具體介紹

在現實開發中,我們專案中需要用到的顏色不多,但很多通過顏色色板不能直接獲取,需要自定義顏色屬性,這樣很不敏捷

  • 用法一:可以通過給 UIColor 新增延展,模擬系統自帶屬性設定顏色
  • 用法二:在專案中為每個需要用到的顏色定義一個常量,直接讀取顏色常量設定顏色
  • 用法三:自定義(.clr)檔案,將專案中所需要的顏色新增到顏色色板中
  • 用法四:通過 R.swift 中的 R.color 配合(.clr)檔案設定顏色,更加方便快捷

用法一

設定顏色:

// 定義擴充套件
extension UIColor {

    static func rgbColor(r: CGFloat, g: CGFloat, b: CGFloat, alpha: CGFloat = 1.0) -> UIColor {
        let color: UIColor = UIColor(red: r/255.0, green: g/255.0, blue: b/255.0, alpha: alpha)
        return color
    }

    open class var _46_97_67: UIColor {
        return UIColor.rgbColor(r: 46, g: 97, b: 67)
    }

    open class var _61_141_118: UIColor {
        return UIColor.rgbColor(r: 61, g: 141, b: 118)
    }

    open class var _240_135_157: UIColor {
        return UIColor.rgbColor(r: 240, g: 135, b: 157)
    }
}

具體使用

    // 通過延展設定顏色
    view.backgroundColor = UIColor._46_97_67
    view.backgroundColor = UIColor._61_141_118
    view.backgroundColor = UIColor._240_135_157

用法二

設定顏色

/// 定義常量
let color_46_97_67    = UIColor.rgbColor(r: 46, g: 97, b: 67)
let color_61_141_118  = UIColor.rgbColor(r: 61, g: 141, b: 118)
let color_240_135_157 = UIColor.rgbColor(r: 240, g: 135, b: 157)

具體使用

    // 通過常量設定顏色
    view.backgroundColor = color_46_97_67
    view.backgroundColor = color_61_141_118
    view.backgroundColor = color_240_135_157

用法三:

通過自定義顏色色板元素進行選取
缺點:跟系統顏色一樣,不能用使用程式碼設定

用法四:

這裡只介紹如何使用,具體如何配置下一篇細講

    // 通過 R.swift 設定顏色
    view.backgroundColor = R.color.lotusColor._46_97_67()
    view.backgroundColor = R.color.lotusColor._61_141_118()
    view.backgroundColor = R.color.lotusColor._240_135_157()