Dynamic Island Demo with Swift
DynamicIslandDemo
Source: https://youtu.be/B4YCSIyQt5U
//
// ContentView.swift
// DynamicIslandDemo
//
// Created by 山本響 on 2022/09/11.
//
import SwiftUI
enum ImageFrame: CGFloat {
case collapse = 30
case expanded = 80
}
struct DynamicIslandView: View {
@Binding var expanded: Bool
var body: some View {
VStack {
HStack {
Image("batman")
.resizable()
.frame(width: expanded ? ImageFrame.expanded.rawValue: ImageFrame.collapse.rawValue, height: expanded ? ImageFrame.expanded.rawValue: ImageFrame.collapse.rawValue)
.clipShape(Circle())
.padding(10)
if expanded {
VStack(alignment: .leading) {
Text("Batman")
.font(.title)
Text("Under the red hood")
.opacity(0.5)
}.foregroundColor(.white)
}
Spacer()
Image(systemName: "chart.bar.fill")
.foregroundColor(.white)
.padding(10)
}
if expanded {
HStack {
Image(systemName: "backward.fill")
Image(systemName: "play.fill")
Image(systemName: "forward.fill")
}.foregroundColor(.white)
.font(.title)
}
}.frame(maxWidth: .infinity, maxHeight: expanded ? 200: 80)
.contentShape(Rectangle())
.onTapGesture {
withAnimation(.spring(response: 0.6, dampingFraction: 0.6, blendDuration: 1.0)) {
expanded.toggle()
}
}
.background {
Color.black
}
.clipShape(RoundedRectangle(cornerRadius: 40.0, style: .continuous))
.padding()
}
}
struct ContentView: View {
@State private var expanded: Bool = false
var body: some View {
VStack {
DynamicIslandView(expanded: $expanded)
Spacer()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}