Motiv Material

Material Theme je styl uživatelského rozhraní, který určuje vzhled a chování zobrazení a aktivit počínaje Androidem 5.0 (Lollipop). Material Theme je integrovaný do Androidu 5.0, takže je používán systémovým uživatelským rozhraním i aplikacemi. Material Theme není "motiv" ve smyslu možnosti vzhledu na úrovni systému, kterou uživatel může dynamicky vybírat z nabídky nastavení. Motiv materiálu si můžete představit jako sadu souvisejících předdefinovaných základních stylů, které můžete použít k přizpůsobení vzhledu a chování aplikace.

Android poskytuje tři varianty motivu materiálu:

  • Theme.Material – tmavá verze materiálového motivu; toto je výchozí příchutě v Androidu 5.0.

  • Theme.Material.Light – Light verze materiálového motivu.

  • Theme.Material.Light.DarkActionBar – Světlá verze materialového motivu, ale s tmavým panelem akcí.

Tady jsou uvedeny příklady těchto příchutí motivu materiálu:

Example screenshots of the Dark theme, Light theme, and Dark Action Bar theme

Z materialového motivu můžete odvodit vlastní motiv, který přepíše některé nebo všechny atributy barvy. Můžete například vytvořit motiv, který je odvozen z Theme.Material.Light, ale přepíše barvu pruhu aplikace tak, aby odpovídal barvě vaší značky. Můžete také stylovat jednotlivá zobrazení; Můžete například vytvořit styl pro CardView , který má více zaoblené rohy a používá tmavší barvu pozadí.

Můžete použít jeden motiv pro celou aplikaci nebo můžete použít různé motivy pro různé obrazovky (aktivity) v aplikaci. Na výše uvedených snímcích obrazovky například jedna aplikace používá pro každou aktivitu jiný motiv k předvedení předdefinovaných barevných schémat. Přepínače přepínají aplikaci na různé aktivity a v důsledku toho zobrazují různé motivy.

Vzhledem k tomu, že material theme je podporován pouze v Androidu 5.0 a novějším, nemůžete ho použít (ani vlastní motiv odvozený z materialového motivu) k motivu aplikace pro spouštění v dřívějších verzích Androidu. Aplikaci ale můžete nakonfigurovat tak, aby používala materiálový motiv na zařízeních s Androidem 5.0 a při spuštění na starších verzích Androidu se elegantně vraťte k dřívějšímu motivu (podrobnosti najdete v části Kompatibilita tohoto článku).

Požadavky

K používání nových funkcí motivu pro Android 5.0 v aplikacích založených na Xamarinu je potřeba následující:

  • Xamarin.Android – Xamarin.Android 4.20 nebo novější musí být nainstalovaný a nakonfigurovaný s Visual Studio nebo Visual Studio pro Mac.

  • Android SDK – Android 5.0 (API 21) nebo novější musí být nainstalován prostřednictvím Správce sady Android SDK.

  • Java JDK 1.8 – JDK 1.7 se dá použít, pokud cílíte konkrétně na rozhraní API úrovně 23 a starší. JDK 1.8 je k dispozici od Oracle.

Informace o konfiguraci projektu aplikace pro Android 5.0 najdete v tématu Nastavení Project androidu 5.0.

Použití předdefinovaných motivů

Nejjednodušší způsob, jak použít materialový motiv, je nakonfigurovat aplikaci tak, aby používala předdefinovaný motiv bez přizpůsobení. Pokud nechcete explicitně nakonfigurovat motiv, vaše aplikace použije výchozí nastavení Theme.Material (tmavý motiv). Pokud má vaše aplikace jenom jednu aktivitu, můžete nakonfigurovat motiv na úrovni aktivity. Pokud má vaše aplikace více aktivit, můžete motiv nakonfigurovat na úrovni aplikace tak, aby používal stejný motiv napříč všemi aktivitami, nebo můžete různým aktivitám přiřadit různé motivy. Následující části vysvětlují, jak nakonfigurovat motivy na úrovni aplikace a na úrovni aktivity.

Motivy aplikace

Pokud chcete nakonfigurovat celou aplikaci tak, aby používala příchuť materialového motivu, nastavte android:theme atribut uzlu aplikace v AndroidManifest.xml na jednu z následujících možností:

  • @android:style/Theme.Material - Tmavý motiv.

  • @android:style/Theme.Material.Light - Světlý motiv.

  • @android:style/Theme.Material.Light.DarkActionBar – Světlý motiv s tmavým panelem akcí.

Následující příklad nakonfiguruje aplikaci MyApp tak, aby používala světlý motiv:

<application android:label="MyApp" 
             android:theme="@android:style/Theme.Material.Light">
</application>

Případně můžete nastavit atribut aplikace Theme v AssemblyInfo.cs (nebo Properties.cs). Příklad:

[assembly: Application(Theme="@android:style/Theme.Material.Light")]

Když je motiv aplikace nastavený na @android:style/Theme.Material.Light, každá aktivita v Aplikaci MyApp se zobrazí pomocí Theme.Material.Light.

Motivy aktivity

K motivu aktivity přidáte Theme nastavení atributu [Activity] nad deklaraci aktivity a přiřadíte Theme mu příchuť materialového motivu, kterou chcete použít. Následující příklad motivuje aktivitu s Theme.Material.Light:

[Activity(Theme = "@android:style/Theme.Material.Light",
          Label = "MyApp", MainLauncher = true, Icon = "@drawable/icon")]  

Jiné aktivity v této aplikaci budou používat výchozí Theme.Material tmavé barevné schéma (nebo pokud je nakonfigurované nastavení motivu aplikace).

Použití vlastních motivů

Značku můžete vylepšit vytvořením vlastního motivu, který styluje vaši aplikaci barvami vaší značky. Pokud chcete vytvořit vlastní motiv, definujete nový styl, který je odvozený z předdefinované příchutě motivu materiálu a přepisuje atributy barev, které chcete změnit. Můžete například definovat vlastní motiv, který je odvozen od Theme.Material.Light.DarkActionBar barvy pozadí obrazovky a změní barvu pozadí obrazovky na béžovou místo bílé.

Material Theme zveřejňuje následující atributy rozložení pro přizpůsobení:

  • colorPrimary – Barva panelu aplikace.

  • colorPrimaryDark – barva stavového řádku a kontextových aplikačních pruhů; to je obvykle tmavá verze colorPrimary.

  • colorAccent – Barva ovládacích prvků uživatelského rozhraní, jako jsou zaškrtávací políčka, přepínače a úpravy textových polí.

  • windowBackground – Barva pozadí obrazovky.

  • textColorPrimary – Barva textu uživatelského rozhraní na panelu aplikace.

  • statusBarColor – Barva stavového řádku.

  • navigationBarColor – Barva navigačního panelu.

Tyto oblasti obrazovky jsou označené v následujícím diagramu:

Diagram of attributes and their associated screen areas

Ve výchozím nastavení statusBarColor je nastavena na hodnotu colorPrimaryDark. Můžete nastavit statusBarColor plnou barvu nebo ji nastavit tak, aby @android:color/transparent byl stavový řádek průhledný. Navigační panel lze také nastavit jako průhledný nastavením navigationBarColor@android:color/transparent.

Vytvoření vlastního motivu aplikace

Vlastní motiv aplikace můžete vytvořit tak, že vytvoříte a upravíte soubory ve složce Zdroje projektu aplikace. Pokud chcete aplikaci stylovat pomocí vlastního motivu, postupujte následovně:

  • Vytvořte souborcolors.xml v prostředcích/hodnotách – tento soubor použijete k definování vlastních barev motivu. Do colors.xml můžete například vložit následující kód, který vám pomůže začít:
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <color name="my_blue">#3498DB</color>
    <color name="my_green">#77D065</color>
    <color name="my_purple">#B455B6</color>
    <color name="my_gray">#738182</color>
</resources>
  • Upravte tento ukázkový soubor tak, aby definoval názvy a barevné kódy pro barevné prostředky, které budete používat ve vlastním motivu.

  • Vytvořte složku Resources/values-v21 . V této složce vytvořte souborstyles.xml :

    Location of styles.xml in the Resources/values-21.xml folder

    Všimněte si, že prostředky/hodnoty-v21 jsou specifické pro Android 5.0 – starší verze Androidu nebudou číst soubory v této složce.

  • resources Přidejte uzel k styles.xml a definujte style uzel s názvem vlastního motivu. Tady je například souborstyles.xml , který definuje MyCustomTheme (odvozený z integrovaného Theme.Material.Light stylu motivu):

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Customizations go here -->
    </style>
</resources>
  • V tuto chvíli aplikace, která používá MyCustomTheme , zobrazí burzovní Theme.Material.Light motiv bez přizpůsobení:

    Custom theme appearance before customizations

  • Přidejte do styles.xml přizpůsobení barev definováním barev atributů rozložení, které chcete změnit. Pokud chcete například změnit barvu panelu aplikace na my_blue ovládací prvky my_purpleuživatelského rozhraní a změnit na , přidejte přepsání barev do styles.xml , které odkazují na barevné prostředky nakonfigurované v colors.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Override the app bar color -->
        <item name="android:colorPrimary">@color/my_blue</item>
        <!-- Override the color of UI controls -->
        <item name="android:colorAccent">@color/my_purple</item>
    </style>
</resources>

Díky těmto změnám aplikace, která používá MyCustomTheme , zobrazí barvu panelu aplikace a ovládací prvky uživatelského rozhraní, my_bluemy_purpleale barevné schéma používá Theme.Material.Light všude jinde:

Custom theme appearance after customizations

V tomto příkladu si MyCustomTheme půjčí barvy pro Theme.Material.Light barvu pozadí, stavový řádek a barvy textu, ale změní barvu panelu aplikace na my_blue a nastaví barvu přepínače na my_purple.

Vytvoření vlastního stylu zobrazení

Android 5.0 vám také umožňuje stylovat individuální zobrazení. Po vytvoření colors.xml a styles.xml (jak je popsáno v předchozí části) můžete přidat styl zobrazení do styles.xml. Pokud chcete stylovat individuální zobrazení, postupujte následovně:

  • Upravte prostředky/hodnoty-v21/styles.xml a přidejte style uzel s názvem vlastního stylu zobrazení. Nastavte vlastní atributy barev pro zobrazení v rámci tohoto style uzlu. Pokud chcete například vytvořit vlastní styl CardView , který má více zaoblené rohy a používá my_blue se jako barva pozadí karty, přidejte style uzel k styles.xml (uvnitř resources uzlu) a nakonfigurujte barvu pozadí a rohový poloměr:
<!-- Theme an individual view: -->
<style name="CardView.MyBlue">

    <!-- Change the background color to Xamarin blue: -->
    <item name="cardBackgroundColor">@color/my_blue</item>

    <!-- Make the corners very round: -->
    <item name="cardCornerRadius">18dp</item>
</style>
  • V rozložení nastavte style atribut pro toto zobrazení tak, aby odpovídal názvu vlastního stylu, který jste zvolili v předchozím kroku. Příklad:
<android.support.v7.widget.CardView
    style="@style/CardView.MyBlue"
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal">

Následující snímek obrazovky obsahuje příklad výchozího ( CardView zobrazeného na levé straně) ve srovnání CardView s vlastním motivem CardView.MyBlue (zobrazeným na pravé straně):

Examples of default CardView and Custom CardView

V tomto příkladu se vlastní CardView zobrazí s barvou my_blue pozadí a 18dp rohovým poloměrem.

Kompatibilita

Pokud chcete aplikaci stylovat tak, aby používala materiálový motiv v Androidu 5.0, ale automaticky se vrátí ke stylu kompatibilnímu se směrem dolů ve starších verzích Androidu, použijte následující postup:

  • Definujte vlastní motiv v části Resources/values-v21/styles.xml , který je odvozený ze stylu materialového motivu. Příklad:
<resources>
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Your customizations go here -->
    </style>
</resources>
  • Definujte vlastní motiv v části Resources/values/styles.xml , který je odvozený ze staršího motivu, ale používá stejný název motivu jako výše. Příklad:
<resources>
    <style name="MyCustomTheme" parent="android:Theme.Holo.Light">
        <!-- Your customizations go here -->
    </style>
</resources>
  • V AndroidManifest.xmlnakonfigurujte aplikaci s vlastním názvem motivu. Příklad:
<application android:label="MyApp" 
             android:theme="@style/MyCustomTheme">
</application>
  • Případně můžete upravit styl konkrétní aktivity pomocí vlastního motivu:
[Activity(Label = "MyActivity", Theme = "@style/MyCustomTheme")]

Pokud motiv používá barvy definované v souborucolors.xml , nezapomeňte tento soubor umístit do umístění Resources/values (nikoli Resources/values-v21), aby obě verze vlastního motivu měly přístup k definici barev.

Když aplikace běží na zařízení s Androidem 5.0, použije definici motivu zadanou v části Resources/values-v21/styles.xml. Když tato aplikace běží na starších zařízeních s Androidem, automaticky se vrátí k definici motivu zadané v části Resources/values/styles.xml.

Další informace o kompatibilitě motivu se staršími verzemi Androidu najdete v tématu Alternativní zdroje informací.

Souhrn

Tento článek představil nový styl uživatelského rozhraní motivu materiálu, který je součástí Androidu 5.0 (Lollipop). Popisuje tři předdefinované varianty motivu materiálu, které můžete použít ke stylu aplikace, vysvětlilo, jak vytvořit vlastní motiv pro branding vaší aplikace a poskytl příklad, jak motivovat jednotlivé zobrazení. Nakonec tento článek vysvětluje, jak ve vaší aplikaci používat materialový motiv a zároveň udržovat kompatibilita se staršími verzemi Androidu směrem dolů.