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

iOS 7 představuje celou řadu změn uživatelského rozhraní. Tento článek popisuje některé větší změny, a to jak ve vizuálním vzhledu ovládacích prvků, tak 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 iOSu 7 de-zvýrazňují chrome odebráním atributů, jako jsou nadbytečné ohraničení, stavové pruhy a navigační panely, což snižuje množství místa na obrazovce používaného zobrazením obsahu. V iOSu 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 rozlišení prvků uživatelského rozhraní, místo atributů, jako jsou ohraničení tlačítka. Mnoho prvků, jako jsou navigační pruhy a stavové pruhy, jsou teď buď rozmazané, průsvitné nebo průhledné, s zobrazeními obsahu, které se nacházejí pod nimi. Tato zobrazení obsahu se vykreslují přes rozmazané pruhy, které vyjadřují pocit hloubky uživatelského rozhraní.

Tento článek popisuje několik změn prvků uživatelského rozhraní v iOSu 7 a různých rozhraní API souvisejících s novým návrhem uživatelského rozhraní.

Zobrazení a změny ovládacího prvku

Všechna zobrazení v UIKitu odpovídají novému vzhledu a chování iOS 7. Tato část zvýrazňuje některé změny těchto zobrazení a 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 teď bez ohraničení bez pozadí, jak je znázorněno níže:

Sample UIButton

Styl UIButtonType.RoundedRect byl zastaralý. Pokud se používá v iOSu 7, výsledkem bude UIButtonType.System použití, UIButtonType.RoundedRect což vytvoří výchozí styl tlačítka bez pozadí nebo viditelných okrajů, jak je znázorněno výše.

UIBarButtonItem

Podobně jako UIButtonu tlačítek pruhů jsou také ohraničení, výchozí nastavení nového UIBarButtonItemStyle.Plain stylu zobrazeného níže:

Sample UIBarButtonItem

Styl byl navíc UIBarButtonItemStyle.Bordered zastaralý. Nastavení UIBarButtonItemStyle.Bordered v iOSu UIBarButtonItemStyle.Plain 7 způsobí použití stylu.

Styl UIBarButtonItemStyle.Done se nezastaral. Vytvoří se ale také tlačítko bez ohraničení, pouze s tučným textovým stylem, jak je znázorněno:

Sample UIBarButtonItem in the Done style

UIAlertView

Kromě změny stylu pro nový vzhled a chování iOS 7 už zobrazení upozornění nepodporují přizpůsobení prostřednictvím dílčího zobrazení. I když zdědí UIAlertView volání na UIViewAddSubview určitou UIAlertView funkci, nemá žádný vliv. Představte si 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 vytvoří standardní zobrazení upozornění s ignorováným dílčím zobrazením, jak je znázorněno níže:

Sample UIAlertView

Poznámka: UIAlertView byl v iOSu 8 zastaralý. Zobrazte si recept kontroleru upozornění na používání zobrazení upozornění v iOSu 8 a novějším.

UISegmentedControl

Segmentované ovládací prvky v iOSu 7 jsou průhledné a podporují barvu odstínu. Barva odstínu se používá pro text a barvu ohraničení. Když je vybraný segment, barva se prohodí mezi pozadím a textem a barvou tónu použitou k zvýraznění vybraného segmentu, jak je znázorněno níže:

Sample UISegmentedControl

Kromě toho byl v iOSu UISegmentedControlStyle 7 zastaralý.

Výběr zobrazení

Rozhraní API pro zobrazení výběrů se z velké části nemění; Ale pokyny pro návrh iOS 7 by teď měly být vložené, nikoli jako vstupní zobrazení animované z dolní části obrazovky nebo prostřednictvím nového kontroleru nasdílené do zásobníku navigačního kontroleru, stejně jako v předchozích verzích iOS. To se dá zobrazit v aplikaci systémového kalendáře:

This can be seen in the system calendar app

UISearchDisplayController

Panel hledání se teď zobrazí uvnitř navigačního panelu, když UISearchDisplayController.DisplaysSearchBarInNavigationBar je vlastnost nastavená na true. Pokud je nastavená hodnota false – výchozí – navigační panel je při zobrazení kontroleru vyhledávání skrytý.

Následující snímek obrazovky znázorňuje panel hledání v rámci :UISearchDisplayController

Sample UISearchDisplayController

UITableView

Rozhraní API kolem UITableView jsou převážně nezměněná. Styl se ale výrazně změnil tak, aby odpovídal návrhu nového uživatelského rozhraní. Interní hierarchie zobrazení se také trochu liší. Tato změna nebude mít vliv na většinu aplikací, ale je to něco, o čem je potřeba vědět.

Styl seskupené tabulky

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

Sample Grouped Table Style

Oddělovač

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

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

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

Sample UITableView SeparatorInset

Styly tlačítek tabulky

Všechna tlačítka použitá v zobrazeních tabulek se změnila. Následující snímek obrazovky znázorňuje zobrazení tabulky v režimu úprav:

This screenshot presents a table view in editing mode

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

Jiné ovládací prvky UIKit se také změnily, včetně posuvníků, přepínačů a krokových stupňů. Tyto změny jsou čistě vizuální. Další informace najdete v průvodci přechodem uživatelského rozhraní iOS 7 společnosti Apple.

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

Kromě změn v UIKitu přináší iOS 7 celou řadu vizuálních změn uživatelského rozhraní, včetně těchto:

  • Obsah na celé obrazovce
  • Vzhled pruhu
  • Barva odstínu

obsah Full-Screen

IOS 7 je navržený tak, aby aplikace využívaly celou obrazovku. Kontrolery zobrazení se teď překrývají stavovým řádkem a navigačním panelem – pokud existuje – na rozdíl od zobrazení pod stavem a navigačními pruhy.

Při přípravě aplikace pro iOS 7 můžete vizuálně přiřaďte dílčí zobrazení pomocí Tvůrce rozhraní nebo Xamarinu iOS Designeru. K programovému zpracování obsahu na celé obrazovce můžete použít také jedno z nových rozhraní API. Tato rozhraní API jsou uvedena níže.

TopLayoutGuide a BottomLayoutGuide

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

Sample content not overlapped by a translucent UIKit bar

Tato rozhraní API je možné použít k výpočtu posunu 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
    }

}

Pomocí výše uvedené hodnoty můžeme nastavit ImageViewposun z horní části obrazovky, aby byl vidět celý obrázek:

Example ImageViews displacement from the top of the screen

Projděte si ImageViewer pro funkční ukázku.

Hodnota posunu se generuje dynamicky po přidání zobrazení do hierarchie, takže pokus o čtení TopLayoutGuide a BottomLayoutGuide hodnoty vracet ViewDidLoad hodnotu 0. Vypočítejte hodnotu po načtení zobrazení – například v souboru ViewDidLayoutSubviews.

Důležité

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

EdgeForExtendedLayout

Toto rozhraní API určuje, které okraje zobrazení by se měly rozšířit na celou obrazovku bez ohledu na průsvitnost pruhu. V iOSu 7 se navigační panely a panely nástrojů zobrazují vrstvené nad zobrazením kontroleru – na rozdíl od předchozích verzí iOSu, kde nezabírají stejné místo. Aplikace Fotky pro iOS 7 znázorňuje výchozí UIViewController.EdgesForExtendedLayout hodnotu. UIRectEdge.All Toto nastavení vyplní všechny čtyři okraje v zobrazení obsahem a vytvoří překrývající se efekt a efekt celé obrazovky:

Sample EdgesForExtendedLayout

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

EdgesForExtendedLayout with the bars removed

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

Apps configured for iOS 6 will have part of the view clipped, as in this screenshot

Úprava UIViewController.EdgesForExtendedLayout vlastnosti se pro toto chování upraví. Můžeme určit, že zobrazení nezaplní žádné hrany, takže se v našem zobrazení nebude zobrazovat obsah v prostoru obsazeném navigačními panely nebo panely nástrojů (při každé orientaci):

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

V naší aplikaci uvidíme, že se zobrazení znovu přeloží, takže bude vidět celý obrázek:

Example with whole image visible

Všimněte si, že zatímco účinky TopLayoutGuide/BottomLayoutGuide rozhraní API a EdgesForExtendedLayout rozhraní API jsou podobné, mají za cíl vyplnit různé cíle. EdgesForExtendedLayout Změna nastavení z výchozího nastavení může opravit vyříznutá zobrazení v aplikacích určených pro iOS 6, ale dobrý design iOS 7 by měl respektovat estetickou obrazovku na celé obrazovce a poskytovat prostředí pro zobrazení na celé obrazovce, spoléhat se na TopLayoutGuide ně a BottomLayoutGuide správně umístit obsah, který má být manipulován do pohodlného místa pro uživatele.

Projděte si ImageViewer pro funkční ukázku.

Stavové a navigační pruhy

Stavový řádek a navigační panely se vykreslují s průhledností. Stavové pruhy jsou průhledné, zatímco panely nástrojů a navigační panely jsou průsvitné a rozmazané, aby bylo možné vyjádřit pocit hloubky v uživatelském rozhraní. Následující snímek obrazovky ukazuje toto rozmazané a průhledné, kde modrá barva pozadí zobrazení kolekce zobrazuje stav i navigační panely a dává jim světle modrý vzhled:

Sample Status and Navigation Bar blurring

Styly stavového řádku

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

Například následující kód přepíše PreferredStatusBarStyle metodu kontroleru zobrazení, aby stavový řádek zobrazoval světlý popředí:

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

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

Sample Status Bar

Pokud chcete stavový řádek skrýt v kódu kontroleru zobrazení, přepište PrefersStatusBarHiddenho, jak je znázorněno níže:

public override bool PrefersStatusBarHidden ()
{
    return true;
}

Tím se skryje stavový řádek:

Status Bar hidden

Barva barevných odstínů

Tlačítka se teď zobrazují jako text bez chromu. Barvu textu lze ovládat pomocí nové TintColor vlastnosti .UIView TintColor Nastavení barvy použije pro celou hierarchii zobrazení pro zobrazení, které ho nastaví. Pokud chcete aplikaci použít TintColorv celé aplikaci, nastavte ji na .Window Můžete také zjistit, kdy se barva odstínu změní prostřednictvím UIView.TintColorDidChange metody.

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

Purple tint color on a navigation controllers view

Barvu odstínu lze použít i u obrázků, pokud je nastavena RenderingMode na UIImageRenderingMode.AlwaysTemplatehodnotu .

Důležité

Barvu barevných odstínů nelze nastavit pomocí UIAppearance.

Dynamický typ

V iOSu 7 může uživatel zadat velikost textu v nastavení systému. U dynamického typu se písmo dynamicky upraví tak, aby vypadalo dobře bez ohledu na velikost. UIFont.PreferredFontForTextStyle by se mělo použít k získání písma, které je optimalizované pro uživatelsky řízenou velikost.

Souhrn

Tento článek se zabývá změnami prvků uživatelského rozhraní v iOSu 7. Zkoumá několik změn provedených v zobrazeních a ovládacích prvcích v UIKitu a zvýrazňuje změny vizuálu i změny souvisejících rozhraní API. Nakonec zavádí nová rozhraní API pro práci s obsahem na celé obrazovce, novou podporou barev barev a dynamickým typem.