Přehled uživatelského rozhraní iOSu 7

iOS 7 zavádí spoustu změn uživatelského rozhraní. Tento článek popisuje některé z větších změn, jak vizuální vzhled ovládacích prvků, tak i v rozhraních API, které podporují nový návrh.

iOS 7 se zaměřuje na obsah přes Chrome. Prvky uživatelského rozhraní v systému iOS 7 odzvýrazňujte Chrome odebráním atributů, jako jsou například nadbytečné ohraničení, stavové řádky a navigační panely, čímž se zmenší množství místa na obrazovce používaného zobrazením obsahu. V systému iOS 7 je obsah navržený tak, aby používal celou obrazovku.

iOS 7 zavádí několik dalších změn: barva se používá k odlišení prvků uživatelského rozhraní místo atributů, jako je například ohraničení tlačítek. Mnoho prvků, jako jsou navigační panely a stavové řádky, jsou teď rozmazané a průsvitné nebo transparentní, protože zobrazení obsahu přebírají oblast pod nimi. Tato zobrazení obsahu se vykreslují pomocí rozmazaných pruhů a v uživatelském rozhraní vyjadřuje nehlubší hloubku.

Tento článek se věnuje několika změnám prvků uživatelského rozhraní v iOS 7 i v různých rozhraních API souvisejících s novým návrhem uživatelského rozhraní.

Zobrazení a řízení změn

Všechna zobrazení v UIKit odpovídají novému vzhledu a chování iOS 7. V této části se vysvětlují některé změny těchto zobrazení a také související rozhraní API, která se změnila tak, aby podporovala nové uživatelské rozhraní.

UIButton

Tlačítka vytvořená z UIButton třídy jsou nyní bez okrajů ve výchozím nastavení bez pozadí, jak je znázorněno níže:

Ukázka UIButton

UIButtonType.RoundedRectStyl se už nepoužívá. Pokud se používá v systému iOS 7, UIButtonType.RoundedRect bude UIButtonType.System použito, což vytvoří výchozí styl tlačítka bez pozadí nebo viditelných okrajů, jak je uvedeno výše.

UIBarButtonItem

Podobně jako u UIButton tlačítek pruhů jsou i bez okrajů, ve výchozím nastavení se jedná o nový styl, který UIBarButtonItemStyle.Plain vidíte níže:

Ukázka UIBarButtonItem

Kromě toho je UIBarButtonItemStyle.Bordered styl zastaralý. Nastavení UIBarButtonItemStyle.Bordered v iOS 7 má za následek UIBarButtonItemStyle.Plain použití stylu.

UIBarButtonItemStyle.DoneStyl není zastaralý. Vytvoří se ale také tlačítko bez okrajů, které bude zobrazovat jenom tučný styl textu, jak je znázorněno níže:

Ukázka UIBarButtonItem ve stylu Hotovo

UIAlertView

Kromě změny stylu nového vzhledu a chování systému iOS 7 již zobrazení výstrah nepodporuje přizpůsobení prostřednictvím podzobrazení. I když UIAlertView dědí z UIView , volání AddSubview na UIAlertView má žádný účinek. Zvažte například následující kód:

UIBarButtonItem button = new UIBarButtonItem ("Bar Button", UIBarButtonItemStyle.Plain, (s,e) =>
{
    UIAlertView alert = new UIAlertView ("Title", "Message", null, "Cancel", "OK");

    alert.AddSubview (new UIView () {
        Frame = new CGRect(50, 50,100, 100),
        BackgroundColor = UIColor.Green
    });

    alert.Show ();
});

Tím se zobrazí standardní zobrazení výstrah, u kterého se ignoruje podzobrazení, jak je znázorněno níže:

Ukázka UIAlertView

Poznámka: UIAlertView se v iOS 8 už nepoužívá. Podívejte se na recept kontroleru výstrah na používání zobrazení výstrah v iOS 8 a novějším.

UISegmentedControl

Segmentované ovládací prvky v systému iOS 7 jsou transparentní a podporují barevný nádech. Barva odstínu se používá pro text a barvu ohraničení. Když je vybrán segment, barva se zamění mezi pozadím a textem a barevným nádechem použitým k zvýraznění vybraného segmentu, jak je znázorněno níže:

Ukázka UISegmentedControl

Kromě toho se už UISegmentedControlStyle v iOS 7 nepoužívá.

Zobrazení výběru

Rozhraní API pro zobrazení výběrů je z velké části beze změny; pokyny pro návrh iOS 7 teď by se měly zobrazovat jako vložené, nikoli jako vstupní zobrazení animovaná od dolního okraje obrazovky nebo přes nový kontroler, který se odeslal do zásobníku pro řídicí panel, jako v předchozích verzích iOS. Tato možnost se zobrazuje v aplikaci kalendářního kalendáře:

Tato možnost se zobrazuje v aplikaci kalendáře systému.

UISearchDisplayController

Panel hledání je nyní zobrazen v navigačním panelu, pokud UISearchDisplayController.DisplaysSearchBarInNavigationBar je vlastnost nastavena na hodnotu true. Je-li nastavena hodnota false – výchozí nastavení – při zobrazení kontroleru hledání je navigační panel skrytý.

Následující snímek obrazovky ukazuje panel hledání v rámci UISearchDisplayController :

Ukázka UISearchDisplayController

UITableView

Rozhraní API kolem UITableView jsou převážně beze změny. styl však významně změnil, aby odpovídal novému návrhu uživatelského rozhraní. Hierarchie interního zobrazení je také poněkud odlišná. Tato změna nebude mít vliv na většinu aplikací, ale je třeba vědět o.

Styl seskupené tabulky

Upravený seskupený styl se aktualizoval s obsahem, který se teď rozšiřuje na okraje obrazovky, jak je znázorněno níže:

Vzorový skupinový styl tabulky

SeparatorInset

Oddělovače řádků se teď dají odsazovat nastavením UITableVIewCell.SeparatorInset Vlastnosti. Například následující kód by se použil k odsazení buněk od levého okraje:

cell.SeparatorInset = new UIEdgeInsets (0, 50, 0, 0);

Tím se vytvoří zobrazení tabulka s odsazenými buňkami, jak je znázorněno níže:

Ukázka SeparatorInset UITableView

Styly tlačítek tabulky

Všechna tlačítka použitá v tabulkových zobrazeních se změnila. Následující snímek obrazovky představuje zobrazení tabulky v režimu úprav:

Tento snímek obrazovky představuje zobrazení tabulky v režimu úprav.

Další změny ovládacích prvků

Ostatní ovládací prvky UIKit se změnily i, včetně jezdců, přepínačů a prvky krokování. Tyto změny jsou čistě vizuální. Další informace najdete v Průvodci přechodem uživatelského rozhraní pro iOS 7společnosti Apple.

Obecné změny uživatelského rozhraní

Kromě změn v UIKit zavádí iOS 7 řadu vizuálních změn v uživatelském rozhraní, včetně:

  • Obsah na celé obrazovce
  • Vzhled pruhu
  • Barevný nádech

Full-Screen obsah

iOS 7 je navržený tak, aby aplikacím umožnil využít celou obrazovku. Zobrazení řadičů se teď překrývá stavovým řádkem a navigačním panelem – Pokud existuje, a to na rozdíl od zobrazení stavů a navigačních panelů.

Při přípravě aplikace pro iOS 7 můžete vizuálně znovu zarovnat podzobrazení pomocí Interface Builder nebo návrháře pro Xamarin iOS. Můžete také použít jedno z nových rozhraní API, která vám pomůžou programově pracovat s obsahem na celé obrazovce. Tato rozhraní API jsou představena níže.

TopLayoutGuide a BottomLayoutGuide

TopLayoutGuide a BottomLayoutGuide slouží jako odkaz na místo, kde by zobrazení měla začínat nebo končit, takže obsah není překrytý průsvitným UIKit pruhem, jak je uvedeno v následujícím příkladu:

Ukázkový obsah není překrytý průhledným UIKit pruhem

Tato rozhraní API lze použít pro výpočet posunutí zobrazení z horního nebo dolního okraje obrazovky a odpovídajícím způsobem upravit umístění obsahu:

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

    if (UIDevice.CurrentDevice.CheckSystemVersion (7, 0)) { 
        nfloat displacement_y = this.TopLayoutGuide.Length;

        //load subviews with displacement
    }

}

K nastavení ImageView posunu v horní části obrazovky můžeme použít hodnotu počítanou výše, takže se zobrazí celý obrázek:

Příklad posunutí ImageViews z horní části obrazovky

Pracovní ukázku najdete v tématu ImageViewer .

Hodnota posunutí je generována dynamicky po přidání zobrazení do hierarchie, takže při pokusu o čtení TopLayoutGuide a BottomLayoutGuide hodnoty v ViewDidLoad se vrátí 0. Vypočítá hodnotu po načtení zobrazení – například v ViewDidLayoutSubviews .

Důležité

TopLayoutGuide a BottomLayoutGuide jsou ve verzi iOS 11 ve prospěch nového rozložení bezpečné oblasti zastaralé. Společnost Apple prohlásila, že používání bezpečné oblasti je kompatibilní s verzí iOS starší než iOS 11. Další informace najdete v průvodci aktualizací aplikace pro iOS 11 .

EdgesForExtendedLayout

Toto rozhraní API určuje, které okraje zobrazení by se měly rozšířit na celou obrazovku bez ohledu na průsvitnost pruhů. V systému iOS 7 se navigační panely a panely nástrojů zobrazují na rozdíl od předchozích verzí iOS, které zabírají stejné místo. Aplikace Fotky pro iOS 7 ukazuje výchozí UIViewController.EdgesForExtendedLayout hodnotu UIRectEdge.All . Toto nastavení vyplní všechny čtyři okraje v zobrazení obsahem a vytvoří tak efekt překrývající se a na celé obrazovce:

Ukázka EdgesForExtendedLayout

Klepnutím na obrázek se pruhy odeberou a zobrazí se obrazovka na celé obrazovce:

EdgesForExtendedLayout se odebranými pruhy

Vzhledem k tomu, že je obsah na celé obrazovce výchozí, aplikace nakonfigurované pro iOS 6 budou mít oříznuté části zobrazení, jako na následujícím snímku obrazovky:

Aplikace nakonfigurované pro iOS 6 budou mít část zobrazení oříznuté, jako na tomto snímku obrazovky.

Úprava UIViewController.EdgesForExtendedLayout nastavení vlastnosti pro toto chování. Můžeme určit, že zobrazení neplní žádné hrany, takže naše zobrazení se vyhne zobrazování obsahu v prostoru, který je obsazený navigací nebo panely nástrojů (při každé orientaci):

if (UIDevice.CurrentDevice.CheckSystemVersion (7, 0)) { 
    this.EdgesForExtendedLayout = UIRectEdge.None;
}

V naší aplikaci uvidíte, že zobrazení je znovu přemístěné, takže se zobrazí celý obrázek:

Příklad s viditelným celým obrazem

Všimněte si, že zatímco účinky TopLayoutGuide/BottomLayoutGuideEdgesForExtendedLayout rozhraní API a jsou podobné, jsou určeny k naplnění různých cílů. Změna EdgesForExtendedLayout nastavení z výchozí hodnoty může opravovat oříznuté zobrazení v aplikacích určených pro iOS 6, ale dobrý návrh iOS 7 by měl respektovat vzhled na celé obrazovce a poskytovat prostředí pro zobrazení na celou obrazovku, které se spoléhá na TopLayoutGuide a BottomLayoutGuide správně umístit obsah, který je určen k manipulaci na vhodném místě pro uživatele.

Pracovní ukázku najdete v tématu ImageViewer .

Stav a navigační panely

Stavový řádek a navigační panely se vykreslují s průhledností. Stavové pruhy jsou transparentní, zatímco panely nástrojů a navigační panely jsou průsvitné a rozostřené, aby v uživatelském rozhraní podávaly nejasnosti. Následující snímek obrazovky ukazuje toto rozostření a průhlednost, kde modrá barva pozadí zobrazení kolekce znázorňuje jak stav, tak navigační panely, což jim dává světle modrý vzhled:

Rozostření stavu vzorku a navigačního panelu

Styly stavového řádku

Spolu s rozostřením a průhledností může být popředí stavového řádku buď světlý, nebo tmavý (tmavě výchozí). Styl stavového řádku lze nastavit z kontroleru zobrazení. Kontroler zobrazení také může nastavit, zda je stavový řádek skrytý nebo zobrazený.

Například následující kód Přepisuje PreferredStatusBarStyle metodu kontroler zobrazení tak, aby se stavový řádek zobrazil s světlým pozadím:

public override UIStatusBarStyle PreferredStatusBarStyle ()
{
    return UIStatusBarStyle.LightContent;
}

To způsobí, že se stavový řádek zobrazí takto:

Ukázka stavového řádku

Chcete-li skrýt stavový řádek z kódu kontroleru zobrazení, přepište PrefersStatusBarHidden , jak je znázorněno níže:

public override bool PrefersStatusBarHidden ()
{
    return true;
}

Tím se skryje stavový řádek:

Stavový řádek skrytý

Barevný nádech

Tlačítka se teď zobrazují jako text bez stylu okolí. Barvu textu lze ovládat pomocí nové TintColor vlastnosti v UIView . Nastavení TintColor aplikuje barvu na celou hierarchii zobrazení pro zobrazení, které je nastaví. Chcete-li použít TintColor aplikaci v celé aplikaci, nastavte ji na Window . Můžete také zjistit, kdy se barva odstínu mění přes UIView.TintColorDidChange metodu.

Například následující snímek obrazovky ukazuje účinek změny barvy odstínu v zobrazení navigačního kontroleru na fialovou:

Fialová barva nádechu v zobrazení navigačních ovladačů

Barevný nádech lze použít na obrázky i v případě, že RenderingMode je nastavena na UIImageRenderingMode.AlwaysTemplate .

Důležité

Barevný nádech nelze nastavit pomocí UIAppearance .

Dynamický typ

V systému iOS 7 může uživatel určit velikost textu v nastavení systému. U dynamického typu se písmo upraví dynamicky, aby se vypadalo dobře bez ohledu na velikost. UIFont.PreferredFontForTextStyle by měl být použit k získání písma, které je optimalizováno pro velikost řízenou uživatelem.

Souhrn

Tento článek popisuje změny prvků uživatelského rozhraní v iOS 7. Prověřuje několik změn provedených v zobrazeních a ovládacích prvcích v UIKit a zvýrazní změny vizuálů i změny v souvisejících rozhraních API. Nakonec zavádí nová rozhraní API pro práci s obsahem na celé obrazovce, na novém barevném nádechu podpory a dynamickém typu.