Automatické rozložení pomocí Xamarin Designeru pro iOS

Upozorňující

Návrhář pro iOS byl v sadě Visual Studio 2019 verze 16.8 a Visual Studio 2019 pro Mac verze 8.8 zastaralý a odebrán v sadě Visual Studio 2019 verze 16.9 a Visual Studio pro Mac verze 8.9. Doporučený způsob, jak vytvářet uživatelská rozhraní pro iOS, je přímo na Macu se systémem Xcode. Další informace naleznete v tématu Navrhování uživatelských rozhraní pomocí Xcode.

Automatické rozložení (označované také jako adaptivní rozložení) je responzivní přístup k návrhu. Na rozdíl od přechodného systému rozložení, kde je umístění jednotlivých prvků pevně zakódované na bod na obrazovce, je automatické rozložení o relacích – pozicích prvků vzhledem k ostatním prvkům na návrhové ploše. Jádrem automatického rozložení je myšlenka omezení nebo pravidel, která definují umístění prvku nebo sady prvků v kontextu jiných prvků na obrazovce. Vzhledem k tomu, že prvky nejsou vázány na konkrétní pozici na obrazovce, omezení pomáhají vytvořit adaptivní rozložení, které vypadá dobře na různých velikostech obrazovky a orientaci zařízení.

V této příručce představujeme omezení a způsob, jak s nimi pracovat v Xamarinu iOS Designeru. Tato příručka nepokrývá práci s omezeními prostřednictvím kódu programu. Informace o používání automatického rozložení prostřednictvím kódu programu najdete v dokumentaci Společnosti Apple.

Požadavky

Xamarin Designer pro iOS je k dispozici v Visual Studio pro Mac v sadě Visual Studio 2017 a novějších ve Windows.

V této příručce se předpokládá znalost komponent Návrháře z příručky Úvod do iOS Designeru .

Úvod do omezení

Omezení je matematická reprezentace vztahu mezi dvěma prvky na obrazovce. Reprezentace pozice prvku uživatelského rozhraní jako matematická relace řeší několik problémů spojených s pevným kódováním umístění prvku uživatelského rozhraní. Pokud bychom například chtěli umístit tlačítko 20 pixelů ze spodní části obrazovky v režimu na výšku, pozice tlačítka by byla mimo obrazovku v režimu na šířku. Abychom tomu předešli, můžeme nastavit omezení, které umístí dolní okraj tlačítka 20px ze spodní části zobrazení. Pozice okraje tlačítka by se pak vypočítala jako button.bottom = view.bottom - 20px, což by umístilo tlačítko 20px ze spodní části zobrazení v režimu na výšku i na šířku. Schopnost vypočítat umístění na základě matematické relace je to, co dělá omezení tak užitečná při návrhu uživatelského rozhraní.

Když nastavíme omezení, vytvoříme NSLayoutConstraint objekt, který přebírá jako argumenty objekty, které mají být omezeny, a vlastnosti nebo atributy, se kterými bude omezení fungovat. V iOS Designeru zahrnují atributy hrany, jako jsou levá, pravá, horní a dolní část prvku. Zahrnují také atributy velikosti, jako je výška a šířka a umístění středového bodu, centerX a středY. Když například přidáme omezení na pozici levé hranice dvou tlačítek, Návrhář generuje následující kód pod kryty:

View.AddConstraint (NSLayoutConstraint.Create (Button1, NSLayoutAttribute.Left, NSLayoutRelation.Equal, Button2, NSLayoutAttribute.Left, 1, 10));

Další část popisuje práci s omezeními pomocí iOS Designeru, včetně povolení a zakázání automatického rozložení a použití panelu nástrojů Omezení.

Povolit automatické rozložení

Výchozí konfigurace iOS Designeru má povolený režim omezení. Pokud ho ale potřebujete povolit nebo zakázat ručně, můžete to udělat ve dvou krocích:

1. Klikněte na prázdné místo na návrhové ploše. Tím se zruší výběr všech prvků a zobrazí se vlastnosti dokumentu scénáře.

2. Zaškrtněte nebo zrušte zaškrtnutí políčka Použít automatický popisek na panelu vlastností:

   

Ve výchozím nastavení se na povrchu nevytvořila ani nezobrazují žádná omezení. Místo toho se automaticky odvozují z informací rámce v době kompilace. Abychom mohli přidat omezení, musíme vybrat prvek na návrhové ploše a přidat k němu omezení. Můžeme to udělat pomocí panelu nástrojů Omezení.

Panel nástrojů Omezení

Panel nástrojů omezení byl aktualizován a nyní se skládá ze dvou hlavních částí:

• Přepínač režimu omezení: Dříve jste přešli do režimu omezení kliknutím znovu na vybrané zobrazení na návrhové ploše. Teď byste měli použít toto přepínací tlačítko na panelu omezení:

  

• Tlačítko Aktualizovat omezení: Je důležité si uvědomit, že změny se mění v závislosti na tom, jestli jste v režimu úprav omezení.

  • V režimu úprav omezení toto tlačítko upraví omezení tak, aby odpovídala rámečku prvku.
  • V režimu úprav rámce toto tlačítko upraví rámeček prvku tak, aby odpovídal pozici, která jsou definována omezení.

Úpravy omezení při překryvném okně

Automaticky otevírané okno editoru omezení nám umožňuje přidat a aktualizovat více omezení najednou pro výběrové zobrazení. Můžeme vytvořit několik omezení mezer, poměru stran a zarovnání, například zarovnání zobrazení k levým okrajům dvou zobrazení.

Pokud chcete upravit omezení vybraného zobrazení, kliknutím na tři tečky zobrazte automaticky otevírané okno:

Při otevření omezení se v zobrazení zobrazí všechna přednastavená omezení. Můžeme nastavit všechna omezení pro mezery výběrem možnosti Všechny strany ze pole se seznamem v pravém horním rohu a výběrem možnosti Vymazat vše je odebereme.

W nastaví šířku a H nastaví omezení výšky. Při kontrole poměru stran se výška a šířka zobrazení řídí na různých velikostech obrazovky, šířka zobrazení se použije jako čitatel pro poměr a výšku jako jmenovatel.

Čtyři pole se seznamem pro omezení mezer uvádí sousední zobrazení pro ukotvení omezení.

Úpravy omezení na základě povrchu

Pro jemněji vyladěné úpravy omezení můžeme pracovat s omezeními přímo na návrhové ploše. Tato část představuje základy úprav omezení na základě povrchu, včetně ovládacích prvků pro připnutí mezer, oblastí přetažení a práce s různými typy omezení.

Vytváření omezení

Nástroj iOS Designer nabízí dva typy ovládacích prvků pro manipulaci s prvky na návrhové ploše. Přetahování ovládacích prvků a připnutí mezer, jak je znázorněno na následujícím obrázku:

Ty se přepíná výběrem tlačítka režimu omezení na panelu omezení.

4 úchyty ve tvaru T na každé straně prvku definují horní, pravý, dolní a levý okraj prvku pro omezení. Dva úchyty ve tvaru I vpravo a dole prvku definují omezení výšky a šířky . Prostřední čtverec zpracovává omezení centerX i centerY .

Pokud chcete vytvořit omezení, vyberte úchyt a přetáhněte ho někam na návrhovou plochu. Když spustíte přetažení, zobrazí se na povrchu řada zelených čar nebo polí s informacemi o tom, co můžete omezit. Například na následujícím snímku obrazovky omezujeme horní stranu prostředního tlačítka:

Všimněte si tří přerušovaných zelených čar přes ostatní dvě tlačítka. Zelené čáry označují oblasti přetažení nebo atributy jiných prvků, na které můžeme omezit. Na snímku obrazovky výše nabízejí další dvě tlačítka 3 svislé drop oblasti ( dole, středY, nahoře) pro omezení našeho tlačítka. Přerušovaná zelená čára v horní části zobrazení znamená, že kontroler zobrazení nabízí omezení v horní části zobrazení a plný zelený rámeček znamená, že kontroler zobrazení nabízí omezení pod vodítkem horního rozložení.

Důležité

Vodítka rozložení jsou speciální typy cílů omezení, které nám umožňují vytvářet horní a dolní omezení, která berou v úvahu přítomnost systémových pruhů, jako jsou stavové pruhy nebo panely nástrojů. Jedním z hlavních použití je mít aplikaci kompatibilní mezi iOSem 6 a iOSem 7, protože nejnovější verze má zobrazení kontejneru, které se rozšiřuje pod stavovým řádkem. Další informace o průvodci horním rozložením najdete v dokumentaci společnosti Apple.

Další tři části představují práci s různými typy omezení.

Omezení velikosti

S omezeními velikosti – výška a šířka – máte dvě možnosti. První možností je přetažení úchytu tak, aby byl omezen na velikost prvku souseda, jak je znázorněno výše uvedeným příkladem. Druhou možností je poklikáním na úchyt vytvořit vlastní omezení. To nám umožňuje zadat hodnotu konstantní velikosti, jak je znázorněno na následujícím snímku obrazovky:

Omezení center

Čtvercový úchyt vytvoří omezení centerX nebo centerY v závislosti na kontextu. Přetažením čtverecího úchytu se ostatní prvky rozsvítí, aby nabízely svislé i vodorovné oblasti přetažení, jak je znázorněno na následujícím snímku obrazovky:

Pokud zvolíte svislou oblast přetažení, vytvoří se omezení středy . Pokud zvolíte vodorovnou oblast přetažení, omezení bude založeno na centrU.

Kombinovaná omezení

Pokud chcete vytvořit omezení rovnosti zarovnání i velikosti mezi dvěma prvky, můžete vybrat položky z horního panelu nástrojů a určit – v pořadí – vodorovné zarovnání, svislé zarovnání a rovná se velikost, jak je znázorněno na následujícím snímku obrazovky:

Vizualizace a úpravy omezení

Když přidáte omezení, zobrazí se na návrhové ploše jako modrá čára, když vyberete položku:

Omezení můžete vybrat kliknutím na modrou čáru a úpravou hodnot omezení přímo na panelu vlastností. Případně poklikáním na modrou čáru se zobrazí automaticky otevírané okno, které vám umožní upravit hodnoty přímo na návrhové ploše:

Problémy s omezením

Při použití omezení může nastat několik typů problémů:

• Konfliktní omezení – K tomu dochází v případě, že více omezení vynutí, aby prvek měl konfliktní hodnoty pro atribut a modul omezení je nemůže odsouhlasit.
• Nedostatečně omezené položky – Vlastnosti prvku (umístění + velikost) musí být zcela pokryty sadou omezení a vnitřní velikosti, aby omezení byla platná. Pokud jsou tyto hodnoty nejednoznačné, znamená se, že položka je nedostatečně podtrénovaná.
• Chybné umístění rámce – K tomu dochází, když rámec prvku a jeho sada omezení definují dva různé výsledné obdélníky.

Tato část popisuje tři výše uvedené problémy a obsahuje podrobnosti o tom, jak je zpracovat.

Konfliktní omezení

Konfliktní omezení jsou označená červeně a mají symbol upozornění. Když najedete myší na symboly upozornění, zobrazí se automaticky otevírané okno s informacemi o konfliktu:

Nevyučované položky

Podkontrénované položky se zobrazují oranžově a aktivují vzhled oranžové ikony značky na panelu objektů kontroleru zobrazení:

Pokud kliknete na ikonu značky, můžete získat informace o nedostatečně omezených položkách na scéně a vyřešit problémy jejich úplným omezením nebo odebráním jejich omezení, jak je znázorněno na následujícím snímku obrazovky:

Chybně umístěné snímky

Chybně umístěné rámeček používá stejný barevný kód jako nevytrénované položky. Položka bude vždy vykreslena na povrchu pomocí jeho nativního rámce, ale v případě chybného umístění rámečku červený obdélník označí, kde položka skončí při spuštění aplikace, jak je znázorněno na následujícím snímku obrazovky:

Pokud chcete vyřešit chyby chybného místa rámce, vyberte tlačítko Aktualizovat rámce na základě omezení na panelu nástrojů omezení (úplně vpravo):

Tím se automaticky upraví rámec prvku tak, aby odpovídal pozicím definovaným ovládacími prvky.

Úprava omezení v kódu

V závislosti na požadavcích vaší aplikace může docházet k občasné změně omezení v kódu. Pokud chcete například změnit velikost nebo změnit umístění omezení zobrazení, ke kterému je připojeno omezení, změňte prioritu omezení nebo ho úplně deaktivujte.

Pokud chcete získat přístup k omezení v kódu, musíte ho nejprve zveřejnit v iOS Designeru následujícím způsobem:

1. Vytvořte omezení jako normální (pomocí některé z výše uvedených metod).

2. V Průzkumníku osnovy dokumentu vyhledejte požadované omezení a vyberte ho:

   

3. Potom na kartě Widget v Průzkumníku vlastností přiřaďte název omezení:

   

4. Uloží vaše změny.

S výše uvedenými změnami můžete získat přístup k omezení v kódu a upravit jeho vlastnosti. Například pomocí následujícího příkazu můžete nastavit výšku připojeného zobrazení na nulu:

ViewInfoHeight.Constant = 0;

Vzhledem k následujícímu nastavení omezení v iOS Designeru:

Předání odloženého rozložení

Místo okamžité aktualizace připojeného zobrazení v reakci na změny omezení naplánuje modul automatického rozložení v blízké budoucnosti předání odloženého rozložení. Během tohoto odloženého průchodu se nejen aktualizuje dané omezení zobrazení, přepočítá se omezení pro každé zobrazení v hierarchii a aktualizuje, aby se upravilo pro nové rozložení.

Kdykoli můžete naplánovat vlastní pass Deferred Layout Pass voláním SetNeedsLayout nebo SetNeedsUpdateConstraints metod nadřazeného zobrazení.

Pass Deferred Layout Pass se skládá ze dvou jedinečných průchodů hierarchií zobrazení:

• Průchod aktualizace – V tomto průchodu modul automatického rozložení prochází hierarchii zobrazení a vyvolá metodu UpdateViewConstraints na všech řadičích zobrazení a metodu UpdateConstraints ve všech zobrazeních.
• Pass - Again, Auto Layout Engine prochází hierarchii zobrazení, ale tentokrát vyvolá metodu ViewWillLayoutSubviews pro všechny kontrolery zobrazení a metodu LayoutSubviews ve všech zobrazeních. Metoda LayoutSubviews aktualizuje Frame vlastnost každého dílčího zobrazení obdélníkem vypočítaným modulem automatického rozložení.

Animace změn omezení

Kromě úprav vlastností omezení můžete pomocí základní animace animovat změny omezení zobrazení. Příklad:

UIView.BeginAnimations("OpenInfo");
UIView.SetAnimationDuration(1.0f);
ViewInfoHeight.Constant = 237;
View.LayoutIfNeeded();

//Execute Animation
UIView.CommitAnimations();

Zde je klíč volá metodu LayoutIfNeeded nadřazeného zobrazení uvnitř animačního bloku. To dává zobrazení pokyn, aby nakreslil každý "rámeček" animovaného umístění nebo změny velikosti. Bez tohoto řádku by zobrazení jednoduše přichytálo k konečné verzi bez animace.

Shrnutí

Tato příručka představila iOS Auto (nebo "adaptivní") rozložení a koncept omezení jako matematické znázornění vztahů mezi prvky na návrhové ploše. Popisuje, jak povolit automatické rozložení v iOS Designeru, pracovat s panelem nástrojů Omezení a upravit omezení jednotlivě na návrhové ploše. Dále jsme vysvětlili, jak řešit tři běžné problémy s omezeními. Nakonec ukázala, jak upravit omezení v kódu.

Související odkazy

• Úvod do scénářů
• Návod k návrhu ovládacích prvků pro iOS
• Přehled Android Designeru
• Programová omezení