Teilen über

Verbesserungen des Such- und Startbildschirm-Widgets in iOS 10

  • Artikel

Dieser Artikel behandelt die Verbesserungen, die Apple am Widget-System in iOS 10 vorgenommen hat.

Apple hat mehrere Verbesserungen am Widget-System eingeführt, um sicherzustellen, dass die Widgets auf jedem Hintergrund gut aussehen, der auf dem neuen iOS 10-Sperrbildschirm vorhanden ist. Darüber hinaus enthalten Widgets jetzt eine NCWidgetDisplayMode-Eigenschaft , die es dem Entwickler ermöglicht, zu beschreiben, wie viel Inhalt verfügbar ist, und ermöglicht es dem Benutzer, den Inhalt zu erweitern und zu reduzieren.

Widgets (auch bekannt als Today Extensions) sind eine spezielle Art von iOS-Erweiterung, die eine kleine Menge nützlicher Informationen anzeigt oder app-spezifische Funktionen zeitnah verfügbar macht. Beispielsweise verfügt die News-App über ein Widget, das die wichtigsten Überschriften anzeigt, und die Kalender-App stellt zwei verschiedene Widgets bereit: eines zum Anzeigen der heutigen Ereignisse und eines zum Anzeigen der bevorstehenden Ereignisse.

Widgets sind hochgradig anpassbar und können UI-Elemente wie Text, Bilder, Schaltflächen usw. enthalten. Darüber hinaus kann der Entwickler das Layout seiner Widgets weiter anpassen.

Beispiel-Widgets

Es gibt zwei Standard Orte, an denen ein Benutzer die Widgets einer App anzeigen und interagieren kann:

  • Der Suchbildschirm – Benutzer können die Widgets hinzufügen, die sie für ihren Suchbildschirm am nützlichsten finden. Auf den Suchbildschirm wird zugegriffen, indem sie auf den Bildschirmen "Start" und "Sperrbildschirm" nach rechts wischen.
  • Der Startbildschirm – Vom Startbildschirm aus kann der Benutzer 3D Touch verwenden, um die Liste "Schnelle Aktionen" zu öffnen, indem er Druck auf das Symbol der App anwendet. Die Widgets einer App werden oberhalb der Schnellaktionsliste angezeigt. Weitere Informationen finden Sie in unserer Einführung in die 3D Touch-Dokumentation .

Widgets-Entwicklervorschläge

Im Idealfall sollte der Entwickler immer Widgets ausprobieren und entwerfen, die der Benutzer zu seinen Suchbildschirmen hinzufügen möchte. Zu diesem Zweck hat Apple die folgenden Vorschläge:

  • Erstellen Sie eine großartige, aufschaubare Erfahrung – Die Widgets des Benutzers, die kurze, aufschaubare Informationen zu Statusupdates bereitstellen oder es ihnen ermöglichen, einfache Aufgaben schnell auszuführen. Dies macht die richtige Menge an Informationen und Interaktivität zu einem wesentlichen Faktor. Lassen Sie den Benutzer nach Möglichkeit eine bestimmte Aufgabe mit einem einzigen Tippen ausführen. Da Widgets das Schwenken oder Scrollen nicht unterstützen, muss dies im Design des Widgets berücksichtigt werden.
  • Schnelles Anzeigen von Inhalten – Widgets sind so konzipiert, dass sie auf einen Blick zu sehen sind, sodass der Benutzer nie warten muss, bis Inhalte geladen werden, sobald ein Widget angezeigt wird. Widgets sollten ihre Inhalte lokal zwischenspeichern, damit sie aktuelle Inhalte anzeigen können, während neue Inhalte im Hintergrund geladen werden.
  • Bereitstellen geeigneter Abstände und Seitenränder – Widgets sollten niemals überfüllt aussehen. Vermeiden Sie daher das Erweitern von Inhalten auf die Ränder der Widget-Ansicht. Es sollte immer ein pixelweiter Rand zwischen den Rändern und dem Inhalt vorhanden sein. Apple schlägt außerdem vor, das Symbol der App zu verwenden, das oben im Widget als Ausrichtungsleitfaden angezeigt wird. Wenn das Widget ein Rasterlayout darstellt, stellen Sie sicher, dass zwischen den Elementen im Raster ein ordnungsgemäßer Abstand vorhanden ist, und versuchen Sie, die Anzahl der Elemente auf vier max.
  • Verwenden Sie anpassbare Layouts – Die Breite eines Widgets variiert je nach Gerät, auf dem es ausgeführt wird, und der Ausrichtung des Geräts. Die Höhe eines Widgets kann auch variieren, je nachdem, ob es in einem reduzierten Zustand (Standard) oder erweitert (nicht von allen Widgets unterstützt) angezeigt wird. Ein reduziertes Widget hat eine Höhe von ungefähr zwei und einer halben Standard-iOS-Tabellenzeile. Der Entwickler kann die Größe für ein erweitertes Widget anfordern, sollte aber idealerweise kleiner als die Höhe des Bildschirms sein. Im Reduzierten Zustand sollte das Widget nur wesentliche, eigenständige Informationen anzeigen. Wenn erweitert, sollte das Widget zusätzliche Informationen anzeigen, die den primären Inhalt verbessern, der im Reduzierten Zustand angezeigt wird. Widgets, die in der Schnellaktionsliste angezeigt werden, befinden sich nur im Reduzierten Zustand.
  • Passen Sie den Hintergrund des Widgets nicht an– Widgets werden auf einem hellen, verschwommenen Hintergrund angezeigt, der vom System bereitgestellt wird. Dies geschieht, um die Konsistenz zwischen Widgets zu fördern und die Lesbarkeit ihrer Inhalte zu verbessern. Vermeiden Sie die Verwendung eines Bilds als Widgethintergrund, da es mit den Hintergrundbildern "Sperren" und "Startbildschirm" des Benutzers kollidieren könnte.
  • Verwenden Sie die Systemschriftart in Schwarz oder Dunkelgrau – Wenn Text in einem Widget angezeigt wird, funktioniert die Systemschriftart am besten. Die Schriftart sollte in einer schwarz- oder dunkelgrauen Farbe stehen, um sich gegenüber dem hellen, verschwommenen Widget-Hintergrund hervorzuheben.
  • Bereitstellen von App-Zugriff bei Bedarf – Widgets sollten jedoch immer separat von ihrer App ausgeführt werden, wenn eine tiefere Funktionalität erforderlich ist, sollte das Widget in der Lage sein, die App zu starten, um eine bestimmte Information anzuzeigen oder zu bearbeiten. Fügen Sie niemals eine Schaltfläche "App öffnen" hinzu, lassen Sie es dem Benutzer einfach zu, auf den Inhalt selbst zu tippen und nie eine Drittanbieter-App zu öffnen.
  • Wählen Sie einen klaren, präzisen Widgetnamen aus – Das Symbol der App und der Name des Widgets werden immer über dem Inhalt des Widgets angezeigt. Apple schlägt vor, den Namen der App für das primäre Widget und einen klaren, präzisen Namen für alle anderen Personen zu verwenden, die sie bereitstellt. Bei der Bereitstellung eines benutzerdefinierten Widgettitels sollten sie dem Namen der App vorangestellt werden (z. B. Karten In der Nähe, Karten Restaurants usw.).
  • Informieren Sie, wenn die Authentifizierung Einen Wert hinzufügt – Wenn zusätzliche Funktionen oder Informationen nur verfügbar sind, wenn der Benutzer authentifiziert und angemeldet ist, stellen Sie dies dem Benutzer zur Verfügung. Eine Fahrfreigabe-App kann z. B. "Anmelden zum Buchen der Fahrt" sagen.
  • Wählen Sie ein Schnellaktionslisten-Widget aus– Wenn die App mehrere Widgets bereitstellt, sollte der Entwickler das Widget auswählen, das angezeigt werden soll, wenn der Benutzer die Schnellaktionsliste einnimmt, indem Er druck auf das Symbol der App mit 3D Touch angewendet wird.

Weitere Details zum Arbeiten mit Widgets finden Sie in unserer Einführung in Erweiterungen, Einführung in die 3D Touch-Dokumentation und das Programmierhandbuch für Die App-Erweiterung von Apple.

Arbeiten mit Vibrancy

Vibrancy stellt sicher, dass der Text eines Widgets lesbar bleibt, wenn er auf dem hellen, verschwommenen Hintergrund des Widgets dargestellt wird (vom System bereitgestellt). Vor iOS 10 würde der Entwickler ein NotificationCenterVibrancyEffect für die Vibranz des Widgets verwenden. Zum Beispiel:

// DEPRECATED: Get Widget Vibrancy Effect
var vibrancy = UIVibrancyEffect.CreateForNotificationCenter ();

Dies ist in iOS 10 veraltet und sollte entweder durch ein WidgetPrimaryVibrancyEffect oder ein WidgetSecondaryVibrancyEffect ersetzt werden. Zum Beispiel:

// Get Primary Widget Vibrancy Effect
var vibrancy = UIVibrancyEffect.CreatePrimaryVibrancyEffectForNotificationCenter ();

// Get Secondary Widget Vibrancy Effect
var vibrancy2 = UIVibrancyEffect.CreateSecondaryVibrancyEffectForNotificationCenter ();

Arbeiten mit reduzierten und erweiterten Widgets

Neu bei iOS 10 enthalten Widgets jetzt eine NCWidgetDisplayMode-Eigenschaft , mit der der Entwickler beschreiben kann, wie viel Inhalt verfügbar ist, und der Benutzer kann den Inhalt erweitern und reduzieren.

Wenn ein Widget anfänglich angezeigt wird, befindet es sich in einem reduzierten Zustand. Ein reduziertes Widget hat eine Höhe von ungefähr zwei und einer halben Standard-iOS-Tabellenzeile. Der Entwickler kann die Größe für ein erweitertes Widget anfordern, sollte aber idealerweise kleiner als die Höhe des Bildschirms sein.

Im Reduzierten Zustand sollte das Widget nur wesentliche, eigenständige Informationen anzeigen. Wenn erweitert, sollte das Widget zusätzliche Informationen anzeigen, die den primären Inhalt verbessern, der im Reduzierten Zustand angezeigt wird. Die Wetter-App zeigt z. B. die aktuellen Wetterbedingungen an, wenn sie reduziert sind, und fügt die stündliche Prognose hinzu, wenn sie erweitert wird.

Widgets, die in der Schnellaktionsliste angezeigt werden, befinden sich nur im Reduzierten Zustand. Wenn die App mehr als ein Widget bereitstellt, sollte der Entwickler das Gewünschte auswählen, wenn der Benutzer die Quick Action-Liste anzeigt, indem er druckt, auf das Symbol der App mit 3D Touch zu setzen.

Das folgende Beispiel ist eine einfache Heute-Erweiterung (Widget), die den Status Collapsed und Expanded behandelt:

using System;
using NotificationCenter;
using Foundation;
using UIKit;
using CoreGraphics;

namespace MonkeyAbout
{
    public partial class TodayViewController : UIViewController, INCWidgetProviding
    {
        protected TodayViewController (IntPtr handle) : base (handle)
        {
            // Note: this .ctor should not contain any initialization logic.
        }

        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            // Tell widget it can be expanded
            ExtensionContext.SetWidgetLargestAvailableDisplayMode (NCWidgetDisplayMode.Expanded);

            // Get the maximum size
            var maxSize = ExtensionContext.GetWidgetMaximumSize (NCWidgetDisplayMode.Expanded);
        }

        [Export ("widgetPerformUpdateWithCompletionHandler:")]
        public void WidgetPerformUpdate (Action<NCUpdateResult> completionHandler)
        {
            // Take action based on the display mode
            switch (ExtensionContext.GetWidgetActiveDisplayMode()) {
            case NCWidgetDisplayMode.Compact:
                Content.Text = "Let's Monkey About!";
                break;
            case NCWidgetDisplayMode.Expanded:
                Content.Text = "Gorilla!!!!";
                break;
            }

            // Report results
            // If an error is encoutered, use NCUpdateResultFailed
            // If there's no update required, use NCUpdateResultNoData
            // If there's an update, use NCUpdateResultNewData
            completionHandler (NCUpdateResult.NewData);
        }

        [Export ("widgetActiveDisplayModeDidChange:withMaximumSize:")]
        public void WidgetActiveDisplayModeDidChange (NCWidgetDisplayMode activeDisplayMode, CGSize maxSize)
        {
            // Take action based on the display mode
            switch (activeDisplayMode) {
            case NCWidgetDisplayMode.Compact:
                PreferredContentSize = maxSize;
                Content.Text = "Let's Monkey About!";
                break;
            case NCWidgetDisplayMode.Expanded:
                PreferredContentSize = new CGSize (0, 200);
                Content.Text = "Gorilla!!!!";
                break;
            }
        }

    }
}

Sehen Sie sich den spezifischen Code für den Widget-Anzeigemodus im Detail an. Um das System darüber zu informieren, dass dieses Widget den erweiterten Zustand unterstützt, verwendet es Folgendes:

// Tell widget it can be expanded
ExtensionContext.SetWidgetLargestAvailableDisplayMode (NCWidgetDisplayMode.Expanded);

Um den aktuellen Anzeigemodus des Widgets abzurufen, verwendet es Folgendes:

ExtensionContext.GetWidgetActiveDisplayMode()

Um die maximale Größe für den reduzierten oder erweiterten Zustand abzurufen, wird Folgendes verwendet:

// Get the maximum size
var maxSize = ExtensionContext.GetWidgetMaximumSize (NCWidgetDisplayMode.Expanded);

Und um den Zustand (Anzeigemodus) zu behandeln, wird Folgendes verwendet:

[Export ("widgetActiveDisplayModeDidChange:withMaximumSize:")]
public void WidgetActiveDisplayModeDidChange (NCWidgetDisplayMode activeDisplayMode, CGSize maxSize)
{
    // Take action based on the display mode
    switch (activeDisplayMode) {
    case NCWidgetDisplayMode.Compact:
        PreferredContentSize = maxSize;
        Content.Text = "Let's Monkey About!";
        break;
    case NCWidgetDisplayMode.Expanded:
        PreferredContentSize = new CGSize (0, 200);
        Content.Text = "Gorilla!!!!";
        break;
    }
}

Zusätzlich zum Festlegen der angeforderten Größe für jeden Zustand (Reduziert oder Erweitert) wird auch der angezeigte Inhalt aktualisiert, damit er der neuen Größe entspricht.

Zusammenfassung

In diesem Artikel wurden die Verbesserungen beschrieben, die Apple am Widget-System in iOS 10 vorgenommen hat und zeigt, wie sie in Xamarin.iOS implementiert werden.