let’s dev GmbH & Co. KG - Die Marke für wegweisende Individualsoftware

Blog

Top!

let’s dev | Scroll to top
let’s dev | Scroll to next content item

Hello

let’s dev | Scroll to previous content item
let’s dev Blog | Entdecke die Dynamic Island: Eine weitere Innovation der iOS-Welt
by Nico
05. April 2024

Entdecke die Dynamic Island: Eine weitere Innovation der iOS-Welt

In der sich ständig weiterentwickelnden Welt von Apples Betriebssystem iOS gibt es immer wieder neue Innovationen, wenn es darum geht, wie wir unsere Geräte nutzten. Eine der neusten und aufregendsten Ergänzungen in der Welt von Apple ist die „Dynamic Island“ – eine Funktion, die die Benutzung einiger Apps revolutioniert und eine neue Art der App-Benachrichtigung bietet. In diesem Blog Beitrag erfahren Sie nicht nur wie die Dynamic Island funktioniert und aufgebaut ist, sondern auch wie Sie eine solche Dynamic Island mit Swift selbst umsetzten können.

Was ist die Dynamic Island überhaupt?

Die Dynamic Island ist eine optische und Software-relevante Neuerung, die die Frontkamera und Lautsprecher von iPhone 14 Pro und Pro Max oder neuer in eine ovale „Insel“ umwandelt. Hier können Benachrichtigungen, Status-Updates, Aktivitäten und Anzeigen eingebaut werden, die die Nutzererfahrung erheblich verbessern können.

Auf den ersten Blick ist die „Dynamic Island“ lediglich eine schwarze Aussparung in der oberen Bildschirmmitte. Hier sind allerdings die Sensoren für die Kamera und Face-ID versteckt. Der Spalt wurde aber im Vorgängervergleich um rund 30 Prozent verkleinert. Anders als bei der Notch, ist der Balken zudem nicht dauerhaft schwarz. Stattdessen werden hier verschiedene Funktionen und Informationen abgebildet.

Welche Aufgaben erfüllt die Dynamic Island?

Die Dynamic Island gibt den Usern die Möglichkeit, wichtige Echtzeitinformation anzuzeigen, ohne dass dieser die entsprechende App geöffnet haben muss. Der Vorteil hierbei ist, dass die User nur die wichtigsten Informationen erhalten und bei Bedarf mit einem kurzen Drücken auf die Dynamic Island noch weitere wichtige Information sich anzeigen lassen können oder gleich wieder zurück in die App springen.

Aufbau der Dynamic Island mit Swift

Um die Dynamic Island selbst in die eigene App einbauen zu können, muss als erstes sichergestellt sein, dass Xcode auf dem aktuellsten Stand ist. Zum Zeitpunkt des Artikels war diese 14.1. Zudem muss sichergestellt sein, dass die App mit iOS 16.4 oder höher kompatibel ist. Da nun die wichtigsten Grundvoraussetzungen erfühlt sind, können wir nun in der info.plist „Supports Live Activities“ auf „Yes“ setzen. Das müssen wir machen, um die Live Activity Bibliothek von Apple in unserem Projekt zu unterstützen.

Nun muss, falls noch nicht implementiert, das WidgetKit-Framework zu Ihrem Projekt hinzugefügt werden. Da uns das WidgetKit-Framework einen besonderen Konfigurationstyp namens ActivityConfiguration bietet, können wir nun ein Live-Activity-Widget definieren.

Ein Beispiel der Dynamic Island

Abbildung 1: Die Dymanic Island bringt Hinweise und Live Aktivitäten wie Anrufe, Timer, die Musiksteuerung und vieles mehr ganz nach vorne

@available(iOSApplicationExtension 16.1, *)
struct FastingActivityWidget: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: FastingAttributes.self) { context in
            LiveActivityView(context: context)
                .padding(.horizontal)
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    LiveActivityView(context: context)
                }
            } compactLeading: {
                Image(systemName: "circle")
                    .foregroundColor(.green)
            } compactTrailing: {
                Text(verbatim:
context.state.progress.formatted(.percent.precision(.fractionLength(0))))
                    .foregroundColor(context.state.stage?.color)
            } minimal: {
                Image(systemName: "circle")
                    .foregroundColor(.green)
            }
        }
    }
}

In diesem Beispiel verwenden wir den Typ ActivityConfiguration, um eine SwiftUI-Ansicht zu definieren, die sowohl auf dem Sperrbildschirm angezeigt wird und auch für die Darstellung der Dynamic Island zum Einsatz kommt.

Ein Bild der kompakten Darstellung von Dynamic Island

Abbildung 2: Kompakte Darstellung

Die kompakte Darstellung der Dynamic Island wird immer dann vom System verwendet, wenn nur eine Live-Aktivität aktiv ist. Die kompakte Darstellung besteht aus zwei separaten Elementen: einem, das auf der linken Seite der Frontkamera angezeigt wird und einem, das auf der rechten Seite angezeigt wird. Obwohl die kompakte Darstellung nur wenig Platz bietet, zeigt sie aktuelle Informationen über die Live-Aktivität einer App an.

Ein Bild der minimalen Darstellung von Dynamic Island

Abbildung 3: Minimale Darstellung

Wenn mehrere Live-Aktivitäten aktiv sind, verwendet das System die minimale Darstellung, um zwei davon in der Dynamic Island anzuzeigen. Eine Live-Aktivität wird an die Dynamic Island angehängt, während die andere abgetrennt erscheint. Je nach Größe des Inhalts erscheint die abgetrennte Minimal-Live-Activity kreisförmig oder oval. Wie auch schon bei der kompakten Darstellung, können die Benutzer auf die minimale Live-Aktivität tippen, um eine App zu öffnen, mehr Details über das Ereignis oder die Aufgabe zu erfahren oder sie berühren und halten sie, um wichtige Steuerelemente zu verwenden und zusätzliche Inhalte in der erweiterten Darstellung anzuzeigen.

Ein Bild der erweiterten Darstellung von Dynamic Island

Abbildung 4: Erweiterte Darstellung

Zum Schluss hätten wir noch die erweiterte Darstellung der Dynamic Island, diese wird angezeigt, wenn die Benutzer etwas länger auf die Dynamic Island drücken. Dadurch erhält die Dynamic Island mehr Platz, um Information anzeigen zu können.

Ein Beispiel von hilfreichen Infos auf der Dynamic Island

Abbildung 5: Von Wanderungen tracken, bis zur Wettervorhersage über den Countdown für das laufende Workout – hilfreiche Infos in einer kompakten und cleveren UI

Fazit

Die Implementierung der Live Activity API in eine iOS-App kann eine großartige Möglichkeit sein, die App zu verbessern und deren Nutzern ein besseres Erlebnis der App bieten zu können. Zudem steht die Dynamic Island noch ganz am Anfang und wird in Zukunft bestimmt noch weiter faszinierende Erweiterung von Apple erhalten, um den Benutzer ein noch besseres iPhone Erlebnis bieten zu können.

Weitere Artikel aus unserem Blog

let’s dev Blog | Apple Intelligence und ChatGPT: Die Highlights der WWDC24

Technical

Apple Intelligence und ChatGPT: Die Highlights der WWDC24

by Julian

2024-06-13

Weiterlesen
let’s dev Blog | Groß, größer, OMR: let’s dev und Kortpress auf dem OMR Festival 2024

Corporate

Groß, größer, OMR: let’s dev und Kortpress auf dem OMR Festival 2024

by Julian

2024-05-24

Weiterlesen
let’s dev Blog | Der World Usability Day 2023

Corporate

Der World Usability Day 2023

by Sina

2023-11-10

Weiterlesen
let’s dev Blog | Adobe Max 2023

Corporate

Adobe Max 2023

by Julia

2023-10-13

Weiterlesen
let’s dev Blog | Barrierefreiheit in der Webentwicklung

Technical

Barrierefreiheit in der Webentwicklung

by Sarah

2023-10-31

Weiterlesen
let’s dev Blog | Digitale Wallet-Karten: Stärkung von Kundenbindung im digitalen Zeitalter

Corporate

Digitale Wallet-Karten: Stärkung von Kundenbindung im digitalen Zeitalter

by Julian

2023-07-07

Weiterlesen
let’s dev Blog | Kortpress auf dem OMR Festival 2023 in Hamburg

Corporate

Kortpress auf dem OMR Festival 2023 in Hamburg

by Julian

2023-05-31

Weiterlesen
let’s dev Blog | Recap 2022: Smart Devices, digitale Plattformen und innovative Forschungsprojekte

Corporate

Recap 2022: Smart Devices, digitale Plattformen und innovative Forschungsprojekte

by Julian

2023-01-31

Weiterlesen
let’s dev Blog | Mit LottieFiles Animationen für das Web erstellen

Corporate

Mit LottieFiles Animationen für das Web erstellen

by Julian

2022-12-15

Weiterlesen
let’s dev Blog | Lean in der Softwareentwicklung

Technical

Lean in der Softwareentwicklung

by Sabrina

2022-12-08

Weiterlesen
let’s dev Blog | Adobe Max - Live aus LA

Corporate

Adobe Max - Live aus LA

by Jessica

2022-10-28

Weiterlesen
let’s dev Blog | Mensch und Computer 2022 - Facing Realities

Corporate

Mensch und Computer 2022 - Facing Realities

by Kerstin

2022-09-12

Weiterlesen
let’s dev Blog | EUREKA Innovation Award

Corporate

EUREKA Innovation Award

by Karl

2022-06-23

Weiterlesen
let’s dev Blog | Die WWDC 2022: Unser Update zu Apples neuen Betriebssystemen

Technical

Die WWDC 2022: Unser Update zu Apples neuen Betriebssystemen

by Julian

2022-06-08

Weiterlesen
let’s dev Blog | Docker und die versteckte Sicherheitslücke

Technical

Docker und die versteckte Sicherheitslücke

by Martin

2022-02-17

Weiterlesen
let’s dev Blog | Die Weihnachtsfeiertage stehen wieder vor der Tür – Wir blicken gespannt auf das nächste Jahr 2022!

Corporate

Die Weihnachtsfeiertage stehen wieder vor der Tür – Wir blicken gespannt auf das nächste Jahr 2022!

by Julian

2021-12-22

Weiterlesen
let’s dev Blog | Fertigung und Montage von Stacks und Elektro­lyseuren für die Wasser­stoff­herstellung

Corporate

Fertigung und Montage von Stacks und Elektro­lyseuren für die Wasser­stoff­herstellung

by Anton

2021-12-21

Weiterlesen
let’s dev Blog | Adobe Max 2021 - Ein Fest der Kreativität

Corporate

Adobe Max 2021 - Ein Fest der Kreativität

by Julia

2021-11-02

Weiterlesen
let’s dev Blog | Relationale Datenbanken im Vergleich zu objektorientierten Datenbanken

Technical

Relationale Datenbanken im Vergleich zu objektorientierten Datenbanken

by Julian

2021-10-14

Weiterlesen
let’s dev Blog | Apple Developer Program: Wofür wird es benötigt und welche Inhalte bieten mir eine Mitgliedschaft?

Corporate

Apple Developer Program: Wofür wird es benötigt und welche Inhalte bieten mir eine Mitgliedschaft?

by Julian

2021-09-30

Weiterlesen
let’s dev Blog | Sketch, Figma & Co - Wir werfen einen Blick auf die beliebtesten UI und Prototyping Tools 2021

Corporate

Sketch, Figma & Co - Wir werfen einen Blick auf die beliebtesten UI und Prototyping Tools 2021

by Ellen

2021-07-15

Weiterlesen
let’s dev Blog | Rückenwind: Ein innovatives Projekt für den Weiterbetrieb von alten Windkraftanlagen

Corporate

Rückenwind: Ein innovatives Projekt für den Weiterbetrieb von alten Windkraftanlagen

by Karl

2021-06-24

Weiterlesen
let’s dev Blog | Features, Fixes und Funktionen - Ein Sumup der WWDC 2021

Corporate

Features, Fixes und Funktionen - Ein Sumup der WWDC 2021

by Julian

2021-06-10

Weiterlesen
let’s dev Blog | Smart Prognosis of Energy with Allocation of Resources

Corporate

Smart Prognosis of Energy with Allocation of Resources

by Karl

2021-02-18

Weiterlesen
let’s dev Blog | Dasoman - Daten-Souveränitäts-Manager

Corporate

Dasoman - Daten-Souveränitäts-Manager

by Karl

2021-01-11

Weiterlesen
let’s dev Blog | Wir blicken auf die vergangenen Monate zurück – Und wünschen alles Gute für das kommende Jahr 2021!

Corporate

Wir blicken auf die vergangenen Monate zurück – Und wünschen alles Gute für das kommende Jahr 2021!

by Julian

2020-12-17

Weiterlesen
let’s dev Blog | iOS User Interface Tests

Technical

iOS User Interface Tests

by Nicolas

2020-11-12

Weiterlesen
let’s dev Blog | Adobe Max - Zum ersten Mal online

Corporate

Adobe Max - Zum ersten Mal online

by Julia

2020-10-29

Weiterlesen
let’s dev Blog | CAN2BLE

Technical

CAN2BLE

by Raphael

2020-09-24

Weiterlesen
let’s dev Blog | Mensch und Computer 2020 - Digitaler Wandel im Fluss der Zeit

Corporate

Mensch und Computer 2020 - Digitaler Wandel im Fluss der Zeit

by UX Team

2020-09-18

Weiterlesen
let’s dev Blog | Neumorphism – Eine neue Ära des User Interface Design?

Technical

Neumorphism – Eine neue Ära des User Interface Design?

by Julian

2020-08-13

Weiterlesen
let’s dev Blog | UX Research Teil 3 – UX Methoden

Technical

UX Research Teil 3 – UX Methoden

by Elena

2020-05-28

Weiterlesen
let’s dev Blog | UX Research Teil 2 - Was ist UCD und was hat User Research damit zu tun?

Technical

UX Research Teil 2 - Was ist UCD und was hat User Research damit zu tun?

by Elena

2020-04-23

Weiterlesen
let’s dev Blog | go-digital fördert Einrichtung von Home Office Arbeitsplätzen

Corporate

go-digital fördert Einrichtung von Home Office Arbeitsplätzen

by Karl

2020-03-19

Weiterlesen
let’s dev Blog | Google Passes - Karten­verwaltung auf  Android-Geräten

Technical

Google Passes - Karten­verwaltung auf Android-Geräten

by Michelle

2020-03-12

Weiterlesen
let’s dev Blog | 100% Code-Coverage bei Software Tests – eine sinnvolle Zielsetzung?

Technical

100% Code-Coverage bei Software Tests – eine sinnvolle Zielsetzung?

by Raphael

2020-03-06

Weiterlesen
let’s dev Blog | Swift UI - Einfache und schnelle Umsetzung von User Interfaces

Technical

Swift UI - Einfache und schnelle Umsetzung von User Interfaces

by Tobias

2020-03-02

Weiterlesen
let’s dev Blog | Im Dialog mit den Wirtschafts­junioren – Spannende Einblicke in die Unternehmens­gründung und die digitale Trans­formation

Corporate

Im Dialog mit den Wirtschafts­junioren – Spannende Einblicke in die Unternehmens­gründung und die digitale Trans­formation

by Julian

2020-02-27

Weiterlesen
let’s dev Blog | Vereinfachtes Testen von iOS Push Notifications im Simulator mit Xcode 11.4

Technical

Vereinfachtes Testen von iOS Push Notifications im Simulator mit Xcode 11.4

by Manuel

2020-02-26

Weiterlesen
let’s dev Blog | Nationales Meeting des Konsortiums des SPEAR Forschungs­projektes bei let’s dev in Karlsruhe

Corporate

Nationales Meeting des Konsortiums des SPEAR Forschungs­projektes bei let’s dev in Karlsruhe

by Karl

2020-01-27

Weiterlesen
let’s dev Blog | UX Research Teil 1 – Warum User Research so wichtig ist

Technical

UX Research Teil 1 – Warum User Research so wichtig ist

by Elena

2020-01-23

Weiterlesen
let’s dev Blog | Dark Mode

Technical

Dark Mode

by Elisa

2020-01-09

Weiterlesen
let’s dev Blog | Wir wünschen frohe Weihnachten – Und einen guten Start ins neue Jahr!

Corporate

Wir wünschen frohe Weihnachten – Und einen guten Start ins neue Jahr!

by Julian

2019-12-20

Weiterlesen
let’s dev Blog | Austausch zum Thema Digitalisierung mit dem Business Club Luxemburg in der Botschaft von Luxemburg in Berlin

Corporate

Austausch zum Thema Digitalisierung mit dem Business Club Luxemburg in der Botschaft von Luxemburg in Berlin

by Karl

2019-12-17

Weiterlesen
let’s dev Blog | DaSoMan auf der Internet+ Expo in Foshan (China)

Corporate

DaSoMan auf der Internet+ Expo in Foshan (China)

by Karl

2019-12-13

Weiterlesen
let’s dev Blog | Google Play Console: Pre-Launch Berichte

Technical

Google Play Console: Pre-Launch Berichte

by Fabian

2019-12-11

Weiterlesen
let’s dev Blog | DevFest 2019 in Hamburg

Technical

DevFest 2019 in Hamburg

by Julian

2019-12-05

Weiterlesen
let’s dev Blog | Vernissage digitale Kunst im Medientheater der Humboldt Universität Berlin

Corporate

Vernissage digitale Kunst im Medientheater der Humboldt Universität Berlin

by Karl

2019-11-21

Weiterlesen
let’s dev Blog | World Usability Day 2019 in Karlsruhe – let’s dev unterstützt als Hauptsponsor

Corporate

World Usability Day 2019 in Karlsruhe – let’s dev unterstützt als Hauptsponsor

by Aileen

2019-11-11

Weiterlesen
let’s dev Blog | Ausgeschlachtet - Tag der offenen Türen auf dem Alten Schlachthof Karlsruhe 2019

Corporate

Ausgeschlachtet - Tag der offenen Türen auf dem Alten Schlachthof Karlsruhe 2019

by Julian

2019-09-26

Weiterlesen
let’s dev Blog | Mensch und Computer 2019 - Konferenz zu User Experience und Usability in Hamburg

Corporate

Mensch und Computer 2019 - Konferenz zu User Experience und Usability in Hamburg

by Elena

2019-09-17

Weiterlesen
let’s dev Blog | Business und Enterprise App Verteilung unter iOS

Technical

Business und Enterprise App Verteilung unter iOS

by Aileen

2019-08-05

Weiterlesen
let’s dev Blog | Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

Corporate

Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

by Karl

2019-07-17

Weiterlesen
let’s dev Blog | let’s dev unterstützt Läuferinnen und Läufer bei der 7. KIT Meisterschaft

Corporate

let’s dev unterstützt Läuferinnen und Läufer bei der 7. KIT Meisterschaft

by Karl

2019-07-05

Weiterlesen
let’s dev Blog | Automatisiertes Testing von C++ Code mit Google Test und Google Mock – Teil 2

Technical

Automatisiertes Testing von C++ Code mit Google Test und Google Mock – Teil 2

by Arne

2019-06-13

Weiterlesen
let’s dev Blog | Apple WWDC 2019: Das sind die Highlights der Keynote

Technical

Apple WWDC 2019: Das sind die Highlights der Keynote

by Nicolas

2019-06-05

Weiterlesen
let’s dev Blog | App Builders 2019

Technical

App Builders 2019

by Nicolas

2019-05-23

Weiterlesen
let’s dev Blog | Offizielle Eröffnung des Festigungs- und Expansionszentrums (FUX)

Corporate

Offizielle Eröffnung des Festigungs- und Expansionszentrums (FUX)

by Helena

2019-04-15

Weiterlesen
let’s dev Blog | Delegation aus Nottingham zu Besuch auf dem Alten Schlachthof in Karlsruhe

Corporate

Delegation aus Nottingham zu Besuch auf dem Alten Schlachthof in Karlsruhe

by Helena

2019-04-14

Weiterlesen
let’s dev Blog | Es ist soweit: Wir ziehen um!

Corporate

Es ist soweit: Wir ziehen um!

by Helena

2019-03-26

Weiterlesen
let’s dev Blog | Automatisiertes Testing von C++ Code mit Frameworks – Teil 1

Technical

Automatisiertes Testing von C++ Code mit Frameworks – Teil 1

by Arne

2019-02-20

Weiterlesen
let’s dev Blog | Die App im Google Play Store

Technical

Die App im Google Play Store

by Elisa

2019-01-24

Weiterlesen
let’s dev Blog | „UX Day“ 2018

Corporate

„UX Day“ 2018

by Aileen

2018-12-17

Weiterlesen
let’s dev Blog | let’s dev unterstützt SG Siemens Volleyballer aus Karlsruhe

Corporate

let’s dev unterstützt SG Siemens Volleyballer aus Karlsruhe

by Helena

2018-12-04

Weiterlesen
let’s dev Blog | KMU gestalten die Digitalisierung – Mittelstandskonferenz 2018

Corporate

KMU gestalten die Digitalisierung – Mittelstandskonferenz 2018

by Helena

2018-11-12

Weiterlesen
let’s dev Blog | Apple Wallet

Technical

Apple Wallet

by Maik

2018-10-26

Weiterlesen
let’s dev Blog | „Mensch und Computer“ 2018

Corporate

„Mensch und Computer“ 2018

by Judith

2018-09-24

Weiterlesen
let’s dev Blog | State Design Pattern in Android

Technical

State Design Pattern in Android

by Thomas

2018-09-17

Weiterlesen
let’s dev Blog | let’s dev ist autorisiertes Beraterunternehmen im Förderprogramm „go-digital“

Corporate

let’s dev ist autorisiertes Beraterunternehmen im Förderprogramm „go-digital“

by Helena

2018-09-01

Weiterlesen
let’s dev Blog | App Design & Development Conference 2018

Corporate

App Design & Development Conference 2018

by Helena

2018-08-14

Weiterlesen
let’s dev Blog | iOS 12: Die Top-Neuerungen im Überblick

Technical

iOS 12: Die Top-Neuerungen im Überblick

by Nicolas

2018-07-17

Weiterlesen
let’s dev Blog | let’s dev auf der CEBIT

Corporate

let’s dev auf der CEBIT

by Karl

2018-06-11

Weiterlesen
let’s dev Blog | Einführung in User Interface (UI) Tests mit Espresso

Technical

Einführung in User Interface (UI) Tests mit Espresso

by Raphael

2018-06-07

Weiterlesen
let’s dev Blog | Die App im Apple App Store: welche Informationen werden benötigt?

Technical

Die App im Apple App Store: welche Informationen werden benötigt?

by Aileen

2018-04-27

Weiterlesen
let’s dev Blog | Smart Pointer in C++

Technical

Smart Pointer in C++

by Matthias

2018-04-01

Weiterlesen
let’s dev Blog | User Interface Design für das iPhone X: alle Neuerungen auf einen Blick

Technical

User Interface Design für das iPhone X: alle Neuerungen auf einen Blick

by Helena

2018-02-07

Weiterlesen
let’s dev Blog | WebVR – Virtual Reality Experience im Browser mit dem A-Frame Framework

Technical

WebVR – Virtual Reality Experience im Browser mit dem A-Frame Framework

by Judith

2018-01-10

Weiterlesen
let’s dev Blog | Open Data Hackathon der Deutschen Bahn

Corporate

Open Data Hackathon der Deutschen Bahn

by Karl

2015-03-31

Weiterlesen
let’s dev Blog | Blur-Effekte unter iOS 7

Technical

Blur-Effekte unter iOS 7

by Katja

2014-04-24

Weiterlesen
let’s dev Blog | Beyond App Store – Distribution von iOS-Anwendungen

Technical

Beyond App Store – Distribution von iOS-Anwendungen

by Karl

2012-08-27

Weiterlesen
let’s dev Blog | Frontend-Architektur – Model View Presenter und Message Bus

Technical

Frontend-Architektur – Model View Presenter und Message Bus

by Karl

2011-03-08

Weiterlesen