#8 客製專屬色彩的毛線球- 從playground調色去背圖片及疊圖(UIColor, addSubview)

從程式設定圖片顏色(UIColor)及疊圖(addSubview)的方法。

複習Storyboard設計App畫面的基本概念。

客製毛線球顏色！

變成點點南瓜的毛線球～

在Storyboard設計App畫面的基本概念

在storyboard設計App畫面時，我們常會在View/Table view Controller裡放置各種所需的元件，如：view, label, button, text, image…等等。

而加入圖片的做法是：
1. 把要放入App的圖片，設好尺寸後加入Asset。
2. 在storyboard中加入image view，然後在image view裡的image欄位設定圖片。
＊image view就像裝著image的容器。

在image view裡的image欄位設定圖片

但是這種方式就只能單純的加入已經設計好的圖片，如果想要做出細部顏色調整，或是更酷炫的圖片混成，就無法從storyboard中直接設定。

這時候就需要從playground裡，利用程式來「調色」及「疊圖」。

A. 從程式設定圖片顏色

概念：
1. 將要調色的圖片/圖片某區塊去背
2. 在playground輸入要使用的SDK：UIKit ☞ import UIKit
3. 生出要調色的圖片 ☞ UIImage(named: )
4. 生出放圖片的image view ☞ UIImageView(image: )
5. 呼叫function，此處為調整image view的背景顏色(background) ☞ image view的名稱.backgroundColor = UIColor(red: , green: , blue: , alpha: )

UIColor的顏色參數為RGB，RGB範圍0~255，但在UIColor是0~1，所以要將UIColor參數值要將RGB的數字除以255 (Float)。
alpha表示透明度，範圍0~1，數字1表示完全不透明。

為什麼是UIImageView (image view) 呼叫function，不是UIImage (image)呢？

image view就像裝著image的容器，調整image view的背景色，就能控制去背image區塊的顏色，所以要在容器(image view)呼叫function。

調色操作步驟如下：

1. 圖片去背

(1) 從mac Preview App（預覽程式）去背

如何用 Preview App (預覽程式)去背圖片

(2) 從線上網站去背

LunaPic.com Photo Editor Transparent Background tool

（左）去背前；（右）去背後

2. 把圖片加入playground

圖片檔名要連副檔名都一併出現會比較好，檔名不完整會影響之後無法生成常數。

把去背圖片直接拖曳到playground的Resources

如何在 playground 加入圖片

3. 加入UIKit函式庫，並生成image, image view

• UIImage的圖片名稱要包含副檔名。
• 生成的image view可從右邊點選方塊來預覽是不是有正確生成UIImageView。

4. 設定RGB參數，改變毛線球的顏色

• RGB參數型別為浮點數(Float)。
• UIColor的顏色參數為RGB，RGB範圍0~255，但在UIColor是0~1，所以要將UIColor參數值要將RGB的數字除以255 (Float)。
• alpha表示透明度，範圍0~1，數字1表示完全不透明。

B. 從程式做疊圖

把毛線球顏色變成「點點女王-草間彌生的南瓜」

疊圖的概念：
在storyboard中，加入的不同元件之間可能會有「階層」的關係。
下圖中，View(blue)是image view偷偷喵及image view毛線圖的superview（容器），也就是偷偷喵及毛線圖是View(blue)的subview（容器裡裝的東西）。
因此，毛線球要出現點點南瓜的顏色，就必須把image view毛線球蓋在image view點點南瓜上，也就是毛線球是點點南瓜的subview。
在程式中，要做出這樣的疊圖就需要呼叫addSubview。

view, image view等元件之間的階層關係

怎麼把圖疊在一起呢？《かぼちゃ》（南瓜）1999年 松本市美術館蔵
圖片來源：「わが永遠の魂」官方網站

程式概念：
1. 將要調色的圖片/圖片某區塊去背
2. 把去背圖片及疊圖的圖片加入playground
3. 在playground輸入要使用的SDK：UIKit ☞ import UIKit
4. 生出去背圖片，此為subview ☞ UIImage(named: )
5. 生出裝著去背圖片的image view ☞
     UIImageView(image:"subview的UIImage" )
6. 生出疊圖圖片，此為superview ☞ UIImage(named: )
7. 生出裝著疊圖圖片的image view ☞ 
     UIImageView(image:"superview的UIImage")
8. 讓互疊的二個image views尺寸一樣，呼叫frame ☞ 
     super image view.frame = sub image view.frame
9. 把sub image view疊在super image view上面，呼叫addSubview ☞ 
     super image view.addSubview(sub image view)
10. 更改super iamge view的顏色 ☞ 
  sub image view.backgroundColor=UIColor(red:,green:,blue:,alpha:小於1)
11. 執行super image view

addSubview雖然是UIView的方法，但UIImageView繼承UIView，所以addSubview也可以呼叫UIImageView。
更改super image view的顏色，其sub image view的alpha設定要小於1（變成有透明度），這樣super image view的圖案才會顯現出來。

疊圖程式及注解

疊圖效果

完整程式：
//生出sub image view
let yarnBallImage = UIImage(named: "毛線圖.png")
let yarnBallmIageView = UIImageView(image: yarnBallImage)
//生出super image view
let parentImage = UIImage(named: "yayoikusama2017-06.jpg")
let parentImageView = UIImageView(image: parentImage)
//讓sub及super image view的圖片尺寸一檥
parentImageView.frame = yarnBallmIageView.frame
//疊圖：把sub加到super image view上
parentImageView.addSubview(yarnBallmIageView)
//改變sub image view的顏色及透明度
yarnBallmIageView.backgroundColor = UIColor(red: 140/255, green: 40/255, blue: 40/255, alpha: 0.5)
//執行super image view，讓疊好的圖顯示點點及改變的顏色
parentImageView

其他參考資料：

從 playground 調色去背圖片

如何從 RGB 生成顏色 UIColor

程式基本觀念筆記：

#7 如何讓iOS App說話？That is “AVSpeechSynthesizer”