#9 從playground設定圖片樣式- 型別屬性(type property)的運用
Published in
6 min readAug 2, 2020
利用型別屬性，調整圖片顏色、位置、大小、邊框及邊框顏色等。
繼上篇利用UIColor改變去背圖片顏色、呼叫frame讓2個圖片尺寸相等、呼叫addSubview做出疊圖的效果後，這次要來探討其他與圖片相關的設定。
利用 iOS SDK 的型別屬性(Type Property)生東西
在開發iOS App時，需要生出不同的東西以實現不同的功能。
生東西的語法有2種：1. 型別名稱＋()
ex：let image = UIImage()
產生型別為UIImage的圖片2. 型別名稱＋ . + 屬性名
ex：let clearColor = UIColor.clear
產生透明顏色
型別屬性與圖片相關設定
設定顏色☞ UIColor.顏色
設定邊框寬度☞ imageView.layer.borderWidth = 數字
- layer會得到型別CALayer的東西，可控制元件呈現的樣子。
- borderWidth是layer的屬性，型別是CGFloat。
- 數字大小為寬度粗細。
有趣的是，如果把設定「邊框」的程式放在「去背圖片顏色」之後，則需要再打一次要看的常數名稱(ex: yarnBallImageView1)，才能預覽有邊框的圖片。
設定邊框顏色☞ imageView.layer.borderColor = UIColor(CGColor:)or☞ imageView.layer.borderColor = UIColor(red:,green:,blue:,alpha:).cgColoror☞ imageView.layer.borderColor = CGColor(red:,green:,blue:,alpha:)
- 因為borderColor的型別是CGColor，所以此處不能用UIColor的RGB的參數，也不能用型別屬性。（型別不合）
（X）imageView.layer.borderColor = UIColor(red:,green:,blue:,alpha:)
（X）imageView.layer.borderColor = UIColor.顏色 - UIColor的屬性cgColor，其型別恰為CGColor，所以直接讀取。
設定圖片位置、大小概念：1. 設定一個長方形(rect.)的框(frame)，包含他的座標（XY）及長寬（width & height)
☞ let imageFrame = CGRect(x:,Y:, width:, height:)2. 把圖片image view屬性設定到此框 ☞ imageView.frame = imageFrame
＊同樣的概念也可以用在Label（UILabel）的設定上。 ☞ let labelFrame = CGRect(x:,Y:, width:, height:)
let label = UILabel(frame:lableFrame)CGRect-
CG是Core graphics的縮寫，Rect是長方形rectangle的縮寫。
完整程式：import UIKitlet yarnBallImage1 = UIImage(named: "毛線圖.png")let yarnBallImageView1 = UIImageView(image: yarnBallImage1)
//設定圖片邊框粗細yarnBallImageView1.layer.borderWidth = 45
//改變去背圖片顏色的方法1yarnBallImageView1.backgroundColor = UIColor(red: 40/255, green: 100/255, blue: 140/255, alpha: 1)
//設定圖片邊框顏色的方法2yarnBallImageView1.layer.borderColor = UIColor(red: 218/255, green: 208/255, blue: 73/255, alpha: 1).cgColoryarnBallImageView1
//設定圖片邊框顏色的方法3yarnBallImageView1.layer.borderColor = CGColor(red: 204/255, green: 115/255, blue: 108/255, alpha: 1)yarnBallImageView1
//改變去背圖片顏色的方法2yarnBallImageView1.backgroundColor = UIColor.yellowyarnBallImageView1
//調整圖片的位置及大小let imageFrame = CGRect(x: 10, y: 15, width: 50, height: 60)yarnBallImageView1.frame = imageFrame
相關參考資料：
程式基本觀念筆記：
