【Swift UI】Viewを任意の形にトリミングする方法!clipShape/mask/trim(from:,to:)

この記事からわかること
- Swift UIでViewを任意の形にトリミングする方法
- clipShape/mask/trim(from:,to:)の使い方
index
[open]
\ アプリをリリースしました /
環境
- Xcode:16.0
- iOS:18.0
- Swift:5.9
- macOS:Sonoma 14.6.1
Swift UIでViewを任意の形にトリミングする方法
Swift UIでViewを任意の形にトリミングする(繰り抜く)方法は色々あるかと思います。今回は以下の3つの違いと使い方をまとめていきます。
- clipShape(_:style:)
- mask(alignment:_:)
- trim(from:,to:)
clipShape(_:style:)
clipShape
はView
型が持つメソッドで呼び出し元のビューを指定したShape
型に繰り抜くことができるモディファイアです。Shape
型で渡せば良いのでRoundedRectangle
やCircle
などの図形Viewや独自に定義したShape
プロトコルに準拠した形であればトリンミングすることが可能になります。
角丸四角形

円形

mask(alignment:_:)
mask
もView
型が持つメソッドで呼び出し元のビューを指定したビューの形状と透明度を元に型に繰り抜くことができるモディファイアです。View
型で指定できるのでText
を渡せば文字形状で繰り抜くことができるようになります。

trim(from:,to:)
trim
はShape
型が持つメソッドでで呼び出し元のShapeの開始と終了を指定することで部分的に描画するためのモディファイアです。clipShape
やmask
のように指定した形に繰り抜く役割ではなく、既存の形の描画範囲を制御するためのものになります。
円形

矩形

矩形(Rectangle
)を半分(0.5)でトリミングしてみると上記のような斜めにカットされた図形になります。これは単純に長方形の半分が表示されるわけではなくShape
内でPath
構造体を使用して描いている工程の半分が指定されているようです。
Rectangle
の中身が以下のように定義されているとイメージするとわかりやすいです。(※実装の定義を確認しておりません)
アニメーションで描く
Shape
型はAnimatable
を継承しているためアニメーションを実装することが可能です。
trim(from:,to:)
に渡す値を変化させることで「チェックマークを書いている」ような実装をしてみたいと思います。用意するのは描画対象のCheckMarkShape
型とアニメーション機能を持たせたAnimatedCheckMarkView
です。
あとはボタンなどからdrawProgress
の値を変化させればチェックマークが打たれたようなアニメーションを実装することができました。

今回使用している画像は無料画像サイトpixabayから利用しています。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。