【SwiftUI】Viewの切り取りとマスク

Viewの一部分を切り取る方法を解説します。
主に画像の切り抜き等で使える方法です。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3

フレームサイズで切り取り

フレームサイズでViewを切り取ります。
フレーム外にはみ出した部分が非表示になります。

フレームサイズで切り取り

図形で切り取り(clipShape)

形状を指定してViewを切り取ります。
形状にはShapeプロトコルに準じた構造体を指定します。

図形で切り取り

形状には次に示す組み込み図形部品が指定可能です。

形状 組み込み部品
四角形 Rectangle()
角丸四角形 RoundRectangle()
カプセル形 Capsule()
円形 Circle()
楕円形 Ellipse()

各部品の詳しい使い方は次の記事を参照してください。

【SwiftUI】組み込み図形の描画
SwiftUIに標準で用意されている組み込み図形描画の部品を紹介します。これらの部品はShapeプロトコルに準じています。

他のViewで切り取る(マスク)

引数にマスク用のViewを指定して切り取ります。
マスク用のViewにはシステムアイコンや文字などが指定できます。

システムアイコンで切り取り

システムアイコンで切り取り

文字で切り取り

文字で切り取り

あわせてよみたい記事

【SwiftUI】画像(Image)の使い方
SwiftUIで画像を表示するのには、Image()を使用します。Image()はプロジェクトに取り込んだ画像の他に、OSに標準で組み込まれたシステムアイコンの表示も可能です。
【SwiftUI】Textの使い方
Textは読み取り専用テキストを表示するViewです。UiKitのUILabelに相当する部品です。
SwiftUI
スポンサーリンク
スポンサーリンク
カピ通信

コメント