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

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

今年の冬は

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

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

ベースの雪(UIView)

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)

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)
}

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

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

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

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

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

頭を丸める(UIView)

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を追加して、頭を丸めます。

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

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

でもちょっと待って。

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

困りましたね。

そうだ。

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

入り口(UIView)

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)

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)
}

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

そうですね。。。

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

縁取り(UIViewController)

entranceView.layer.borderColor = UIColor.black.cgColor
entranceView.layer.borderWidth = 2

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

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

縁取り(UIView)

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)
    }
}

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

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

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

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

Happy holidays!