Udostępnij za pośrednictwem

Ulepszenia widżetu wyszukiwania i ekranu głównego w systemie iOS 10

  • Artykuł

W tym artykule omówiono ulepszenia wprowadzone przez firmę Apple w systemie Widget System w systemie iOS 10.

Firma Apple wprowadziła kilka ulepszeń systemu widżetów, aby upewnić się, że widżety wyglądają świetnie na każdym tle, które istnieje na nowym ekranie blokady systemu iOS 10. Ponadto widżety zawierają teraz właściwość NCWidgetDisplayMode, która umożliwia deweloperowi opisanie ilości dostępnej zawartości i umożliwia użytkownikowi rozwijanie i zwijanie zawartości.

Widżety (znane również jako Rozszerzenia dzisiaj) to specjalny typ rozszerzenia systemu iOS, który wyświetla niewielką ilość przydatnych informacji lub uwidacznia funkcję specyficzną dla aplikacji w odpowiednim czasie. Na przykład aplikacja Wiadomości zawiera widżet, który pokazuje pierwsze nagłówki, a aplikacja Kalendarz udostępnia dwa różne widżety: jeden do wyświetlania dzisiejszych zdarzeń i jeden do wyświetlania nadchodzących wydarzeń.

Widżety są wysoce dostosowywalne i mogą zawierać elementy interfejsu użytkownika, takie jak tekst, obrazy, przyciski itp. Ponadto deweloper może dodatkowo dostosować układ swoich widżetów.

Przykładowe widżety

Istnieją dwa główne miejsca, w których użytkownik może wyświetlać widżety aplikacji i korzystać z nich:

  • Ekran wyszukiwania — użytkownicy mogą dodawać widżety, które są najbardziej przydatne na ekranie Wyszukiwania. Dostęp do ekranu Wyszukiwanie można uzyskać, przesuwając palcem bezpośrednio na ekranach Strona główna i Blokada.
  • Ekran główny — na ekranie głównym użytkownik może użyć funkcji 3D Touch, aby otworzyć listę Szybkie akcje, stosując nacisk na ikonę aplikacji. Widżety aplikacji będą wyświetlane powyżej listy szybkiej akcji. Aby uzyskać więcej informacji, zobacz naszą dokumentację Wprowadzenie do technologii 3D Touch .

Sugestie dla deweloperów dotyczące widżetów

Najlepiej, aby deweloper zawsze próbował projektować widżety, które użytkownik chce dodać do ekranów wyszukiwania. W tym celu firma Apple ma następujące sugestie:

  • Tworzenie doskonałego, łatwo dostępnego środowiska — widżety użytkownika zapewniają krótkie, błyskawiczne informacje o aktualizacjach stanu lub umożliwiają szybkie wykonywanie prostych zadań. Dzięki temu niezbędna jest odpowiednia ilość informacji i interakcyjność. Jeśli to możliwe, zezwól użytkownikowi na wykonanie danego zadania za pomocą jednego naciśnięcia. Ponadto, ponieważ widżety nie obsługują przesuwania ani przewijania, należy wziąć pod uwagę projekt widżetu.
  • Szybkie pokazywanie zawartości — widżety są zaprojektowane tak, aby można było łatwo wyświetlać, więc użytkownik nigdy nie powinien czekać na załadowanie zawartości po wyświetleniu widżetu. Widżety powinny buforować zawartość lokalnie, aby mogły wyświetlać ostatnią zawartość podczas ładowania świeżej zawartości w tle.
  • Podaj odpowiednie dopełnienie i marginesy — widżety nigdy nie powinny wyglądać zatłoczone, dlatego unikaj rozszerzania zawartości na krawędzie widoku widżetu. Zawsze powinien istnieć kilka pikseli szerokości marginesu między krawędziami a zawartością. Firma Apple sugeruje również użycie ikony aplikacji wyświetlanej w górnej części widżetu jako przewodnika wyrównania. Jeśli widżet przedstawia układ siatki, upewnij się, że istnieje odpowiednie wypełnienie między elementami w siatce i spróbuj ograniczyć liczbę elementów do czterech maksymalnych.
  • Korzystanie z układów z możliwością dostosowania — szerokość widżetu będzie się różnić w zależności od urządzenia, na którym działa, oraz orientacji urządzenia. Wysokość widżetu może być również różna w zależności od tego, czy jest wyświetlana w stanie Zwinięte (domyślne) lub Rozwinięte (nieobsługiwane przez wszystkie widżety). Zwinięty widżet ma wysokość około dwóch i pół standardowego wiersza tabeli systemu iOS. Deweloper może zażądać rozmiaru rozwiniętego widżetu, ale najlepiej być mniejszy niż wysokość ekranu. W stanie Zwinięty widżet powinien zawierać tylko istotne, autonomiczne informacje. Po rozwinięciu widżet powinien wyświetlać dodatkowe informacje, które rozszerzają zawartość podstawową wyświetlaną w stanie Zwinięte. Widżety wyświetlane na liście szybkiej akcji będą znajdować się tylko w stanie Zwinięte.
  • Nie dostosuj tła widżetu — widżety są wyświetlane na jasnym, rozmytym tle dostarczonym przez system. Jest to realizowane w celu promowania spójności między widżetami i poprawy czytelności ich zawartości. Unikaj używania obrazu jako tła widżetu, ponieważ może on kolidować z tapetami blokady i ekranu głównego użytkownika.
  • Użyj czcionki systemowej w kolorze czarnym lub ciemnoszarym — podczas wyświetlania tekstu w widżecie czcionka systemowa działa najlepiej. Czcionka powinna być w kolorze czarnym lub ciemnoszarym, aby wyróżniać się na jasnym, rozmytym tle widżetu.
  • Zapewnianie dostępu do aplikacji, gdy jest to odpowiednie — widżet powinien zawsze działać oddzielnie od aplikacji, jednak jeśli wymagana jest głębsza funkcjonalność, widżet powinien mieć możliwość uruchomienia aplikacji w celu wyświetlenia lub edytowania określonych informacji. Nigdy nie dołącz przycisku "Otwórz aplikację", po prostu zezwól użytkownikowi na naciśnięcie samej zawartości i nigdy nie otwórz aplikacji innej firmy.
  • Wybierz czystą, zwięzłą nazwę widżetu — ikona aplikacji i nazwa widżetu są zawsze wyświetlane na zawartości widżetu. Firma Apple sugeruje użycie nazwy aplikacji dla jej podstawowego widżetu i jasnej, zwięzłej nazwy dla innych, które udostępnia. Podczas podawania niestandardowego tytułu widżetu powinny one być poprzedzone nazwą aplikacji (na przykład Mapy W pobliżu, Mapy Restauracje itp.).
  • Poinformuj, kiedy uwierzytelnianie dodaje wartość — jeśli dodatkowe funkcje lub informacje są dostępne tylko wtedy, gdy użytkownik jest uwierzytelniony i zalogowany, podaj to użytkownikowi. Na przykład aplikacja do udostępniania przejazdów może powiedzieć "Zaloguj się, aby zarezerwować przejazd".
  • Wybierz widżet szybkiej listy akcji — jeśli aplikacja udostępnia więcej niż jeden widżet , deweloper powinien wybrać ten, który ma zostać wyświetlony, gdy użytkownik wyświetli listę szybkiej akcji, stosując nacisk na ikonę aplikacji przy użyciu funkcji 3D Touch.

Aby uzyskać więcej informacji na temat pracy z widżetami, zobacz nasze wprowadzenie do rozszerzeń, wprowadzenie do dokumentacji 3D Touch i Podręcznik programowania rozszerzeń aplikacji firmy Apple.

Praca z aplikacją Vibrancy

Vibrancy zapewnia, że tekst widżetu pozostaje czytelny po wyświetleniu na jasnym, rozmytym tle widżetu (dostarczonym przez system). Przed systemem iOS 10 deweloper używał elementu NotificationCenterVibrancyEffect dla vibrancy Widżetu. Na przykład:

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

Ta wartość jest przestarzała w systemie iOS 10 i powinna zostać zastąpiona elementem WidgetPrimaryVibrancyEffect lub WidgetSecondaryVibrancyEffect. Na przykład:

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

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

Praca z zwiniętymi i rozwiniętymi widżetami

Nowe w systemie iOS 10 widżety zawierają teraz właściwość NCWidgetDisplayMode , która umożliwia deweloperowi opisanie ilości dostępnej zawartości i umożliwia użytkownikowi rozwijanie i zwijanie zawartości.

Gdy widżet jest początkowo wyświetlany, jest w stanie Zwinięte. Zwinięty widżet ma wysokość około dwóch i pół standardowego wiersza tabeli systemu iOS. Deweloper może zażądać rozmiaru rozwiniętego widżetu, ale najlepiej być mniejszy niż wysokość ekranu.

W stanie Zwinięty widżet powinien zawierać tylko istotne, autonomiczne informacje. Po rozwinięciu widżet powinien wyświetlać dodatkowe informacje, które rozszerzają zawartość podstawową wyświetlaną w stanie Zwinięte. Na przykład aplikacja Pogoda wyświetla bieżące warunki pogodowe po zwinięciu i dodaje prognozę godzinną po rozwinięciu.

Widżety wyświetlane na liście szybkiej akcji będą znajdować się tylko w stanie Zwinięte. Jeśli aplikacja udostępnia więcej niż jeden widżet, deweloper powinien wybrać ten, który ma zostać przedstawiony, gdy użytkownik wyświetli listę Szybkich akcji, stosując nacisk na ikonę aplikacji przy użyciu funkcji 3D Touch.

Poniższy przykład to proste rozszerzenie Today (Widget), które obsługuje zwinięte i rozwinięte stany:

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;
            }
        }

    }
}

Przyjrzyj się szczegółowo kodowi specyficznego dla trybu wyświetlania widżetu. Aby poinformować system, że ten widżet obsługuje stan Rozwinięty, używa:

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

Aby pobrać bieżący tryb wyświetlania widżetu, używa:

ExtensionContext.GetWidgetActiveDisplayMode()

Aby uzyskać maksymalny rozmiar stanu Zwinięte lub Rozwinięte, jest używany:

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

Aby obsłużyć zmianę stanu (tryb wyświetlania), używane są następujące elementy:

[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;
    }
}

Oprócz ustawiania żądanego rozmiaru dla każdego stanu (zwinięte lub rozwinięte) aktualizuje również wyświetlaną zawartość, aby była zgodna z nowym rozmiarem.

Podsumowanie

W tym artykule omówiono ulepszenia wprowadzone przez firmę Apple w systemie Widget System w systemie iOS 10 i pokazano, jak zaimplementować je w środowisku Xamarin.iOS.