iOSのUIKitで覗き穴のようなビューを実現する

iOS の UIView で下のスクリーンショットのような覗き穴のようなビューを作る方法です。画像の Cropper ビューなんかを作るときにも必要になりますね。

この完成形のスクリーンショットのビュー構造は

• スクリーンいっぱいの UIImageView
• その上に同じサイズの HoleView (今回作るビュー）

というようになっています。

コード

タッチした場所を中心に覗き穴ができるようなコードの例です。
覗き穴の部分の実装は UIView の drawRect(_:CGRect) メソッドをオーバライドしている部分で、やっていることは次のとおりです。簡単ですね。

• まずビューの全体を塗りつぶす（＝穴の外側となる）
• ブレンドモード .clear を指定して穴の部分を塗りつぶす

HoleView.swift

import UIKit

class HoleView: UIView {
    
    private var holeCenter: CGPoint = .zero
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        guard let context = UIGraphicsGetCurrentContext() else { return }
        
        // 全体を塗りつぶす
        UIColor.black.withAlphaComponent(0.75).setFill()
        context.fill(bounds)

        // 穴はブレンドモードで .clear を指定して塗りつぶす
        let holeRect = CGRect(x: holeCenter.x - 100, y: holeCenter.y - 100, width: 200, height: 200)
        context.setBlendMode(.clear)
        context.fillEllipse(in: holeRect)
    }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let touch = touches.first else { return }
        // タッチした場所を穴の中心とする
        holeCenter = touch.location(in: self)
        setNeedsDisplay()
    }

}

実行結果

いい感じに覗き穴っぽくなりました