【SwiftUI】Viewの分割

複雑なViewを小さなViewに分割する事で、繰り返しを避け、ソースを見やすくする方法を紹介します。
Viewを分割してもパフォーマンスに大きな影響を及ぼさないのがSwiftUIの特徴の一つです。

スポンサーリンク

環境

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

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

Viewのプロパティ化

SwiftUIではViewをプロパティに代入して、コンテナ内で使用できます。
定義したプロパティに対して、さらにView修飾子を適用する事も可能です。

【図1: Viewのプロパティ化】

上の例では、星型の画像をプロパティstarにバインドした後、View修飾子を適用して個別に色を変えています。

使用上の注意点としては、他のプロパティを参照するような記述をプロパティに含めることができません。これは、オブジェクトの作成時に問題が発生する為です。
つまりTextField()のような引数で他のプロパティを参照するものが使用できない事になります。
そのような場合は、次に紹介するカスタムViewで実現します。

カスタムViewの作成

カスタムViewでは、引数が指定できる等、より複雑な制御が可能です。
以下は、カプセル型のテキスト表示をするカスタムViewの作成例です。

【図2:カスタムViewの作成】

最後に

Viewを分割する方法2点(プロパティ化、カスタムView化)を紹介しました。

SwiftUI
スポンサーリンク
スポンサーリンク
カピ通信

コメント