EasyApp

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 a Link to launch the easyapp://microphone deep 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 SimpleEntry structure provided by Provider.timeline.
  • The emoji comes from ConfigurationAppIntent.favoriteEmoji, while time is taken from TimelineEntry.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 destination URL to open other in-app features.
  • Wrap additional text inside the Link if 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 spacing and padding to 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

  1. Confirm .supportedFamilies in EasyAppWidget.swift includes .accessoryCircular, .accessoryRectangular, and .accessoryInline.
  2. 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.
  3. Configure ConfigurationAppIntent parameters to customize emojis or status strings.

Design Guidelines

  • Prefer system colors such as .primary and .secondary to 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.plist and 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/minimumScaleFactor in AccessoryRectangularWidgetView.
  • 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