Funkce návrhu materiálu Xamarin.Android Designer

Toto téma popisuje funkce Návrháře, které vývojářům usnadňují vytváření rozložení vyhovujících návrhu materiálů. Tato část představuje a vysvětluje, jak používat mřížku materiálu, paletu barev materiálu, typografické měřítko a editor motivů.

Vývoj 2016: Všichni můžou vytvářet krásné aplikace s materiálovým designem

Přehled

Xamarin.Android Designer obsahuje funkce, které usnadňují vytváření rozložení kompatibilních s materiálem. Pokud nejste obeznámeni s návrhem materiálu, přečtěte si úvod k návrhu materiálu.

Visual Studio

V této příručce se podíváme na následující funkce Návrháře:

• Materiálová mřížka – překryvná plocha návrhu, která zobrazuje mřížku, mezery a klávesové čáry, které vám pomůžou umístit widgety rozložení podle pokynů pro návrh materiálu.

• Editor motivu – malý barevný editor prostředků, který umožňuje nastavit informace o barvě pro podmnožinu motivu. Můžete například zobrazit náhled a upravit barvy materiálu, například colorPrimary, colorPrimaryDarka colorAccent.

Podíváme se na každou z těchto funkcí a ukážeme si příklady jejich použití.

Mřížka návrhu materiálu

Nabídka Mřížka návrhu materiálu je k dispozici na panelu nástrojů v horní části Návrháře:

Když kliknete na ikonu Mřížka návrhu materiálu, Návrhář zobrazí překryvnou plochu návrhu, která obsahuje následující prvky:

• Klíčové čáry (oranžové čáry)

• Mezery (zelené oblasti)

• Mřížka (modré čáry)

Tyto prvky můžete vidět na předchozím snímku obrazovky. Každá z těchto překryvných položek je konfigurovatelná. Když kliknete na tři tečky vedle nabídky Mřížka návrhu materiálu, otevře se automaticky otevírané okno, které umožňuje zakázat nebo povolit mřížku, nakonfigurovat umístění klíčových čar a nastavit mezery. Všimněte si, že všechny hodnoty jsou vyjádřeny ( dp pixely nezávislé na hustotě):

Pokud chcete přidat novou spojnicu klíče, zadejte do pole Posun novou hodnotu posunu, vyberte umístění (vlevo, nahoře, vpravo nebo dole) a kliknutím na ikonu + přidejte novou spojnicu klávesy. Podobně pokud chcete přidat nové mezery, zadejte velikost a posun (v dp) do polí Velikost a Posun v uvedeném pořadí. Vyberte umístění (vlevo, nahoře, vpravo nebo dole) a kliknutím na ikonu + přidejte nové mezery.

Když tyto konfigurační hodnoty změníte, uloží se do souboru XML rozložení a znovu je použijete při opětovném otevření rozložení.

Editor motivů

Editor motivů umožňuje přizpůsobit informace o barvě pro podmnožinu atributů motivu. Editor motivů otevřete kliknutím na ikonu malířského štětce na panelu nástrojů:

Editor motivů je sice přístupný z panelu nástrojů pro všechny cílové verze Androidu a úrovně rozhraní API, ale pokud je cílová úroveň rozhraní API starší než rozhraní API 21 (Android 5.0 Lollipop), jsou k dispozici pouze podmnožina funkcí popsaných níže.

Na levém panelu Editoru motivů se zobrazí seznam barev, které tvoří aktuálně vybraný motiv (v tomto příkladu Default Themepoužíváme ):

Když vyberete barvu na levé straně, zobrazí se na pravém panelu následující karty, které vám pomůžou tuto barvu upravit:

• Dědění – zobrazí diagram dědičnosti stylu pro vybranou barvu a zobrazí přeloženou barvu a barevný kód přiřazený k této barvě motivu.

• Výběr barvy – Umožňuje změnit vybranou barvu na libovolnou hodnotu.

• Paleta materiálu – Umožňuje změnit vybranou barvu na hodnotu, která odpovídá návrhu materiálu.

• Prostředky – Umožňuje změnit vybranou barvu na jeden z ostatních existujících barevných prostředků v motivu.

Pojďme se podrobněji podívat na každou z těchto karet.

Karta Dědit

Jak je vidět v následujícím příkladu, karta Dědit zobrazuje dědičnost stylu pro barvu pozadí výchozího motivu:

V tomto příkladu výchozí motiv dědí ze stylu, který používá @color/background_material_light , ale přepíše ho color/material_grey_50pomocí , který má hodnotu barevného #fffafafakódu . Další informace o dědičnosti stylů naleznete v tématu Styly a motivy.

Výběr barvy

Následující snímek obrazovky znázorňuje výběr barvy:

V tomto příkladu lze barvu pozadí změnit na libovolnou hodnotu různými prostředky:

• Klikněte přímo na barvu.
• Zadávání hodnot odstínů, sytosti a jasu
• Zadávání hodnot RGB (červené, zelené, modré) v desítkové soustavě
• Nastavení alfa (neprůhlednosti) pro vybranou barvu
• Zadání šestnáctkového barevného kódu přímo.

Barva, kterou zvolíte v nástroji Pro výběr barev, není omezena na pokyny pro návrh materiálu ani na sadu dostupných barevných zdrojů.

Zdroje informací

Karta Zdroje nabízí seznam barevných prostředků, které už jsou v motivu:

Použití karty Zdroje omezuje vaše volby na tento seznam barev. Mějte na paměti, že pokud zvolíte barevný prostředek, který je již přiřazen k jiné části motivu, můžou se dva sousední prvky uživatelského rozhraní "spouštět společně" (protože mají stejnou barvu) a být obtížné, aby uživatel rozlišil.

Paleta materiálu

The Material Palette tab opens the Material Design Color Palette. Volba hodnoty barvy z této palety omezuje vaši volbu barev, aby byla konzistentní s pokyny pro návrh materiálu:

Horní část palety barev zobrazuje primární barvy návrhu materiálu, zatímco v dolní části palety se zobrazuje rozsah odstínů pro vybranou primární barvu. Když například vyberete Indigo, zobrazí se v dolní části dialogového okna kolekce odstínů Indigo . Když vyberete odstín, barva vlastnosti se změní na vybraný odstín. V následujícím příkladu Background Tint se tlačítko změní na Indigo 500:

Background Tint je nastavená na kód barvy pro Indigo 500 (#ff3f51b5) a Návrhář aktualizuje barvu pozadí tak, aby odrážel tuto změnu:

Další informace o paletě barev návrhu materiálu naleznete v průvodci paletou barev návrhu materiálu.

Vytvoření nového motivu

V následujícím příkladu použijeme paletu materiálů k vytvoření nového vlastního motivu. Nejprve změníme barvu pozadí na Modrou 900:

Když se změní barevný prostředek, zobrazí se zpráva se zprávou, aktuální motiv obsahuje neuložené změny:

Barva pozadí v Návrháři se změnila na nový výběr barev, ale tato změna ještě nebyla uložena. V tomto okamžiku můžete provést jednu z následujících věcí:

• Kliknutím na Zahodit změny zahodíte novou volbu barev (nebo volby) a vrátíte motiv do původního stavu.

• Stisknutím kombinace kláves CTRL+S uložte změny v aktuálním motivu.

V následujícím příkladu se stiskla kombinace kláves CTRL+S , aby se změny uložily do AppTheme:

Shrnutí

Toto téma popisuje funkce návrhu materiálu dostupné v nástroji Xamarin.Android Designer. Vysvětlila, jak povolit a nakonfigurovat mřížku návrhu materiálu a vysvětlila, jak pomocí Editoru motivů vytvořit nové vlastní motivy, které odpovídají pokynům pro návrh materiálu. Další informace o podpoře Xamarin.Android pro Materiál Design naleznete v tématu Motiv materiálu.

Visual Studio pro Mac

V této příručce se podíváme na následující funkce Návrháře:

• Mřížka návrhu materiálu – překryvná plocha návrhu, která zobrazuje mřížku, mezery a klávesové čáry, které vám pomůžou umístit widgety rozložení podle pokynů pro návrh materiálu.

• Paleta barev návrhu materiálu – dialogové okno Panel vlastností, které vám pomůže vybrat barvu z oficiální palety Materiál Design.

• Typografické měřítko – dialogové okno Panel vlastností, které poskytuje výběr nastavení vyhovujících návrhu materiálu pro textAppearance vlastnost textových polí.

• Editor motivu – malý barevný editor prostředků, který umožňuje nastavit informace o barvě pro podmnožinu motivu. Můžete například zobrazit náhled a upravit barvy materiálu, například colorPrimary, colorPrimaryDarka colorAccent.

Podíváme se na každou z těchto funkcí a ukážeme si příklady jejich použití.

Mřížka návrhu materiálu

Nabídka Mřížka návrhu materiálu je k dispozici na panelu nástrojů v horní části Návrháře:

Když kliknete na ikonu Mřížka návrhu materiálu, Návrhář zobrazí překryvnou plochu návrhu, která obsahuje následující prvky:

• Klíčové čáry (oranžové čáry)

• Mezery (zelené oblasti)

• Mřížka (modré čáry)

Tyto prvky se dají zobrazit na následujícím snímku obrazovky:

Každá z těchto překryvných položek je konfigurovatelná. Když kliknete na tři tečky (...) vedle nabídky Mřížka návrhu materiálu, otevře se automaticky otevírané okno dialogového okna, které umožňuje zakázat nebo povolit mřížku, nakonfigurovat umístění spojnic klíčů a nastavit mezery. Všimněte si, že všechny hodnoty jsou vyjádřeny ( dp pixely nezávislé na hustotě):

Pokud chcete přidat novou spojnicu klíče, zadejte do pole Posun novou hodnotu posunu, vyberte umístění (vlevo, nahoře, vpravo nebo dole) a kliknutím na ikonu + (která se zobrazí vpravo po zadání hodnoty) přidejte novou spojnicu klíče. Podobně pokud chcete přidat nové mezery, zadejte velikost a posun (v dp) do polí Velikost a Posun v uvedeném pořadí. Vyberte umístění (vlevo, nahoře, vpravo nebo dole) a kliknutím na ikonu + přidejte nové mezery.

Když tyto konfigurační hodnoty změníte, uloží se do souboru XML rozložení a znovu je použijete při opětovném otevření rozložení.

Paleta barev návrhu materiálu

Každá položka panelu vlastností, která přijímá barvu, má nyní další ikonu palety, kterou můžete použít k otevření palety barev návrhu materiálu, jak je znázorněno na tomto snímku obrazovky:

Když kliknete na tuto ikonu, otevře se automaticky otevírané okno dialogového okna, které vám umožní nakonfigurovat barvu této vlastnosti z palety barev návrhu materiálu:

Horní část palety barev zobrazuje primární barvy návrhu materiálu, zatímco v dolní části palety se zobrazuje rozsah odstínů pro vybranou primární barvu. Když například vyberete Indigo, zobrazí se v dolní části dialogového okna kolekce odstínů Indigo . Když vyberete odstín, barva vlastnosti se změní na vybraný odstín. V následujícím příkladu Background Tint se tlačítko změní na Indigo 500:

Background Tint je nastavená na kód barvy pro Indigo 500 (#ff3f51b5) a Návrhář aktualizuje barvu pozadí tlačítka tak, aby odrážel tuto změnu:

Další informace o paletě barev návrhu materiálu naleznete v průvodci paletou barev návrhu materiálu.

Typografické měřítko

Část Vzhled textu na kartě Styl panelu vlastností obsahuje ikonu, která umožňuje vybrat ze TextAppearance stylu, který odpovídá specifikaci Návrh materiálu:

Když kliknete na tuto ikonu, otevře se automaticky otevírané okno Typografické měřítko, ve kterém se zobrazí seznam předem nakonfigurovaných stylů textu, ze kterých si můžete vybrat:

V následujícím příkladu kliknutím na tlačítko Zobrazit 1 změníte text tlačítka na větší písmo zobrazení 1:

Styl textu v dialogovém okně Typografické měřítko se řídí nastavením motivu. Pokud je například motiv Light vybrán v Návrháři, seznam dostupných stylů textu zrcadlí motiv Light :

Editor motivů

Editor motivů umožňuje přizpůsobit informace o barvě pro podmnožinu atributů motivu. Editor motivů otevřete kliknutím na ikonu malířského štětce na panelu nástrojů:

Editor motivů je sice přístupný z panelu nástrojů pro všechny cílové verze Androidu a úrovně rozhraní API, ale pokud je cílová úroveň rozhraní API starší než rozhraní API 21 (Android 5.0 Lollipop), jsou k dispozici pouze podmnožina funkcí popsaných níže.

Na levém panelu Editoru motivů se zobrazí seznam barev, které tvoří aktuálně vybraný motiv (v tomto příkladu Default Themepoužíváme ):

Když vyberete barvu na levé straně, zobrazí se na pravém panelu následující karty, které vám pomůžou tuto barvu upravit:

• Dědění – zobrazí diagram dědičnosti stylu pro vybranou barvu a zobrazí přeloženou barvu a barevný kód přiřazený k této barvě motivu.

• Výběr barvy – Umožňuje změnit vybranou barvu na libovolnou hodnotu.

• Paleta materiálu – Umožňuje změnit vybranou barvu na hodnotu, která odpovídá návrhu materiálu.

• Prostředky – Umožňuje změnit vybranou barvu na jeden z ostatních existujících barevných prostředků v motivu.

Pojďme se podrobněji podívat na každou z těchto karet.

Karta Dědit

Jak je vidět v následujícím příkladu, karta Dědit zobrazuje dědičnost stylu pro barvu pozadí výchozího motivu:

V tomto příkladu výchozí motiv dědí ze stylu, který používá @color/background_material_dark , ale přepíše ho color/material_grey_850pomocí , který má hodnotu barevného #ff303030kódu . Další informace o dědičnosti stylů naleznete v tématu Styly a motivy.

Výběr barvy

Následující snímek obrazovky znázorňuje výběr barvy:

V tomto příkladu lze barvu pozadí změnit na libovolnou hodnotu různými prostředky:

• Klikněte přímo na barvu.
• Zadávání hodnot odstínů, sytosti a jasu
• Zadávání hodnot RGB (červené, zelené, modré) v desítkové soustavě
• Nastavení alfa (neprůhlednosti) pro vybranou barvu
• Zadání šestnáctkového barevného kódu přímo.

Barva, kterou zvolíte v nástroji Pro výběr barev, není omezena na pokyny pro návrh materiálu ani na sadu dostupných barevných zdrojů.

Zdroje informací

Karta Zdroje nabízí seznam barevných prostředků, které už jsou v motivu:

Použití karty Zdroje omezuje vaše volby na tento seznam barev. Mějte na paměti, že pokud zvolíte barevný prostředek, který je již přiřazen k jiné části motivu, můžou se dva sousední prvky uživatelského rozhraní "spouštět společně" (protože mají stejnou barvu) a být obtížné, aby uživatel rozlišil.

Paleta materiálu

Karta Paleta materiálů otevře paletu barev materiálu popsanou výše. Volba hodnoty barvy z této palety omezuje vaši volbu barev tak, aby byla konzistentní s pokyny pro návrh materiálu.

Vytvoření nového motivu

V následujícím příkladu použijeme paletu materiálů k vytvoření nového vlastního motivu. Nejprve změníme barvu pozadí na Modrou 900:

Když se změní barevný prostředek, zobrazí se zpráva se zprávou, aktuální motiv obsahuje neuložené změny:

Změna barvy v Návrháři byla provedena, ale tato změna ještě nebyla uložena. V tomto okamžiku můžete provést jednu z následujících věcí:

• Kliknutím na Zahodit změny zahodíte novou volbu barev (nebo volby) a vrátíte motiv do původního stavu.

• Stisknutím ⌘ +S uložte změny do nového motivu s názvem Vlastní.

Shrnutí

Toto téma popisuje funkce návrhu materiálu dostupné v nástroji Xamarin.Android Designer. Vysvětlila, jak povolit a nakonfigurovat mřížku návrhu materiálu, jak použít paletu barev návrhu materiálu k úpravě vlastností barev a jak pomocí selektoru typografické škály konfigurovat vlastnosti textu. Ukázalo se také, jak pomocí Editoru motivů vytvořit nové vlastní motivy, které odpovídají pokynům pro návrh materiálu. Další informace o podpoře Xamarin.Android pro Materiál Design naleznete v tématu Motiv materiálu.

Související odkazy

• Motiv Material
• Úvod k návrhu materiálu