IB上で範囲の確認ができるUISliderのタップエリアを拡大する実装

# はじめに
こんにちは:leaves:
**UISlider**の**Thumb**にオリジナルの画像を設定してカスタマイズした際などに、
タップ領域について気になったので、投稿してみたいと思います。
至らぬ点など多々あると思いますが、コメントなど頂けたら幸いです。

![snap.png](https://qiita-image-store.s3.amazonaws.com/0/128250/5b64ced3-a53c-52e6-20ed-c1c543b18b21.png)

# 実装について
※ このような画像をThumbに設定して、画像自体が細くてタッチエリアが不安でも、領域を調節することができます。

ThumbImg = ![Rectangle.png](https://qiita-image-store.s3.amazonaws.com/0/128250/503d5b16-57a2-e048-8b9d-c2831c42f528.png)

※ タップ領域を拡大する方法として、画像に透明色を塗り、画像自体を大きくする方法もあるみたいです。
https://stackoverflow.com/questions/13196263/custom-uislider-increase-hot-spot-size

# ソースコード
※ この記事の[UISliderのThumbの表示領域(SizeやFrame)を計算するExtension](http://qiita.com/KikurageChan/items/7cd958576d4f939f321f)を利用しています。

```TapAreaExpandSlider.swift
import UIKit

@IBDesignable class TapAreaExpandSlider: UISlider {
    
    @IBInspectable var thumbImage: UIImage? {
        didSet {
            setThumbImage(thumbImage, for: .normal)
        }
    }
    
    @IBInspectable var dotLineColor: UIColor = .black
    
    @IBInspectable var top: CGFloat {
        get { return expandEdgeInsets.top }
        set { expandEdgeInsets.top = newValue }
    }
    @IBInspectable var left: CGFloat {
        get { return expandEdgeInsets.left }
        set { expandEdgeInsets.left = newValue }
    }
    @IBInspectable var bottom: CGFloat {
        get { return expandEdgeInsets.bottom }
        set { expandEdgeInsets.bottom = newValue }
    }
    @IBInspectable var right: CGFloat {
        get { return expandEdgeInsets.right }
        set { expandEdgeInsets.right = newValue }
    }
    
    var expandEdgeInsets = UIEdgeInsets.zero
    
    var expandedThumbBounds: CGRect {
        return CGRect(x: thumbBounds.origin.x - expandEdgeInsets.left,
                      y: thumbBounds.origin.y - expandEdgeInsets.top,
                      width: thumbBounds.size.width + expandEdgeInsets.left + expandEdgeInsets.right,
                      height: thumbBounds.size.height + expandEdgeInsets.top + expandEdgeInsets.bottom)
    }
    
    var expandedThumbFrame: CGRect {
        return CGRect(x: thumbFrame.origin.x - expandEdgeInsets.left,
                      y: thumbFrame.origin.y - expandEdgeInsets.top,
                      width: thumbBounds.size.width + expandEdgeInsets.left + expandEdgeInsets.right,
                      height: thumbBounds.size.height + expandEdgeInsets.top + expandEdgeInsets.bottom)
    }
    
    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        return expandedThumbBounds.contains(point)
    }
    
    override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
        let location = touch.location(in: self)
        return expandedThumbBounds.contains(location)
    }
    
    //IB上でのみ実行される処理
    override func prepareForInterfaceBuilder() {
        setThumbImage(thumbImage, for: .normal)
        if expandEdgeInsets == UIEdgeInsets.zero { return }
        let tapGuideView = UIView(frame: expandedThumbBounds)
        let lineLayer = CAShapeLayer()
        lineLayer.frame = tapGuideView.bounds
        lineLayer.strokeColor = dotLineColor.cgColor
        lineLayer.lineWidth = 1
        lineLayer.lineDashPattern = [2, 2]
        lineLayer.fillColor = nil
        lineLayer.path = UIBezierPath(rect: lineLayer.frame).cgPath
        tapGuideView.isUserInteractionEnabled = false
        tapGuideView.backgroundColor = UIColor.clear
        tapGuideView.isHidden = false
        tapGuideView.layer.addSublayer(lineLayer)
        addSubview(tapGuideView)
    }
}
```

# 参考にさせていただいた記事
- [Increasing a thumbs “click area” in UISlider stackoverflow](https://stackoverflow.com/questions/18177398/increasing-a-thumbs-click-area-in-uislider)

- [@IBDesignableと@IBInspectableを使ってグラデーション可能なカスタムViewを作ってみた Qiita](http://qiita.com/motokiee/items/762f42c22ae70c689cb9)

- [[iOS] touchイベントを制御する](http://qiita.com/edo_m18/items/b1528f7aea0e06fbe6b4)

見て頂いてありがとうございます。