Material ThemeMaterial Theme
03/01/2018
本文内容
材料主题 是一种用户界面样式,用于确定从 Android 5.0 (棒糖形) 开始的视图和活动的外观和感觉。Material Theme is a user interface style that determines the look and feel of views and activities starting with Android 5.0 (Lollipop). 材料主题内置于 Android 5.0 中,因此它由系统 UI 和应用程序使用。Material Theme is built into Android 5.0, so it is used by the system UI as well as by applications. 对于系统范围内的外观选项,用户可从 "设置" 菜单动态选择的 "材料" 主题不是 "主题"。Material Theme is not a "theme" in the sense of a system-wide appearance option that a user can dynamically choose from a settings menu. 相反,可以将材料主题视为一组相关的内置基准样式,您可以使用这些样式自定义应用程序的外观。Rather, Material Theme can be thought of as a set of related built-in base styles that you can use to customize the look and feel of your app.
Android 提供三种材料主题风格:Android provides three Material Theme flavors:
Theme.Material–深色版本的材料主题; 这是 Android 5.0 中的默认风格。Theme.Material – Dark version of Material Theme; this is the default flavor in Android 5.0.
Theme.Material.Light–材料主题的轻型版本。Theme.Material.Light – Light version of Material Theme.
Theme.Material.Light.DarkActionBar–材料主题的轻型版本,但具有深色操作栏。Theme.Material.Light.DarkActionBar – Light version of Material Theme, but with a dark action bar.
此处显示了这些材料主题风格的示例:Examples of these Material Theme flavors are displayed here:
可以从材料主题派生,以创建自己的主题,并覆盖部分或全部颜色属性。You can derive from Material Theme to create your own theme, overriding some or all color attributes. 例如,你可以创建一个从派生的主题 Theme.Material.Light ,但会覆盖应用栏颜色以匹配品牌的颜色。For example, you can create a theme that derives from Theme.Material.Light, but overrides the app bar color to match the color of your brand. 您还可以设置各个视图的样式;例如,可以创建具有更多圆角的 CardView 样式,并使用较暗的背景色。You can also style individual views; for example, you can create a style for CardView that has more rounded corners and uses a darker background color.
你可以对整个应用使用单个主题,也可以在应用中对不同屏幕 (活动) 使用不同的主题。You can use a single theme for an entire app, or you can use different themes for different screens (activities) in an app. 例如,在上面的屏幕截图中,一个应用对每个活动使用不同的主题来演示内置的配色方案。In the above screenshots, for example, a single app uses a different theme for each activity to demonstrate the built-in color schemes. 单选按钮会将应用切换到不同的活动,因此会显示不同的主题。Radio buttons switch the app to different activities, and, as a result, display different themes.
由于仅 Android 5.0 及更高版本支持材料主题,因此你不能使用它 (或从材料主题) 派生的自定义主题,以便将应用程序应用于早期版本的 Android。Because Material Theme is supported only on Android 5.0 and later, you cannot use it (or a custom theme derived from Material Theme) to theme your app for running on earlier versions of Android. 但是,你可以将应用配置为使用 Android 5.0 设备上的材料主题,并在较早版本的 Android 上运行时适当地回退到前面的主题 (请参阅本文的 " 兼容性 " 部分以了解详细信息) 。However, you can configure your app to use Material Theme on Android 5.0 devices and gracefully fall back to an earlier theme when it runs on older versions of Android (see the Compatibility section of this article for details).
要求Requirements
若要在基于 Xamarin 的应用中使用新的 Android 5.0 材料主题功能,需要满足以下要求:The following is required to use the new Android 5.0 Material Theme features in Xamarin-based apps:
Xamarin.Android – 必须安装和配置 Xamarin xamarin 4.20 或更高版本,并且必须安装 Visual Studio 或 Visual Studio for Mac。Xamarin.Android – Xamarin.Android 4.20 or later must be installed and configured with either Visual Studio or Visual Studio for Mac.
Android SDK – Android 5.0 (API 21) 或更高版本必须通过 Android SDK 管理器进行安装。Android SDK – Android 5.0 (API 21) or later must be installed via the Android SDK Manager.
JAVA JDK 1.8 – 如果特别面向 API 级别23和更早版本,可以使用 JDK 1.7。Java JDK 1.8 – JDK 1.7 can be used if you are specifically targeting API level 23 and earlier. JDK 1.8 可从 Oracle获得。JDK 1.8 is available from Oracle.
若要了解如何配置 Android 5.0 应用项目,请参阅 设置 android 5.0 项目。To learn how to configure an Android 5.0 app project, see Setting Up an Android 5.0 Project.
使用内置主题Using the Built-in Themes
使用材料主题的最简单方法是将应用程序配置为使用无需自定义的内置主题。The easiest way to use Material Theme is to configure your app to use a built-in theme without customization. 如果你不希望显式配置主题,你的应用将默认为 Theme.Material (深色主题) 。If you don't want to explicitly configure a theme, your app will default to Theme.Material (the dark theme). 如果应用只有一个活动,可以在活动级别配置主题。If your app has only one activity, you can configure a theme at the activity level. 如果应用有多个活动,则可以在应用程序级别配置主题,使其在所有活动中使用相同的主题,也可以为不同的活动分配不同的主题。If your app has multiple activities, you can configure a theme at the application level so that it uses the same theme across all activities, or you can assign different themes to different activities. 以下部分介绍如何在应用级别和活动级别配置主题。The following sections explain how to configure themes at the app level and at the activity level.
主题应用程序Theming an Application
若要将整个应用程序配置为使用材料主题风格,请将 android:theme AndroidManifest.xml 中的 "应用程序" 节点的属性设置为以下其中一项:To configure an entire application to use a Material Theme flavor, set the android:theme attribute of the application node in AndroidManifest.xml to one of the following:
@android:style/Theme.Material–深色主题。@android:style/Theme.Material – Dark theme.
@android:style/Theme.Material.Light–浅色主题。@android:style/Theme.Material.Light – Light theme.
@android:style/Theme.Material.Light.DarkActionBar–带有深色操作栏的浅色主题。@android:style/Theme.Material.Light.DarkActionBar – Light theme with dark action bar.
下面的示例将 application MyApp 配置为使用浅色主题:The following example configures the application MyApp to use the light theme:
android:theme="@android:style/Theme.Material.Light">
或者,可以 Theme 在 AssemblyInfo.cs (或 Properties.cs) 中设置应用程序属性。Alternately, you can set the application Theme attribute in AssemblyInfo.cs (or Properties.cs). 例如:For example:
[assembly: Application(Theme="@android:style/Theme.Material.Light")]
当应用程序主题设置为时 @android:style/Theme.Material.Light ,将使用显示 MyApp 中的每个活动 Theme.Material.Light 。When the application theme is set to @android:style/Theme.Material.Light, every activity in MyApp will be displayed using Theme.Material.Light.
主题活动Theming an Activity
若要为活动设置主题,请将 Theme 设置添加到 [Activity] 活动声明之上的属性,并将其分配给 Theme 要使用的材料主题风格。To theme an activity, you add a Theme setting to the [Activity] attribute above your activity declaration and assign Theme to the Material Theme flavor that you want to use. 下面的示例使用主题来处理活动 Theme.Material.Light :The following example themes an activity with Theme.Material.Light:
[Activity(Theme = "@android:style/Theme.Material.Light",
Label = "MyApp", MainLauncher = true, Icon = "@drawable/icon")]
此应用中的其他活动将使用默认 Theme.Material 深色配色方案 (或(如果已配置),则应用程序主题设置) 。Other activities in this app will use the default Theme.Material dark color scheme (or, if configured, the application theme setting).
使用自定义主题Using Custom Themes
您可以通过创建一个自定义主题来对您的应用程序进行样式,并使用您的品牌颜色来增强您的品牌 ’ 。You can enhance your brand by creating a custom theme that styles your app with your brand’s colors. 若要创建自定义主题,请定义从内置材料主题风格派生的新样式,并覆盖要更改的颜色属性。To create a custom theme, you define a new style that derives from a built-in Material Theme flavor, overriding the color attributes that you want to change. 例如,您可以定义从派生的自定义主题, Theme.Material.Light.DarkActionBar 并将屏幕背景色更改为米色而不是白色。For example, you can define a custom theme that derives from Theme.Material.Light.DarkActionBar and changes the screen background color to beige instead of white.
材料主题公开以下用于自定义的布局属性:Material Theme exposes the following layout attributes for customization:
colorPrimary–应用栏的颜色。colorPrimary – The color of the app bar.
colorPrimaryDark–状态栏和上下文应用栏的颜色; 这通常是的深色版本 colorPrimary 。colorPrimaryDark – The color of the status bar and contextual app bars; this is normally a dark version of colorPrimary.
colorAccent–UI 控件(如复选框、单选按钮和编辑文本框)的颜色。colorAccent – The color of UI controls such as check boxes, radio buttons, and edit text boxes.
windowBackground–屏幕背景的颜色。windowBackground – The color of the screen background.
textColorPrimary–应用栏中 UI 文本的颜色。textColorPrimary – The color of UI text in the app bar.
statusBarColor–状态栏的颜色。statusBarColor – The color of the status bar.
navigationBarColor–导航栏的颜色。navigationBarColor – The color of the navigation bar.
以下关系图中标记了这些屏幕区域:These screen areas are labeled in the following diagram:
默认情况下, statusBarColor 设置为的值 colorPrimaryDark 。By default, statusBarColor is set to the value of colorPrimaryDark. 您可以将设置 statusBarColor 为纯色,也可以将其设置为, @android:color/transparent 使状态栏成为透明的。You can set statusBarColor to a solid color, or you can set it to @android:color/transparent to make the status bar transparent. 还可以通过将设置为来使导航栏成为透明的 navigationBarColor @android:color/transparent 。The navigation bar can also be made transparent by setting navigationBarColor to @android:color/transparent.
创建自定义应用主题Creating a Custom App Theme
可以通过在应用项目的 " 资源 " 文件夹中创建和修改文件来创建自定义应用主题。You can create a custom app theme by creating and modifying files in the Resources folder of your app project. 若要为应用程序定义自定义主题,请使用以下步骤:To style your app with a custom theme, use the following steps:
在资源/值中创建colors.xml文件 — 使用此文件来定义自定义主题颜色。Create a colors.xml file in Resources/values — you use this file to define your custom theme colors. 例如,您可以将以下代码粘贴到 colors.xml 中,以帮助您入门:For example, you can paste the following code into colors.xml to help you get started:
#3498DB
#77D065
#B455B6
#738182
修改此示例文件以定义将在自定义主题中使用的颜色资源的名称和颜色代码。Modify this example file to define the names and color codes for color resources that you will use in your custom theme.
创建 资源/值-v21 文件夹。Create a Resources/values-v21 folder. 在此文件夹中,创建一个 styles.xml 文件:In this folder, create a styles.xml file:
请注意, v21 是特定于 android 5.0 – 旧版 android 的,将不会读取此文件夹中的文件。Note that Resources/values-v21 is specific to Android 5.0 – older versions of Android will not read files in this folder.
将 resources 节点添加到 styles.xml ,并 style 使用自定义主题的名称定义节点。Add a resources node to styles.xml and define a style node with the name of your custom theme. 例如,下面是一个 styles.xml 文件,用于定义派生自内置主题样式) 的 MyCustomTheme (Theme.Material.Light :For example, here is a styles.xml file that defines MyCustomTheme (derived from the built-in Theme.Material.Light theme style):
此时,使用 MyCustomTheme 的应用程序将显示 Theme.Material.Light 不带自定义项的股票主题:At this point, an app that uses MyCustomTheme will display the stock Theme.Material.Light theme without customizations:
通过定义要更改的布局特性的颜色,将颜色自定义添加到 styles.xml 。Add color customizations to styles.xml by defining the colors of layout attributes that you want to change. 例如,若要将应用程序栏颜色更改为 my_blue 并将 UI 控件的颜色更改为 my_purple ,请向引用colors.xml中配置的颜色资源的styles.xml添加颜色重写:For example, to change the app bar color to my_blue and change the color of UI controls to my_purple, add color overrides to styles.xml that refer to color resources configured in colors.xml:
@color/my_blue
@color/my_purple
进行这些更改后,使用 MyCustomTheme 的应用程序将在中的和 UI 控件中显示应用程序栏颜色 my_blue my_purple ,但在 Theme.Material.Light 其他任何位置使用配色方案:With these changes in place, an app that uses MyCustomTheme will display an app bar color in my_blue and UI controls in my_purple, but use the Theme.Material.Light color scheme everywhere else:
在此示例中, MyCustomTheme 从 Theme.Material.Light 背景色、状态栏和文本颜色中借用颜色,但会将应用栏的颜色更改为, my_blue 并将该单选按钮的颜色设置为 my_purple 。In this example, MyCustomTheme borrows colors from Theme.Material.Light for the background color, status bar, and text colors, but it changes the color of the app bar to my_blue and sets the color of the radio button to my_purple.
创建自定义视图样式Creating a Custom View Style
Android 5.0 还允许您为单个视图建立样式。Android 5.0 also makes it possible for you to style an individual view. 创建 colors.xml 和 styles.xml (如上一部分) 所述)后,可以将视图样式添加到 styles.xml。After you create colors.xml and styles.xml (as described in the previous section), you can add a view style to styles.xml.
若要为单个视图的样式,请使用以下步骤:To style an individual view, use the following steps:
编辑 资源/值-v21/styles.xml 并添加 style 具有自定义视图样式的名称的节点。Edit Resources/values-v21/styles.xml and add a style node with the name of your custom view style. 为此节点中的视图设置自定义颜色属性 style 。Set the custom color attributes for your view within this style node. 例如,若要创建具有更多圆角并用作卡片背景色的自定义 CardView 样式 my_blue ,请将 style 节点添加到节点中的 styles.xml (resources) 并配置背景色和角半径:For example, to create a custom CardView style that has more rounded corners and uses my_blue as the card background color, add a style node to styles.xml (inside the resources node) and configure the background color and corner radius:
@color/my_blue
18dp
在布局中, style 为该视图设置属性,使之与你在上一步中选择的自定义样式名称匹配。In your layout, set the style attribute for that view to match the custom style name that you chose in the previous step. 例如:For example:
style="@style/CardView.MyBlue"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal">
下面的屏幕快照提供了左侧) 上显示的默认 (的示例,与已 CardView CardView 使用 CardView.MyBlue 右) 中显示的自定义主题 (进行了样式的相比:The following screenshot provides an example of the default CardView (shown on the left) as compared to a CardView that has been styled with the custom CardView.MyBlue theme (shown on the right):
在此示例中,自定义 CardView 使用背景色 my_blue 和18dp 角半径显示。In this example, the custom CardView is displayed with the background color my_blue and an 18dp corner radius.
兼容性Compatibility
若要为应用程序应用格式,使其在 Android 5.0 上使用材料主题,但会自动恢复到早期版本的 Android 版本的向下兼容样式,请使用以下步骤:To style your app so that it uses Material Theme on Android 5.0 but automatically reverts to a downward-compatible style on older Android versions, use the following steps:
在从材料主题样式派生的 资源/值-v21/styles.xml 中定义自定义主题。Define a custom theme in Resources/values-v21/styles.xml that derives from a Material Theme style. 例如:For example:
在从旧主题派生的 资源/值/styles.xml 中定义自定义主题,但使用与上面相同的主题名称。Define a custom theme in Resources/values/styles.xml that derives from an older theme, but uses the same theme name as above. 例如:For example:
在 AndroidManifest.xml中,用自定义主题名称配置应用。In AndroidManifest.xml, configure your app with the custom theme name.
例如:For example:
android:theme="@style/MyCustomTheme">
或者,您可以使用自定义主题来为特定活动指定样式:Alternately, you can style a specific activity using your custom theme:
[Activity(Label = "MyActivity", Theme = "@style/MyCustomTheme")]
如果主题使用 colors.xml 文件中定义的颜色,请确保将此文件放置在 " 资源/值 " (而不是 " 资源/值" v21) ,以便您的自定义主题的两个版本都可以访问您的颜色定义。If your theme uses colors defined in a colors.xml file, be sure to place this file in Resources/values (rather than Resources/values-v21) so that both versions of your custom theme can access your color definitions.
当你的应用在 Android 5.0 设备上运行时,它将使用 资源/值-v21/styles.xml中指定的主题定义。When your app runs on an Android 5.0 device, it will use the theme definition specified in Resources/values-v21/styles.xml. 在较旧的 Android 设备上运行此应用时,它将自动回退到 " 资源/值/styles.xml中指定的主题定义。When this app runs on older Android devices, it will automatically fall back to the theme definition specified in Resources/values/styles.xml.
有关与较旧的 Android 版本的主题兼容性的详细信息,请参阅 备用资源。For more information about theme compatibility with older Android versions, see Alternate Resources.
总结Summary
本文介绍 Android 5.0 (棒糖形) 中随附的新材料主题用户界面样式。This article introduced the new Material Theme user interface style included in Android 5.0 (Lollipop). 本文介绍了三种内置的材料主题风格,您可以使用它们来设计您的应用程序的样式,还介绍了如何创建用于标记您的应用程序的自定义主题,并提供了如何为单个视图提供主题的示例。It described the three built-in Material Theme flavors that you can use to style your app, it explained how to create a custom theme for branding your app, and it provided an example of how to theme an individual view. 最后,本文介绍了如何在应用中使用材料主题,同时保持与早期版本的 Android 的向下兼容性。Finally, this article explained how to use Material Theme in your app while maintaining downward compatibility with older versions of Android.
相关链接Related Links