Glassmorphism-Karte mit Benachrichtigungseffekt

Beschreibung

DiesesDiese BeispielView demonstriertkombiniert Glassmorphismein modernes Kartenlayout im Glassmorphism-Stil mit Unschärfeeffekteneinem simulierten Dynamic-Island-Benachrichtigungseffekt. Beim Auslösen einer Aktion erscheint eine animierte Erfolgsmeldung, die automatisch wieder verschwindet.

🔍 Zweck

• Präsentation moderner UI-Designs mit Glassmorphism
• Demonstration von Dynamic-Island-artigen Benachrichtigungen
• Einsatz in Prototypen für interaktive Karten und BenachrichtigungenFeedbacksysteme
im
• Visualisierung Dynamic-Island-Stilvon Designsystem-Features
• Lernbeispiel für Animation und Material-Effekte in SwiftUI.
  SwiftUI

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

@main
struct GlassmorphicNotificationApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    // Track notification visibility and offset
    @State private var showNotification = false
    @State private var notificationOffset: CGFloat = -100
    
    // Access system color scheme
    @Environment(\.colorScheme) var colorScheme
    
    var body: some View {
        ZStack {
            // Background gradient for depth
            LinearGradient(
                gradient: Gradient(colors: [Color.blue.opacity(0.6), Color.purple.opacity(0.6)]),
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .ignoresSafeArea()
            
            VStack(spacing: 20) {
                // Glassmorphic Cardcard with content
                VStack(alignment: .leading, spacing: 16) {
                    HStack {
                        Image(systemName: "creditcard.fill")
                            .font(.title)
                            .foregroundStyle(.purple, .blue.opacity(0.8))
                        
                        Spacer()
                        
                        Text("Premium")
                            .font(.caption)
                            .fontWeight(.bold)
                            .padding(.horizontal, 10)
                            .padding(.vertical, 5)
                            .background(
                                Capsule()
                                    .fill(.ultraThinMaterial)
                            )
                    }
                    
                    Text("Modern SwiftUI Design")
                        .font(.title2)
                        .fontWeight(.bold)
                    
                    Text("This example showcases glassmorphism with blur effects and dynamic island-style notifications in SwiftUI.")
                        .font(.subheadline)
                        .opacity(0.7)
                    
                    Divider()
                        .background(Color.white.opacity(0.5))
                    
                    Button(action: {
                        withAnimation(.spring()) {
                            showNotification = true
                            notificationOffset = 0
                            
                            // Auto-dismiss notification
                            DispatchQueue.main.asyncAfter(deadline: .now() + 2.5) {
                                withAnimation(.spring()) {
                                    notificationOffset = -100
                                    
                                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                                        showNotification = false
                                    }
                                }
                            }
                        }
                    })triggerNotification) {
                        Text("Trigger Notification")
                            .fontWeight(.semibold)
                            .foregroundColor(.white)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(
                                LinearGradient(
                                    gradient: Gradient(colors: [Color.blue, Color.purple]),
                                    startPoint: .leading,
                                    endPoint: .trailing
                                )
                            )
                            .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
                    }
                }
                .padding(20)
                .frame(width: 340)
                .background(
                    // GlassmorphicApply glassmorphic effect depending on color scheme
                    RoundedRectangle(cornerRadius: 24, style: .continuous)
                        .fill(colorScheme == .dark ? .ultraThinMaterial : .regularMaterial)
                        .shadow(color: Color.black.opacity(0.15), radius: 20, x: 0, y: 10)
                )
                
                // Design systemfeatures informationsection
                VStack(alignment: .leading, spacing: 4) {
                    Text("Design Features:")
                        .font(.caption)
                        .fontWeight(.bold)
                    
                    HStack(spacing: 8) {
                        DesignFeatureTag(text: "Glassmorphism", icon: "circle.hexagongrid.fill")
                        DesignFeatureTag(text: "Dynamic Island", icon: "rectangle.inset.filled")
                    }
                }
                .frame(width: 340, alignment: .leading)
                .padding(.top, 8)
            }
            
            // DynamicNotification Island style notificationoverlay
            if showNotification {
                VStack {
                    HStack(spacing: 12) {
                        Image(systemName: "checkmark.seal.fill")
                            .font(.title3)
                            .foregroundColor(.green)
                        
                        VStack(alignment: .leading) {
                            Text("Success")
                                .font(.callout)
                                .fontWeight(.semibold)
                            
                            Text("Your action was completed")
                                .font(.caption)
                                .opacity(0.7)
                        }
                        
                        Spacer()
                    }
                    .padding(.horizontal, 16)
                    .padding(.vertical, 12)
                    .background(
                        RoundedRectangle(cornerRadius: 24, style: .continuous)
                            .fill(.ultraThinMaterial)
                            .shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 5)
                    )
                    .padding(.horizontal)
                    .offset(y: notificationOffset)
                    
                    Spacer()
                }
                .padding(.top, 5)
            }
        }
    }
    
    // Trigger animated notification with auto-dismiss
    private func triggerNotification() {
        withAnimation(.spring()) {
            showNotification = true
            notificationOffset = 0
            
            // Auto-dismiss after delay
            DispatchQueue.main.asyncAfter(deadline: .now() + 2.5) {
                withAnimation(.spring()) {
                    notificationOffset = -100
                    
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                        showNotification = false
                    }
                }
            }
        }
    }
}

// Reusable componenttag for design feature tagsfeatures
struct DesignFeatureTag: View {
    let text: String
    let icon: String
    
    var body: some View {
        HStack(spacing: 4) {
            Image(systemName: icon)
                .font(.caption2)
            
            Text(text)
                .font(.caption2)
                .fontWeight(.medium)
        }
        .padding(.horizontal, 8)
        .padding(.vertical, 4)
        .background(
            Capsule()
                .fill(.ultraThinMaterial)
        )
    }
}

// Modern Swift 5.10+ preview syntax
#Preview {
    ContentView()
}