SwiftUI Switch Home Screen
Goal:
Goal: To make Switch home screen.
Note: This is just a static page, no real functionality.
Thoughts:
I like the way it turned out. Outside of the Dalek and Peach photo, everything is a symbol. If I finish, i know I need to add the square backgrounds when a game isn't there and the highlight for whatever is currently being hovered over.
Real Switch UI Dark Mode
Switch UI made with SwiftUI
Code example
Here is the Swift code used to make this. Replace "peach" in the HeaderView.
import SwiftUI
struct SwitchView: View {
@State private var isPlaying = false
@State private var timer: Timer?
@State private var text = ""
@State var contentState = "main"
@State var counting = 0
var body: some View {
ZStack{
Color(.background)
VStack{
HeaderView()
Spacer()
ScrollView(.horizontal, showsIndicators: false) {
HStack {
ForEach(0..<5) { _ in // Replace with your data model here
VStack(alignment: .leading) {
Image("dalek")
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 160, height: 160)
.clipped()
.clipShape(RoundedRectangle(cornerRadius: 0, style: .continuous))
.shadow(color: .black.opacity(0.1), radius: 2, x: 0, y: 3)
}
.frame(width: 160)
.clipped()
}
}
.padding(.horizontal,50)
}
Spacer()
HomeButtons()
.padding()
Rectangle()
.frame(height: 2)
.padding(.bottom,10)
.padding(.horizontal, 10)
.foregroundStyle(Color(.accent))
HStack{
Image(systemName: "gamecontroller.fill")
.padding(.horizontal, 10)
Spacer()
Image(systemName: "a.circle.fill")
.foregroundStyle(Color(.accent))
Text("OK")
.foregroundStyle(Color(.accent))
}
.padding(10)
}
}
}
}
struct HomeButtons: View {
var body: some View {
HStack{
Button{
} label: {
ZStack{
Circle()
.fill(Color(.button))
.frame(width: 40, height: 40)
Image.init(systemName: "apple.logo")
.foregroundStyle(.accent)
}
}
.buttonStyle(.plain)
Button{
} label: {
ZStack{
Circle()
.fill(Color(.button))
.frame(width: 40, height: 40)
Image.init(systemName: "ellipsis.bubble")
.foregroundStyle(.red)
}
}
.buttonStyle(.plain)
Button{
} label: {
ZStack{
Circle()
.fill(Color(.button))
.frame(width: 40, height: 40)
Image.init(systemName: "bag")
.foregroundStyle(.orange)
}
}
.buttonStyle(.plain)
Button{
} label: {
ZStack{
Circle()
.fill(Color(.button))
.frame(width: 40, height: 40)
Image.init(systemName: "photo.artframe")
.foregroundStyle(.blue)
}
}
.buttonStyle(.plain)
Button{
} label: {
ZStack{
Circle()
.fill(Color(.button))
.frame(width: 40, height: 40)
Image.init(systemName: "formfitting.gamecontroller")
.foregroundStyle(.accent)
}
}
.buttonStyle(.plain)
Button{
} label: {
ZStack{
Circle()
.fill(Color(.button))
.frame(width: 40, height: 40)
Image.init(systemName: "sun.max.fill")
.foregroundStyle(.accent)
}
}
.buttonStyle(.plain)
Button{
} label: {
ZStack{
Circle()
.fill(Color(.button))
.frame(width: 40, height: 40)
Image.init(systemName: "power")
.foregroundStyle(.accent)
}
}
.buttonStyle(.plain)
}
}
}
struct HeaderView: View {
var body: some View {
VStack{
HStack{
Image("peach")
.resizable()
.scaledToFill()
.frame(width: 30, height: 30)
.clipShape(Circle())
.padding()
Spacer()
Text("12:30")
.foregroundStyle(Color(.accent))
Image(systemName: "wifi")
.resizable()
.scaledToFit()
.frame(height: 10)
.foregroundColor(.accent)
.padding()
Image(systemName: "battery.75percent")
.resizable()
.scaledToFit()
.frame(height: 10)
.foregroundColor(.accent)
.padding()
}
}
}
}
#Preview {
SwitchView()
}