Dynamic Island in SwiftUI! (Setting up the layout)

ContentView.swift

import SwiftUI

struct DynamicView: View {
    let width = 0.95 * UIScreen.main.bounds.width
    let height: CGFloat = 200
    let x = UIScreen.main.bounds.width / 2
    let y: CGFloat = 110
    
    var waveIcon: some View {
        HStack(spacing: 3) {
            Rectangle()
                .fill(.gray.opacity(0.5))
                .frame(width: 4, height: 15)
                .cornerRadius(30)
            
            Rectangle()
                .fill(.gray.opacity(0.5))
                .frame(width: 4, height: 20)
                .cornerRadius(30)
            
            Rectangle()
                .fill(.gray.opacity(0.5))
                .frame(width: 4, height: 25)
                .cornerRadius(30)
            
            Rectangle()
                .fill(.gray.opacity(0.5))
                .frame(width: 4, height: 18)
                .cornerRadius(30)
            
            Rectangle()
                .fill(.gray.opacity(0.5))
                .frame(width: 4, height: 15)
                .cornerRadius(30)
            
            Rectangle()
                .fill(.gray.opacity(0.5))
                .frame(width: 4, height: 20)
                .cornerRadius(30)
        }
    }
    
    var capsuleView: some View {
        VStack {
            HStack {
                HStack(spacing: 20) {
                    Image("music-thumbnail")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 70, height: 70)
                        .cornerRadius(20)
                    
                    VStack(alignment: .leading) {
                        Text("Entropy")
                            .font(.headline)
                        
                        Text("Beach Bunny")
                            .foregroundColor(.secondary)
                    }
                }
                
                Spacer()
                
                waveIcon
            }
            .padding(.vertical, 10)
            
            HStack {
                Text("2:50")
                
                ProgressView(value: 0.75, total: 1)
                    .tint(.white)
                
                Text("-0:51")
            }
            .font(.caption.bold())
            .foregroundColor(.secondary)
            .padding(.vertical, 5)
            
            HStack {
                Spacer()
                Spacer()
                
                HStack(spacing: 20) {
                    Button {
                        // do nothing
                    } label: {
                        Image(systemName: "backward.fill")
                    }
                    
                    Button {
                        // do nothing
                    } label: {
                        Image(systemName: "pause.fill")
                            .font(.largeTitle.bold())
                    }
                    
                    Button {
                        // do nothing
                    } label: {
                        Image(systemName: "forward.fill")
                    }
                }
                .font(.title.bold())
                
                Spacer()
                
                Button {
                    
                } label: {
                    Image(systemName: "airpodspro")
                        .font(.title2)
                }
            }
            .tint(.white)
        }
        .padding(.horizontal, 20)
        .frame(width: width, height: height)
        .background(.black)
        .cornerRadius(50)
        .position(x: x, y: y)
        .shadow(color: .black.opacity(0.5), radius: 20, x: 0, y: 20)
    }
    
    var body: some View {
        ZStack {
            Image("wallpaper") // get the assets here: https://github.com/haneenmahd/DynamicIsland-assets
                .resizable()
                .scaledToFill()
            
            capsuleView
        }
        .preferredColorScheme(.dark)
        .ignoresSafeArea()
    }
}

struct DynamicView_Previews: PreviewProvider {
    static var previews: some View {
        DynamicView()
    }
}