What is Dynamic Island anyway?
The Dynamic Island is a visual and software-relevant innovation that transforms the front
camera and speakers of the iPhone 14 Pro and Pro Max or newer into an oval “island”.
Notifications, status updates, activities and displays can be integrated here, which can
significantly improve the user experience.
At first sight, the “Dynamic Island” is simply a black cutout in the top center of the
screen. However, this is where the sensors for the camera and Face ID are hidden.
Furthermore the gap has been reduced by around 30 percent compared to its predecessor.
Unlike the notch, the bar is also not permanently black. Instead, various functions and
information are displayed here.
What tasks does the Dynamic Island fulfill?
The Dynamic Island gives users the option of displaying important real-time information
without having to open the corresponding app. The advantage here is that users only
receive
the most important information and, if necessary, can display further important
information with a quick press on the Dynamic Island or jump straight back into the app.
Structure of the Dynamic Island with Swift
In order to be able to integrate Dynamic Island into your own app, you must first ensure
that Xcode is up to date. At the time of the article, this was 14.1. It must also be
ensured
that the app is compatible with iOS 16.4 or higher. Now that the most important basic
requirements have been met, we can set “Supports Live Activities” to “Yes” in the
info.plist. We need to do this in order to support Apple's Live Activity Library in our
project.
Now, if not already implemented, the WidgetKit framework must be added to your project.
Since the WidgetKit framework offers us a special configuration type called
ActivityConfiguration, we can now define a live activity widget.
Figure 1: The Dymanic Island shows notifications and live
activities such as calls, timers, music control and much more right to the front
@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 this example, we use the ActivityConfiguration type to define a SwiftUI view that is
displayed on the lock screen and is also used to display the Dynamic Island.
Figure 2: Compact representation
The compact display of the Dynamic Island is always used by the system when only one live
activity is active. The compact display consists of two separate elements: one that is
displayed on the left side of the front camera and one that is displayed on the
right side. Although the compact display offers little space, it shows current
information about the live activity of an app.
Figure 3: Minimal representation
If several live activities are active, the system uses the minimal display to show two of
them in the Dynamic Island. One live activity is attached to the Dynamic Island, while
the other appears detached. Depending on the size of the content, the separated minimal
live activity appears circular or oval. As with the compact view, users can tap on the
minimal live activity to open an app, learn more details about the event or task, or
touch and hold it to use key controls and view additional content in the expanded view.
Figure 4: Extended representation
Finally, we have the extended display of the Dynamic Island, which is displayed when the
user presses a little longer on the Dynamic Island. This gives the Dynamic Island more
space to display information.
Figure 5: From tracking hikes to the weather forecast to the
countdown for the current workout - helpful information in a compact and clever UI
Conclusion
Implementing the Live Activity API into an iOS app can be a great way to improve the app
and provide users with a better app experience. In addition, Dynamic Island is still in
its infancy and will certainly receive even more fascinating enhancements from Apple in
the future to provide users with an even better iPhone experience.
