コード
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") // 赤色
}
ノリで作ってたら意外と面白くなったのでぜひ共有しようと思いました笑
この記事は役に立ちましたか?
貴重なフィードバックありがとうございます!