UIViewをサクッとかじってかまくらを作ろう

今年も無事スノボーにシーズンインしたkoiwaiです:snowboarder:

## 今年の冬は

UIViewをサクッとかじっていじって、かまくらをクリスマスに作ります。

ということで早速、土台となる雪を夜の空き地に、持ってきましょう。

#### ベースの雪(UIView)
```swift
class KamakuraBaseView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor(red: 223 / 255.0, green: 223 / 255.0, blue: 223 / 255.0, alpha: 1.0)
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        backgroundColor = UIColor(red: 223 / 255.0, green: 223 / 255.0, blue: 223 / 255.0, alpha: 1.0)
    }
}
```

#### 夜の空き地(ViewController)
```swift
override func viewDidLoad() {
    super.viewDidLoad()

    view.backgroundColor = UIColor(red: 0 / 255.0, green: 0 / 255.0, blue: 128 / 255.0, alpha: 1.0)

    let kamakuraBaseView = KamakuraBaseView()
    kamakuraBaseView.frame = CGRect(x: 100, y: 100, width: 200, height: 200)

    // 角丸を設定
    kamakuraBaseView.layer.cornerRadius = 10 // 角丸の半径
    kamakuraBaseView.layer.masksToBounds = true // 角丸を有効にする

    view.addSubview(kamakuraBaseView)
}
```

![base.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368129/0c05d33e-86d3-1466-fd84-a6b54ee5fca8.jpeg)

まだ、ただの大きな雪の塊です。

上を削って叩いて、丸めていきましょう。

本来であればスコップが必要ですが、ここでは必要ありません。

土台のViewは既に`cornerRadius = 10`の角丸がついています。

ここへさらに、別の角丸をつけるのには、単純にはできなさそうです。

#### 頭を丸める(UIView)
```swift
extension KamakuraBaseView {
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        let customCornerPath = UIBezierPath(roundedRect: rect,
                                            byRoundingCorners: [.topLeft, .topRight],
                                            cornerRadii: .init(width: 100, height: 100))

        let cornerMaskLayer = CAShapeLayer()
        cornerMaskLayer.path = customCornerPath.cgPath
        layer.mask = cornerMaskLayer
    }
}
```

Viewの描画時に、別の角丸をつけるmaskLayerを追加して、頭を丸めます。

これにより、上下別々の設定の角丸をつけることが、できました。

![base2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368129/b1ea9ea8-0e08-b668-b668-097f21ecbd1e.jpeg)

かまくらっぽくなってきましたね。

でもちょっと待って。

このままですと、どこからも入れません。

困りましたね。

そうだ。

入り口をつけて、灯りも灯してあげましょう。

#### 入り口(UIView)
```swift
class EntranceView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .orange
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        backgroundColor = .orange
    }
}

extension EntranceView {
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        let customCornerPath = UIBezierPath(roundedRect: rect,
                                            byRoundingCorners: [.topLeft, .topRight],
                                            cornerRadii: .init(width: 50, height: 50))

        let cornerMaskLayer = CAShapeLayer()
        cornerMaskLayer.path = customCornerPath.cgPath
        layer.mask = cornerMaskLayer
    }
}
```

#### 入り口の取り付け(ViewController)
```swift
override func viewDidLoad() {
    super.viewDidLoad()

    view.backgroundColor = UIColor(red: 0 / 255.0, green: 0 / 255.0, blue: 128 / 255.0, alpha: 1.0)

    let kamakuraBaseView = KamakuraBaseView()
    kamakuraBaseView.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
    let entranceView = EntranceView()
    entranceView.frame = CGRect(x: 50, y: 119, width: 100, height: 80)

    // 角丸を設定
    kamakuraBaseView.layer.cornerRadius = 10
    kamakuraBaseView.layer.masksToBounds = true
    entranceView.layer.cornerRadius = 2
    entranceView.layer.masksToBounds = true

    view.addSubview(kamakuraBaseView)
    kamakuraBaseView.addSubview(entranceView)
}
```

![tobira.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368129/ea3efb39-651c-442b-881e-e10cd9df3652.jpeg)

無事に扉を取り付けて、灯りもともりました。

そうですね。。。

入り口に縁取りがあると、より綺麗になりそうですね。
ちょっとつけてみましょう。

#### 縁取り(UIViewController)
```swift
entranceView.layer.borderColor = UIColor.black.cgColor
entranceView.layer.borderWidth = 2
```

![border.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368129/26a506e9-3005-39f7-bee7-54c3af133f1f.jpeg)

なんか思っていたのと、違いますね。
かまくらの頭をMask処理で消えてしまっていそうです。

扉の方に縁をつけてみましょう。

#### 縁取り(UIView)
```swift
extension EntranceView {
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        let customCornerPath = UIBezierPath(roundedRect: rect,
                                            byRoundingCorners: [.topLeft, .topRight],
                                            cornerRadii: .init(width: 50, height: 50))

        let cornerMaskLayer = CAShapeLayer()
        cornerMaskLayer.path = customCornerPath.cgPath
        layer.mask = cornerMaskLayer

        let borderLayer = CAShapeLayer()
        borderLayer.path = customCornerPath.cgPath
        borderLayer.lineWidth = 3.0
        borderLayer.strokeColor = UIColor.black.cgColor
        borderLayer.fillColor = UIColor.clear.cgColor

        layer.addSublayer(borderLayer)
    }
}
```

![border2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368129/b490aaf5-1adc-96c6-0305-365dab2de85c.jpeg)

UIViewへ直接、次のレイヤーを追加して対応しました。

- 中を無色透明で塗りつぶす
- ボーダーを設定する

これで、入り口の縁取りも、綺麗にできました。

さぁ、冬にしかできないパーティーの始まりです。

Happy holidays!