早上我們已經(jīng)完成了首頁(yè)界面的布局，有朋友私信問(wèn)我油坝，怎么沒(méi)在布局時(shí)加上button嫉戚，難道后面我們不點(diǎn)擊跳轉(zhuǎn)啊澈圈？好吧彬檀，這里我們提前做一個(gè)效果，往之前提到的Library中添加第一個(gè)我們自己的控件->HMTouchView.
在Library下新建一個(gè)View文件夾瞬女，以后我們?nèi)绻儆凶远x的View就統(tǒng)一放到這個(gè)位置了窍帝。拖拽View文件夾進(jìn)Xcode中Library下：

QQ20151221-9@2x.png

創(chuàng)建一個(gè)HMTouchView，繼承UIView

QQ20151221-10@2x.png

import UIKit

class HMTouchView: UIView {
    
    /// 點(diǎn)擊回調(diào)
    private var clickhandler:((id:String?) -> Void)?
    /// 原本背景色
    private var originalColor:UIColor?
    
    /**
     為View添加點(diǎn)擊事件坤学，id即StoryBroad中設(shè)置的Restoration ID
     
     - parameter handler: 點(diǎn)擊后觸發(fā)的回調(diào)
     */
    func click(handler:((id:String?) -> Void)? ){
        originalColor = self.backgroundColor
        if handler != nil {
            self.clickhandler = handler
            //為View添加手勢(shì)，觸發(fā)clickAction
            let tapGesture:UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: "clickAction")
            self.addGestureRecognizer(tapGesture)
        }
    }
    
    func clickAction(){
        //執(zhí)行一個(gè)改變背景的動(dòng)畫(huà)报慕，你甚至可以做一個(gè)比較酷炫的翻轉(zhuǎn)深浮、旋轉(zhuǎn)、放大縮小等
        UIView.animateWithDuration(0.3, delay:0.01,
            options:UIViewAnimationOptions.TransitionNone, animations:
            {
                ()-> Void in
                //self.layer.setAffineTransform(CGAffineTransformMakeRotation(90)) //旋轉(zhuǎn)
                //這里我們只做一個(gè)普通的變色效果
                self.backgroundColor = UIColor(red:227/255.0, green:227/255.0, blue:227/255.0, alpha:1.0)
            },
            completion:{
                (finished:Bool) -> Void in
                UIView.animateWithDuration(0.3, animations:{
                    ()-> Void in
                    //self.layer.setAffineTransform(CGAffineTransformIdentity) //恢復(fù)
                    //恢復(fù)為原本的顏色
                    self.backgroundColor = self.originalColor
                    //動(dòng)畫(huà)結(jié)束眠冈，執(zhí)行回調(diào)
                    self.clickhandler?(id:(self.restorationIdentifier))
                })
        })
    }
    
}

現(xiàn)在我們?nèi)toryBroad中拿一個(gè)View過(guò)來(lái)試試效果飞苇，就用這個(gè)商圈互動(dòng)吧，我們要把整塊商圈互動(dòng)的區(qū)域加上點(diǎn)擊事件和效果。

QQ20151221-11@2x.png

現(xiàn)在我們將它的Class修改為我們自定義的HMTouchView：

QQ20151221-12@2x.png

QQ20151221-13@2x.png

新增一個(gè)initLayout方法雨让，里面使用circleListLayout.click方法

QQ20151221-14@2x.png

    func initLayout(){
        circleListLayout.click { (id) -> Void in
            print("hello")
        }
    }

現(xiàn)在我們運(yùn)行一下看看效果：

QQ20151221-15@2x.png

效果已經(jīng)出來(lái)了，而且事件也響應(yīng)了羽利，如果其它有什么View也需要點(diǎn)擊事件的話宫患，也是一樣的步驟，在SB中修改為HMTouchView这弧，即可在VC中使用上面的代碼添加點(diǎn)擊事件娃闲。不過(guò)我們還可以再優(yōu)化一下，現(xiàn)在我們?cè)賮?lái)看看匾浪。
現(xiàn)在我們分別把商圈互動(dòng)皇帮、咨詢專家、建材價(jià)格和市場(chǎng)供應(yīng)修改成了HMTouchView蛋辈，并連線到VC中属拾。

    @IBOutlet weak var circleListLayout: HMTouchView!
    @IBOutlet weak var personListLayout: HMTouchView!
    @IBOutlet weak var priceListLayout: HMTouchView!
    @IBOutlet weak var marketLayout: HMTouchView!

如果我們要為這4個(gè)View設(shè)置點(diǎn)擊事件的話，我們得這樣寫：

QQ20151221-16@2x.png

有沒(méi)有比較簡(jiǎn)單一些的辦法呢冷溶？現(xiàn)在我們回到HMTouchView類中渐白，添加一個(gè)方法：

    /**
     一次性為多個(gè)View設(shè)置點(diǎn)擊事件
     
     - parameter views:   view集合
     - parameter handler: 回調(diào)
     */
    class func setOnClickHandler(views:[HMTouchView]?, handler:((id:String?) -> Void)? ){
        for view in views! {
            view.click(handler)
        }
    }

注意這個(gè)方法需要加上class修飾符，這樣的話我們就可以直接使用HMTouchView調(diào)用這個(gè)方法了逞频。

QQ20151221-17@2x.png

現(xiàn)在回到SB中為各個(gè)View添加一個(gè)ID纯衍，如圖所示：

QQ20151221-18@2x.png

        HMTouchView.setOnClickHandler([circleListLayout,personListLayout,priceListLayout,marketLayout]) { (id) -> Void in
            print(id)
        }

QQ20151221-19@2x.png