早上我们已经完成了首页界面的布局，有朋友私信问我，怎么没在布局时加上button，难道后面我们不点击跳转啊？好吧，这里我们提前做一个效果，往之前提到的Library中添加第一个我们自己的控件->HMTouchView.
在Library下新建一个View文件夹，以后我们如果再有自定义的View就统一放到这个位置了。拖拽View文件夹进Xcode中Library下：

QQ20151221-9@2x.png

创建一个HMTouchView，继承UIView

QQ20151221-10@2x.png

import UIKit

class HMTouchView: UIView {
    
    /// 点击回调
    private var clickhandler:((id:String?) -> Void)?
    /// 原本背景色
    private var originalColor:UIColor?
    
    /**
     为View添加点击事件，id即StoryBroad中设置的Restoration ID
     
     - parameter handler: 点击后触发的回调
     */
    func click(handler:((id:String?) -> Void)? ){
        originalColor = self.backgroundColor
        if handler != nil {
            self.clickhandler = handler
            //为View添加手势，触发clickAction
            let tapGesture:UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: "clickAction")
            self.addGestureRecognizer(tapGesture)
        }
    }
    
    func clickAction(){
        //执行一个改变背景的动画，你甚至可以做一个比较酷炫的翻转、旋转、放大缩小等
        UIView.animateWithDuration(0.3, delay:0.01,
            options:UIViewAnimationOptions.TransitionNone, animations:
            {
                ()-> Void in
                //self.layer.setAffineTransform(CGAffineTransformMakeRotation(90)) //旋转
                //这里我们只做一个普通的变色效果
                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) //恢复
                    //恢复为原本的颜色
                    self.backgroundColor = self.originalColor
                    //动画结束，执行回调
                    self.clickhandler?(id:(self.restorationIdentifier))
                })
        })
    }
    
}

现在我们去StoryBroad中拿一个View过来试试效果，就用这个商圈互动吧，我们要把整块商圈互动的区域加上点击事件和效果。

QQ20151221-11@2x.png

现在我们将它的Class修改为我们自定义的HMTouchView：

QQ20151221-12@2x.png

QQ20151221-13@2x.png

新增一个initLayout方法，里面使用circleListLayout.click方法

QQ20151221-14@2x.png

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

现在我们运行一下看看效果：

QQ20151221-15@2x.png

效果已经出来了，而且事件也响应了，如果其它有什么View也需要点击事件的话，也是一样的步骤，在SB中修改为HMTouchView，即可在VC中使用上面的代码添加点击事件。不过我们还可以再优化一下，现在我们再来看看。
现在我们分别把商圈互动、咨询专家、建材价格和市场供应修改成了HMTouchView，并连线到VC中。

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

如果我们要为这4个View设置点击事件的话，我们得这样写：

QQ20151221-16@2x.png

有没有比较简单一些的办法呢？现在我们回到HMTouchView类中，添加一个方法：

    /**
     一次性为多个View设置点击事件
     
     - parameter views:   view集合
     - parameter handler: 回调
     */
    class func setOnClickHandler(views:[HMTouchView]?, handler:((id:String?) -> Void)? ){
        for view in views! {
            view.click(handler)
        }
    }

注意这个方法需要加上class修饰符，这样的话我们就可以直接使用HMTouchView调用这个方法了。

QQ20151221-17@2x.png

现在回到SB中为各个View添加一个ID，如图所示：

QQ20151221-18@2x.png

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

QQ20151221-19@2x.png