【Xcode/SwiftUI】信号を作ってみた


コード

import SwiftUI

// MARK: - Signal
struct Signal: Identifiable {
    let id: Int // Identifiableにするときは必要
    let index: Int // ボタンのindex
    let name: String // 信号機色の名前
    let color: Color // 信号機の色
}
import SwiftUI

// MARK: - CircleManager
class CircleManager: ObservableObject {
    @Published var selectedIndex: Int = 0 // 選択されたボタンのindex番号
    @Published var titleText: String = "" // タイトル用のText
    @Published var selectedSignalColor: Color = Color.white // 選択された信号機の色

    // MARK: - Properties
    let signals = [
        Signal(id: 0, index: 0, name: "Green", color: Color.go),
        Signal(id: 1, index: 1, name: "Yellow", color: Color.caution),
        Signal(id: 2, index: 2, name: "Red", color: Color.stop)
    ]

    // MARK: - Methods
    // 選択された信号機の名前、色を表示させる
    func showSelectedSignal() {
        titleText = signals[selectedIndex].name
        selectedSignalColor = signals[selectedIndex].color
    }
}
import SwiftUI

// MARK: - MainView
struct ContentView: View {
    @ObservedObject var circleManager = CircleManager()

    // MARK: - Body
    var body: some View {
        ZStack {
            VStack {
                Spacer()
                HStack {
                    Text("Signal: \(circleManager.titleText)")
                        .font(.largeTitle)
                    Circle()
                        .frame(width: UIScreen.main.bounds.width / 10)
                        .foregroundColor(circleManager.selectedSignalColor)
                }
                HStack { // 信号を横並びにする
                    ForEach(circleManager.signals) { signal in
                        Circle()
                            .foregroundColor(signal.color)
                            .padding()
                            .onTapGesture { // 信号をタップしたとき
                                circleManager.selectedIndex = signal.index
                                circleManager.showSelectedSignal()
                            }
                    }
                }
                .border(Color.black, width: 3.0)
                Spacer()
                Image(systemName: "car")
                    .resizable()
                    .scaledToFit()
                    .frame(width: UIScreen.main.bounds.width / 1.5)
                Spacer()
            }
        }
        .padding()
    }
}

// MARK: - Preview
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
import SwiftUI

// MARK: - Color
extension Color {
    static let go = Color("Go") // 緑色
    static let caution = Color("Caution") // 黄色
    static let stop = Color("Stop") // 赤色
}

ノリで作ってたら意外と面白くなったのでぜひ共有しようと思いました笑

この記事は役に立ちましたか?

はい
いいえ
貴重なフィードバックありがとうございます!