【Swift】UIViewを切り抜く方法

リルオッサ

2022.10.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

UIViewを切り抜く方法を調べてみました。

環境

  • Xcode 14

UIViewを切り抜く方法

まず、UIViewを切り抜く際に使用するUIView+Extensionを作成しました。

UIView+ClipMask

import UIKit

extension UIView {

    func clipMask(withRect rect: CGRect, isReversed: Bool = false) {
        let maskLayer = CAShapeLayer()
        let path = CGMutablePath()

        if isReversed {
            // 切り抜きを反転させる場合は、自身のboundsをpathに追加する
            path.addRect(bounds)

            // 塗りつぶしルールの指定
            // 反転させる場合は、パスが重なっていない箇所を領域外と判定して残す
            maskLayer.fillRule = .evenOdd
        }

        path.addRect(rect)
        maskLayer.path = path

        // 作成したMask用のレイヤーをセットする
        layer.mask = maskLayer
    }
}

第一引数のrectでマスクをかける範囲をCGRectで指定してあげて、isReversedのフラグで通常のマスクかリバースマスクを切り替えることが出来ます。

CAShapeLayer.fillRuleはデフォルトでは、.nonZeroですが、リバースマスクの場合は領域内を残すような表現をしたい為、.evenOddに指定しています。

CAShapeLayer.fillRuleについては下記の記事がとても参考になりました。

使用例

Storyboard

Viewに切り抜きしたいcoveringViewとその前面に切り抜き範囲対象のViewのclippingViewを配置しています。また切り抜きする処理を実行するボタンを下部に配置しました。

ViewController

import UIKit

class ViewController: UIViewController {

    @IBOutlet private weak var coveringView: UIView!
    @IBOutlet private weak var clippingView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction private func clipView() {
        coveringView.clipMask(withRect: clippingView.frame, isReversed: true)
    }
}

デモ

このような感じで切り抜きが出来ました。

demo-clip-mask

おわりに

UIViewを切り抜くことが出来ました。今回はUIViewでの切り抜き方法でしたが、SwiftUIでのViewの切り抜き方法について今度調べてみたいと思いました。

この記事が誰かの救いになれば嬉しいです。

参考

customer-story-analytics