#9 ⭐️ 調色大師
Published in
Mar 25, 2024
這次的作業我要使用滑塊(sliders)動態更改我很喜歡的車車 Honda monkey125 和 logo 的背景色和透明度,成果如下:
界面設計
界面包含兩個 UIImageView 來顯示圖片,四個 UISlider 來調整紅、綠、藍色值和透明度,以及四個 UISwitch 來啟用或禁用相應的滑塊。還有一個重置按鈕,用於將所有設置恢復到初始狀態。
調整背景色
每當用戶移動任一滑塊時,changeBackground
方法會被觸發,它將基於滑塊的值動態更改 UIImageView 的背景色。
@IBAction func changeBackground(_ sender: UISlider) {
monkeyImage.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(opacitySlider.value))
logoImage.backgroundColor = UIColor(red: CGFloat(redSlider.value), green: CGFloat(greenSlider.value), blue: CGFloat(blueSlider.value), alpha: CGFloat(opacitySlider.value))
}
啟用和禁用滑塊
當用戶切換 UISwitch 時,相應的滑塊會被啟用或禁用,這是通過 sliderControl
方法實現的。
@IBAction func sliderControl(_ sender: UISwitch) {
redSlider.isEnabled = redSwitch.isOn
greenSlider.isEnabled = greenSwitch.isOn
blueSlider.isEnabled = blueSwitch.isOn
opacitySlider.isEnabled = opacitySwitch.isOn
}
重置功能
最後,當用戶點擊重置按鈕時,所有的滑塊會被設置回它們的最小值,圖片背景也會變為透明。
@IBAction func reset(_ sender: UIButton) {
redSlider.value = redSlider.minimumValue
greenSlider.value = greenSlider.minimumValue
blueSlider.value = blueSlider.minimumValue
opacitySlider.value = opacitySlider.minimumValue
monkeyImage.backgroundColor = UIColor(red: CGFloat(0), green: CGFloat(0), blue: CGFloat(0), alpha: CGFloat(0))
logoImage.backgroundColor = UIColor(red: CGFloat(0), green: CGFloat(0), blue: CGFloat(0), alpha: CGFloat(0))
}