#37 愛麗絲的仙境 — 調色大師 (加上亂數)

Rose

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

8 min readMay 4, 2021

藉由此作業熟練 outlet，action，UISlider, UIColor。

製作內容：

設定自訂字型
自訂 Slider 按鈕圖片
利用 Slider 調整顏色＆Label 顯示顏色數值
多個區塊的調色（利用 Segmented Control 控制）
加入顏色隨機按鈕（random）及重新調色按鈕
利用 Slider 調整圖片的圓角、陰影、邊框
設定 Switch可用／不可用、打開 Switch 時才顯示可用的按鈕或是 Slider
應用寫在外面的變數來儲存東西

設定自訂字型

在 APP 使用可愛的內海字體

可加到專案裡的字體檔主要有兩種格式，ttf (True Type Font)和 otf(Open Type Font)。

1.將字體檔拖曳到左邊的 Project navigator 裡。

2. 記得 Add to targets 要勾選，到時候生成 App 時才會將字型檔包進去。

3. 在 App 的 Info 頁面新增 Fonts provided by application。

點選 Project navigator 的專案檔，然後點選 TARGETS 下的 App 後，切換到 Info 頁面。

在 Info 頁面的表格點選任何一行，出現 + 後從選單選擇 Fonts provided by application。

我們可加入多個字型檔，因此點選 Fonts provided by application 旁的三角形展開，即可看到預設的 Item 0。如果想要更多字型，可以再加入 Item 1，Item 2 等。

現在我們只加入一個，因此請在 Item 0 的欄位輸入字型檔的檔名，NaikaiFont-Regular.ttf。

4 之後不管在 storyboard 還是程式，都可以指定剛剛加入的字型，內海字體。

在Mac的字型軟體選擇該字型，點選左上角的 i 按鈕，查詢字型的相關資訊。

ps: 如果不知道字型的名字，可參考以下彼得潘的連結說明。

如何利用 Font Book 知道字型的名字

想在 iOS App 裡使用特別的字型並不難，只要能將字體的 otf (Open Type Font)或 ttf(True Type Font) 檔加到專案裡，並在 App 的 info 頁面做設定。

medium.com

設置按鈕邊框顏色

如果直接輸入 layer.borderColor 、Type 設為 Color 選色後仍然跑不出邊框顏色

因為從 Type 設置的 Color 型別是 UIColor，而邊框顏色的型別是用 CGColor，因此要新增一個 file 讓預設的 UIColor 變成邊框需要的 CGColor

(1)點選 File→New→New File（快捷 cmd+N）會跳出下面的視窗，選擇 Objective-C File 後按下一步

(2)第二個視窗，File 名可自行填寫，File Type 選 Category，最下面的 Class 選擇 CALayer，輸入完畢後點下一步就創好新的檔案了

(3)此時左邊會多兩個檔案，分別是 xxxx.h 跟 xxxx.m，點入 xxxx.m 的那個檔案，並貼上下面程式碼

CALayer+CALayer_borderColor.m

#import “CALayer+borderColor.h”
#import <UIKit/UIKit.h>
@implementation CALayer (borderColor)
- (void)setBorderColorWithUIColor:(UIColor *)color
{
 self.borderColor = color.CGColor;
}
@end

有部分程式碼其實是創立檔案時就寫好的（例如第一行 #import 跟最後一行 @end ）但直接整段覆蓋避免出錯比較安全

(4)可以直接在設置的視窗輸入 layer.borderColor 並選色！
也要加入 layer.borderWidth 才能有邊框寬度＆要開模擬器才看得到
layer.cornerRadius 則是圓角

空心圓角按鈕效果

同時製作圖片圓角跟陰影

同時擁有陰影跟圓角，要建立一個新的 view（ShadowView）來設置陰影，並且把要設定圓角的圖片（aliceBackgroundImageView）包在裡面

Shadow View 的 Background Color 需要設定背景色，如果沒有背景色，則陰影會是產生在愛麗絲圖案上，而不是方形的 View 上。

左圖 Background Color 是沒有設定背景色，陰影落在愛麗絲圖案上，如果想要製作物件形狀陰影也可以可慮，前提是圖案要是透明背景。

右圖 Background Color有顏色，陰影落在 View 的矩形上。

Slider 自訂圖案

把 Slider 上的小圓鈕改成自訂的茶點圖片

使用 setThumbImage 加在 viewDidLoad 裡

override func viewDidLoad() {
        super.viewDidLoad()
        // 自訂Slider圖案
        redSlider.setThumbImage(UIImage(named: "btn-2"), for: .normal)
        greenSlider.setThumbImage(UIImage(named: "btn-1"), for: .normal)
        blueSlider.setThumbImage(UIImage(named: "btn-3"), for: .normal)
        alphaSlider.setThumbImage(UIImage(named: "btn-4"), for: .normal)
        radiusSlider.setThumbImage(UIImage(named: "btn-5"), for: .normal)
        borderSlider.setThumbImage(UIImage(named: "btn-6"), for: .normal)
        shadowSlider.setThumbImage(UIImage(named: "btn-7"), for: .normal)
    }