#13 莫莉

Molly
彼得潘的 Swift iOS / Flutter App 開發教室
4 min readJul 21, 2018

作業: #13 彼得潘的影子 — 調色大師,熟練 outlet、action、UISlider、UIColor。

畫面:
1.建立 UIImageView,選擇已去背好的圖片
2.建立 UISlider 元件,調整各項屬性數值,例如更改顏色、漸層或陰影
3.建立 UISwitch 元件,設定 switch 開關決定是否可以 slider
建立自訂類別 colorViewController.swift
程式說明:
1.產生 UIColor 物件,其參數宣告的型態為 CGFloat
2.將 RGB 數值除以255算出比例,例如 UIColor(red: CGFloat(50/255), green: CGFloat(100/255), blue: CGFloat(0/255), alpha: CGFloat(1))
3.UILabel元件 顯示 RGB 數值,如數字字串太長,可用 String(format: "%.2f",number) 處理
4.利用 UISwitch.isOn 屬性的值來決定 UISlider.isEnabled 的值
漸層可利用 CAGradientLayer 物件的 CALayer 類別來設定,步驟如下:
let layer = CALayer()
1.let gradientLayer = CAGradientLayer() //初始化 CAGradientLayer 物件2.gradientLayer.frame = layer.bounds //設定漸層的範圍3.gradientLayer.colors =[UIColor.yellow.cgColor,UIColor.red.cgColor] //設定漸層變化顏色
4.gradientLayer.locations = [0.0, 0.5] //設定漸層變化方向
5.layer.addSublayer(gradientLayer) //將漸層加到 layer
陰影可利用 UIView 物件的 CALayer 類別來設定,步驟如下:
let layer = CALayer()
1.layer.shadowOffset = CGSize(width:-1,height:1)// 設定陰影偏移位置
2.layer.shadowColor = UIColor.darkGray.cgColor// 設定陰影顏色
3.layer.shadowOpacity = 0.8// 設定陰影透明度
4.layer.shadowRadius = CGFloat(shadowSlider.value)// 設定陰影擴散範圍
5.layer.shadowPath = UIBezierPath bezierPathWithRect:layer.bounds].CGPath
6.layer.masksToBounds = false //是否裁切超過邊框外的 sublayers

--

--