swiftUI入門

SwiftUIの基本的な構成

 

SwiftUIのコードは、以下のような基本的な構成で成り立っています。

Contents

1. View (ビュー)

SwiftUIでは、画面のUIはViewプロトコルに準拠した構造体（struct）で定義されます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!") // シンプルなテキスト表示
            .font(.largeTitle)
            .padding()
    }
}
  • Viewプロトコルに準拠したstructを作成
  • bodyプロパティでUIを定義（SwiftUIは宣言的な構文を採用）
  • .font(.largeTitle) や .padding() などのモディファイアを使って見た目を調整

2. レイアウト (Layout)

SwiftUIでは、VStack・HStack・ZStackなどのコンテナを使ってレイアウトを組み立てます。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI!")
                .font(.largeTitle)
            Text("Welcome to SwiftUI.")
                .foregroundColor(.blue)
        }
        .padding()
    }
}
  • VStack → 垂直方向に配置
  • HStack → 水平方向に配置
  • ZStack → 奥行き方向に重ねる

3. 状態管理 (State Management)

SwiftUIでは@Stateや@Binding、@ObservedObjectを使ってUIの状態を管理します。

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")
                .font(.title)
            Button("Increment") {
                count += 1
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
    }
}
  • @Stateはローカルな変数としてUIの状態を管理
  • Buttonのアクション内でcountを更新すると、画面が自動的に更新される

4. ナビゲーション (Navigation)

SwiftUIで画面遷移をする場合は、NavigationViewとNavigationLinkを使用します。

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DetailView()) {
                    Text("Go to Detail")
                        .padding()
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
            }
            .navigationTitle("Home")
        }
    }
}

struct DetailView: View {
    var body: some View {
        Text("Detail Screen")
            .font(.largeTitle)
    }
}
  • NavigationView → 画面全体をナビゲーション可能にする
  • NavigationLink → クリックすると別の画面に遷移
  • .navigationTitle("Home") → 画面上部にタイトルを表示

5. カスタムビュー

SwiftUIでは、コードの再利用性を高めるために、独自のカスタムビューを作成できます。

struct CustomButton: View {
    var title: String
    var action: () -> Void

    var body: some View {
        Button(action: action) {
            Text(title)
                .padding()
                .background(Color.green)
                .foregroundColor(.white)
                .cornerRadius(10)
        }
    }
}

struct ContentView: View {
    var body: some View {
        CustomButton(title: "Tap Me") {
            print("Button Tapped!")
        }
    }
}
  • CustomButtonという独自のコンポーネントを作成
  • titleとactionを引数として受け取り、汎用的に使えるボタンを作成

6. まとめ

SwiftUIのコードの基本構成は以下の通り：

  1. Viewを作成（struct + body）
  2. VStackやHStackなどのレイアウトを活用
  3. @Stateや@Bindingを使って状態を管理
  4. NavigationViewとNavigationLinkで画面遷移
  5. カスタムビューを作成してコードを整理

おすすめ記事