羽人非獍之調色大師
Published in
6 min readSep 5, 2021
使用UISlider、UISwitch、UIButton搭配亂數
最近事務繁忙,作業都荒廢了一陣子。好不容易可以完成調色大師的app
搭配自己的大頭貼照片「羽人非獍」這個曾經在霹靂布袋戲很紅的一位角色。先使用Photoshop將角色的翅膀去背使用。
可以參考Peter 的網站教學一步一步去背。
也可以使用線上網站去背:
講一下基本的架構:
先放上一個空白的view 及 羽人的imageView 我在這邊設定相同的大小及位置。
接下來利用Peter上課練習過的UISlider 、UILabel存放數值。
@IBAction func changeColorSlider(_ sender: UISlider) {eeeImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green:CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value))// 顯示顏色的數值redLabel.text = String(format: "%.2f", redSlider.value)greenLabel.text = String(format: "%.2f", greenSlider.value)blueLabel.text = String(format: "%.2f", blueSlider.value)alphaLabel.text = String(format: "%1f", alphaSlider.valu}
在隨機的按鈕上,設定:
@IBAction func random(_ sender: UISlider) {redSlider.value = Float.random(in: 0...1)greenSlider.value = Float.random(in: 0...1)blueSlider.value = Float.random(in: 0...1)alphaSlider.value = Float.random(in: 0...1)eeeImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(alphaSlider.value))redLabel.text = String(format: "%.2f", redSlider.value)greenLabel.text = String(format: "%.2f", greenSlider.value)blueLabel.text = String(format: "%.2f", blueSlider.value)alphaLabel.text = String(format: "%.1f", alphaSlider.value)}
在初始化的按鈕上,設定:
@IBAction func resetBtn(_ sender: Any) {// 設定還原的預設值redSlider.value = 0.5greenSlider.value = 0.5blueSlider.value = 0.5alphaSlider.value = 0.5// 圖片背景顏色eeeImageView.backgroundColor = UIColor(red: CGFloat(redSlider.value / 255), green: CGFloat(greenSlider.value / 255), blue: CGFloat(blueSlider.value / 255), alpha: CGFloat(alphaSlider.value / 255))// Label數值redLabel.text = String(format: "%.2f", redSlider.value)greenLabel.text = String(format: "%.2f", greenSlider.value)blueLabel.text = String(format: "%.2f", blueSlider.value)alphaLabel.text = String(format: "%.1f", alphaSlider.value)
之後再加入一些圓角、邊框、漸層等功能。
在設定圓角的slider時,記得也要去調整Attributes inspector的數值,圓角的數值可以設定大一點,才會比較明顯。
完整程式碼:
參考資訊: