客製化iphone手機殼App

主要分成兩大功能

• 調色
• 鐫刻文字/圖案

先從調色開始做起吧！

首先當然是要找到iphone背面的圖片並去背（用mac預覽程式就能去背惹～）

需要在storyboard放上一張去背的原圖與一張要改變顏色區域的去背圖，

差別在於一張是去掉你要改變顏色的區域，一張是只保留你要改變顏色的區域

接著就看看我們的實作吧！

• 調色

產生可變換顏色的iphone畫面

主要是透過mask實作

.backgroundColor後面的UIColor就是後面我們要產生可自製顏色RGB的地方

@IBOutlet weak var iphone: UIImageView!
@IBOutlet weak var iphoneview: UIView!
    
override func viewDidLoad() {
        super.viewDidLoad()
        let iphonecolorimageview = UIImageView(image: UIImage(named: "iphonecolor"))
        iphonecolorimageview.frame = iphoneview.bounds
        iphonecolorimageview.contentMode = .scaleAspectFit
        iphoneview.mask = iphonecolorimageview
        iphoneview.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)
    }

UISlider自訂想要的顏色及透明度

接著我們希望能滑動RGB及透明度四種UISlider，讓使用者調配出屬於自己的夢幻手機殼顏色

其中將四個UISlider宣告成Outlet collection形式，相較於一般outlet，能減少重複宣告功能一樣的元件

在改變顏色部分其實很簡單，將剛剛宣告的UISlider Outlet們取值，並放進backgroundColor之中，就能滑動UISlider進行RGB及透明度的顏色調整了～

//can change color
func slidecolor(){
    iphoneview.backgroundColor = UIColor(red: CGFloat(slidercolor[0].value/255), green: CGFloat(slidercolor[1].value/255), blue: CGFloat(slidercolor[2].value/255), alpha: CGFloat(slidercolor[3].value))
}

另外除了UISlider，我們也在Slider右邊加上Label們顯示現在調整的數值

概念一樣很簡單，需要注意的應該只有在將Float值印出來時，可以透過format控制你要顯示多少小數點…

//slide UISlider
@IBAction func Slidecolorslide(_ sender: UISlider) {
    slidecolor()
    for color in 0...3{
        colorvaluelabel[color].text = String(format: "%.f", slidercolor[color].value)
    }
}

下一階段的實作是

• 鐫刻文字/圖案

輸入名字並立即顯示

所需要元件有一個可輸入姓名的TextField，以及一個可顯示在iphone上的Label

這邊我們需要讓使用者在每輸入一個字或刪除一個字時，上方顯示的部分能立刻有變化

因此需要注意的是在建立輸入Action時，動作要改成Editing Changed這一種，才能編輯時也同時改變畫面呈現．

程式碼如下：

這樣其實可以達成想要的功能～但是總覺得少了點東西…

當我想要輸入文字時，鍵盤把輸入區塊擋住了！因此….接著往下看

監聽TextField解決鍵盤擋住問題

這邊透過NotificationCenter.default.addObserver()來監聽TextField

//keyboard observer
NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow), name: UIResponder.keyboardWillShowNotification , object: nil)
NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide), name: UIResponder.keyboardWillHideNotification , object: nil)

並在後面控制view的y軸移動

//監聽鍵盤
    @objc func keyboardWillShow(notification:NSNotification){
        notificationkeyboard(true)
}
    @objc func keyboardWillHide(notification:NSNotification){
        notificationkeyboard(false)
}
    func notificationkeyboard(_ show:Bool){
        let screenSize = UIScreen.main.bounds.height/5
        if show {
            view.center.y -= screenSize
        } else {
            view.center.y += screenSize
        }
}

收鍵盤

收鍵盤分成兩種

• 點鍵盤上的done/return/go/…收鍵盤

只要在程式中.addTarget叫出.editingDidEndOnExit就可以達到

//點done收鍵盤
nametextfield.addTarget(self, action: #selector(closekeyboard), for: .editingDidEndOnExit)

但除此之外，我想要達成點空白處也能收鍵盤的功能，使用上也會更直覺化

• 點空白處收鍵盤

這部分其實也很簡單，只要在程式中覆寫touchesBegan function，如以下程式碼：

//點空白處收鍵盤
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
      self.view.endEditing(true)
}

okkkkkkk~完成這次客製化手機殼App囉

可以讓各位自己調整成想要的顏色，也能輸入名字, 或是你想寫在手機殼上的東西><

github就附在下方，給大家參考：

oujill/changeyouriphone