Vylepšení widgetů pro vyhledávání a domovskou obrazovku v iOSu 10

Tento článek se zabývá vylepšeními, která společnost Apple provedla v systému widgetů v iOSu 10.

Apple zavedl několik vylepšení systému widgetů, aby se zajistilo, že widgety vypadají skvěle na jakémkoli pozadí, které existuje na nové zamykací obrazovce iOS 10. Widgety teď navíc obsahují vlastnost NCWidgetDisplayMode , která umožňuje vývojáři popsat, kolik obsahu je k dispozici a umožňuje uživateli rozbalit a sbalit obsah.

Widgety (označované také jako Rozšíření Today) jsou speciálním typem rozšíření pro iOS, které zobrazují malé množství užitečných informací nebo včas zpřístupňují funkce specifické pro aplikaci. Aplikace Příspěvky má například widget, který zobrazuje hlavní nadpisy a aplikace Kalendář nabízí dva různé widgety: jeden pro zobrazení dnešních událostí a jeden pro zobrazení nadcházejících událostí.

Widgety jsou vysoce přizpůsobitelné a můžou obsahovat prvky uživatelského rozhraní, jako je text, obrázky, tlačítka atd. Vývojář může navíc dále přizpůsobit rozložení svých widgetů.

Example widgets

Uživatel může zobrazit widgety aplikace a pracovat s nimi na dvou hlavních místech:

  • Obrazovka hledání – Uživatelé můžou přidat widgety, které na svou obrazovku hledání nejvíce hodí. Na obrazovce Hledat se dostanete potáhnutím prstem doprava na domovské i zamykací obrazovce.
  • Domovská obrazovka – Z domovské obrazovky může uživatel pomocí 3D Touch otevřít seznam Rychlých akcí tak, že na ikonu aplikace použije tlak. Widgety aplikace se zobrazí nad seznamem rychlých akcí. Další informace najdete v naší dokumentaci Úvod do 3D Touch .

Widgety – návrhy pro vývojáře

Vývojář by měl v ideálním případě vždy vyzkoušet a navrhnout widgety, které bude uživatel chtít přidat na obrazovky Hledání. Za tímto účelem má Apple následující návrhy:

  • Vytvořit skvělé, přehledné prostředí – uživatel chce widgety, které poskytují stručné, přehledné informace o aktualizacích stavu nebo jim umožňují rychle provádět jednoduché úkoly. Díky tomu je nezbytné poskytnout správné množství informací a interaktivitu. Kdykoli je to možné, povolte uživateli provést danou úlohu jediným klepnutím. Vzhledem k tomu, že widgety nepodporují posouvání nebo posouvání, je třeba vzít v úvahu návrh widgetu.
  • Rychle zobrazit obsah – Widgety jsou navržené tak, aby byly přehledné, takže uživatel by neměl čekat, až se obsah načte, jakmile se widget zobrazí. Widgety by měly ukládat obsah do mezipaměti místně, aby mohly zobrazovat nedávný obsah, zatímco se na pozadí načítá nový obsah.
  • Zadejte vhodné odsazení a okraje – Widgety by nikdy neměly vypadat přeplněně, takže nepoužívejte rozšíření obsahu na okraje zobrazení widgetu. Mezi okraji a obsahem by měl být vždy široký okraj s několika pixely. Apple také navrhne použití ikony aplikace zobrazené v horní části widgetu jako vodítko zarovnání. Pokud widget zobrazí rozložení mřížky, ujistěte se, že jsou mezi položkami v mřížce správné odsazení, a pokuste se omezit počet položek na čtyři maximum.
  • Použít přizpůsobitelná rozložení – Šířka widgetu se bude lišit v závislosti na zařízení, na kterém běží, a orientaci zařízení. Výška widgetu se také může lišit podle toho, jestli se zobrazuje ve sbaleném stavu (výchozí) nebo rozbalené (nepodporované všemi widgety). Sbalený widget má výšku zhruba dvou a půl standardních řádků tabulky pro iOS. Vývojář může požádat o velikost rozšířeného widgetu, ale v ideálním případě by měl být menší než výška obrazovky. Ve sbaleném stavu by widget měl zobrazovat jenom základní samostatné informace. Po rozbalení by widget měl zobrazit doplňující informace, které vylepšují primární obsah zobrazený ve sbaleném stavu. Widgety zobrazené v seznamu rychlých akcí budou pouze ve sbaleném stavu.
  • Nepřizpůsobte pozadí widgetu – Widgety se zobrazují na světlém rozmazaném pozadí poskytovaném systémem. To se provádí s cílem zvýšit konzistenci mezi widgety a zlepšit čitelnost jejich obsahu. Nepoužívejte obrázek jako pozadí widgetu, protože by mohlo kolidovat s tapetami na zamykací a domovskou obrazovku uživatele.
  • Použití systémového písma černobílé nebo tmavě šedé – při zobrazení textu ve widgetu funguje nejlépe systémové písmo. Písmo by mělo být černé nebo tmavě šedé, aby se vyniklo proti světlému rozmazanému pozadí widgetu.
  • Poskytnout přístup k aplikaci v případě potřeby – Widget by měl vždy fungovat odděleně od aplikace, pokud je ale potřeba podrobnější funkce, widget by měl mít možnost spustit aplikaci, aby zobrazila nebo upravila konkrétní informace. Nikdy nezahrňte tlačítko "otevřít aplikaci", jednoduše uživateli povolte klepnout na samotný obsah a nikdy neotevřet aplikaci třetí strany.
  • Vyberte vymazat, stručný název widgetu – ikona aplikace a název widgetu se vždy zobrazí nad obsahem widgetu. Apple navrhuje použít název aplikace pro svůj primární widget a jasný a stručný název pro všechny ostatní, které poskytuje. Při zadávání vlastního názvu widgetu by měly mít předponu název aplikace (například Mapy blízké okolí, Mapy Restaurace atd.).
  • Informujte, když ověřování přidá hodnotu – pokud jsou k dispozici další funkce nebo informace pouze v případě, že je uživatel ověřený a přihlášený, předejte ho uživateli. Například aplikace pro sdílení jízdy může říct "Přihlásit se a rezervovat jízdu".
  • Vyberte widget Rychlý seznam akcí – Pokud aplikace poskytuje více než jeden widget, měl by vývojář zvolit ten, který má být k dispozici, když uživatel zobrazí seznam rychlých akcí použitím tlaku na ikonu aplikace pomocí 3D touch.

Další podrobnosti o práci s widgety najdete v našem úvodu k rozšířením, úvod do dokumentace k 3D Touch a Průvodci programováním rozšíření aplikací společnosti Apple.

Práce s vibrátorem

Vibrátor zajišťuje, že text widgetu zůstane čitelný, když se zobrazí na světlém rozmazaném pozadí widgetu (dodaném systémem). Před iOSem 10 by vývojář pro vibrování widgetu použil NotificationCenterVibrancyEffect . Příklad:

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

Tato funkce je v iOS 10 zastaralá a měla by být nahrazena WidgetPrimaryVibrancyEffect nebo WidgetSecondaryVibrancyEffect. Příklad:

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

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

Práce s sbalenými a rozbalenými widgety

Widgety pro iOS 10 teď obsahují vlastnost NCWidgetDisplayMode , která umožňuje vývojáři popsat, kolik obsahu je k dispozici a umožňuje uživateli rozbalit a sbalit obsah.

Když se widget zpočátku zobrazí, je ve sbaleném stavu. Sbalený widget má výšku zhruba dvou a půl standardních řádků tabulky pro iOS. Vývojář může požádat o velikost rozšířeného widgetu, ale v ideálním případě by měl být menší než výška obrazovky.

Ve sbaleném stavu by widget měl zobrazovat jenom základní samostatné informace. Po rozbalení by widget měl zobrazit doplňující informace, které vylepšují primární obsah zobrazený ve sbaleném stavu. Například aplikace Počasí zobrazuje aktuální povětrnostní podmínky při sbalení a přidá hodinovou předpověď při rozbalení.

Widgety zobrazené v seznamu rychlých akcí budou pouze ve sbaleném stavu. Pokud aplikace poskytuje více než jeden widget, měl by vývojář zvolit, který se má prezentovat, když uživatel zobrazí seznam rychlých akcí použitím tlaku na ikonu aplikace pomocí 3D dotykového ovládání.

Následující příklad je jednoduchý Today Extension (Widget), který zpracovává sbalené a rozbalené stavy:

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

    }
}

Podrobně se podívejte na konkrétní kód režimu zobrazení widgetu. Chcete-li informovat systém, že tento widget podporuje rozbalený stav, používá:

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

K získání aktuálního režimu zobrazení widgetu se používá:

ExtensionContext.GetWidgetActiveDisplayMode()

Pokud chcete získat maximální velikost pro sbalený nebo rozbalený stav, používá:

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

A ke zpracování změny stavu (režimu zobrazení) se používá:

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

Kromě nastavení požadované velikosti pro každý stav (sbalené nebo rozbalené) aktualizuje také zobrazený obsah tak, aby odpovídal nové velikosti.

Shrnutí

Tento článek se zabývá vylepšeními, která společnost Apple provedla v systému widgetů v iOSu 10 a ukázala, jak je implementovat v Xamarin.iOS.