SwiftUIにおけるカスタムViewの作成

SwiftUIでは、カスタムViewを作成してアプリケーションの特定の要件に合わせたUIを構築することができます。この記事では、SwiftUIでカスタムViewを宣言する手順を解説します。

カスタムViewの基本
カスタムViewの利用
パラメータを持つカスタムView
まとめ

カスタムViewの基本

SwiftUIでカスタムViewを作成するには、Viewプロトコルを適用した新しい構造体を作成します。

import SwiftUI

struct CustomView: View {
    var body: some View {
        // ここにViewのコンテンツを記述
        Text("Hello, Custom View!")
    }
}

この例では、シンプルなTextビューを含むCustomViewというカスタムViewを宣言しています。bodyプロパティ内に、このViewが表示するコンテンツを記述します。

カスタムViewの利用

次に、作成したカスタムViewを他のViewで利用する方法を見ていきましょう。これを行うには、CustomViewを他のビュー内で呼び出します。

import SwiftUI

struct ParentCustomView: View {
    var body: some View {
        VStack {
            Text("Parent View!")
            CustomView() // 作成したカスタムViewの利用
        }
    }
}

ParentCustomView内でCustomViewをVStack内に配置しています。このようにして、既存のView内でカスタムViewを組み込むことができます。

パラメータを持つカスタムView

カスタムViewには、パラメータを渡して動的なコンテンツを生成することもできます。

import SwiftUI

struct CustomDynamicView: View {
    var message: String //パラメータを定義

    var body: some View {
        Text(message)
    }
}

この例では、messageというパラメータを受け取り、それを表示するCustomDynamicViewを宣言しています。利用する際には、パラメータを指定して初期化します。

import SwiftUI

struct ParentCustomView: View {
    var body: some View {
        VStack {
            Text("Parent View!")
            CustomDynamicView(message: "Custom View with Dynamic Content")// 作成したカスタムViewの利用
        }
    }
}