Lock Screen Widgets
Learn how EasyAppSwiftUI implements Lock Screen widgets
Overview
EasyAppWidget Lock Screen widgets rely on WidgetKit accessory families and cover the circular, rectangular, and inline formats. This guide explains the layouts, data sources, and customization tips for the Lock Screen experience.
Widget Types
- Circular (
AccessoryCircularWidgetView) uses aLinkto launch theeasyapp://microphonedeep link. Ideal for a single icon shortcut. - Rectangular (
AccessoryRectangularWidgetView) displays an emoji, brand text, and the current time; well suited for conveying immediate status or progress. - Inline (
AccessoryInlineWidgetView) places concise status text alongside the clock for quick glanceable information.
All views live in EasyAppSwiftUI/EasyAppWidget/WidgetsComponents/AccessoryWidgetViews.swift, where you can adjust layout and copy as needed.
Data Source
- All accessory views share the
SimpleEntrystructure provided byProvider.timeline. - The emoji comes from
ConfigurationAppIntent.favoriteEmoji, while time is taken fromTimelineEntry.date, keeping the Lock Screen synchronized with Home Screen widgets.
Key Snippets
struct AccessoryCircularWidgetView: View {
let entry: SimpleEntry
var body: some View {
Link(
destination: URL(string: "easyapp://microphone?path=microphone")!,
label: {
Image(systemName: "microphone.fill")
.font(.system(size: 20, weight: .medium))
.foregroundStyle(.blue)
})
}
}- Replace the
destinationURL to open other in-app features. - Wrap additional text inside the
Linkif needed, but keep the content minimal.
struct AccessoryRectangularWidgetView: View {
let entry: SimpleEntry
var body: some View {
HStack(spacing: 8) {
Text(entry.configuration.favoriteEmoji)
.font(.system(size: 24))
VStack(alignment: .leading, spacing: 2) {
Text("EasyApp")
.font(.system(.caption2, design: .rounded))
.fontWeight(.semibold)
.foregroundStyle(.primary)
Text(entry.date, style: .time)
.font(.system(.subheadline, design: .rounded))
.fontWeight(.bold)
.foregroundStyle(.secondary)
}
}
.padding(.horizontal, 8)
}
}- Add indicators or messages (e.g., “Next meeting 10:30”) by extending the
VStack. - Adjust
spacingandpaddingto keep the Lock Screen footprint compact.
struct AccessoryInlineWidgetView: View {
let entry: SimpleEntry
var body: some View {
HStack(spacing: 4) {
Text(entry.configuration.favoriteEmoji)
.font(.system(size: 16))
Text("EasyApp")
.font(.system(.caption, design: .rounded))
.fontWeight(.medium)
Text("•")
.foregroundStyle(.secondary)
Text(entry.date, style: .time)
.font(.system(.caption, design: .rounded))
.fontWeight(.medium)
}
}
}- Use
lineLimit(1)if the inline text becomes too long. - Replace the time with other status fields (for example
Text(entry.configuration.customStatus)).
Usage & Setup
- Confirm
.supportedFamiliesinEasyAppWidget.swiftincludes.accessoryCircular,.accessoryRectangular, and.accessoryInline. - Add the desired accessory in the system Lock Screen customization:
- Circular: top-left/right status indicators.
- Rectangular: the wide area below the clock.
- Inline: text next to the clock.
- Configure
ConfigurationAppIntentparameters to customize emojis or status strings.
Design Guidelines
- Prefer system colors such as
.primaryand.secondaryto maintain contrast on diverse wallpapers. - Keep layouts simple; Lock Screen accessories allow tap-to-launch only—no complex interactivity.
- Respect WidgetKit font and size constraints to avoid clipped text.
Troubleshooting
- Widget missing: ensure the extension is enabled in the main app
Info.plistand reinstall the build. - Tap does nothing: verify the custom URL scheme is registered, then reload timelines with
WidgetCenter.shared.reloadAllTimelines()if needed. - Text truncated: shorten copy or apply
lineLimit/minimumScaleFactorinAccessoryRectangularWidgetView. - Low contrast: switch to
.foregroundStyle(.primary)or brighter system colors.
Preview each accessory in AccessoryWidgetViews.swift using the #Preview blocks to validate layouts across the three sizes.
Last updated on