Android 系列 6.2 用Material Design 更好

6.2用Material Design 更好

问题

您希望您的应用看起来像一个现代的Android应用程序。

解

Material Design是Android应用程序开发的新视觉范例，或者是“跨平台和设备的视觉，运动和交互设计的全面指南”。材质设计看起来不同于以前的Android版本。你需要使用这套视觉方法让你的应用看起来不错。

讨论

在创建或更新材料设计应用程序时，您需要执行的主要步骤包括：

•阅读官方的“材料设计规范”。

•将材质主题应用于您的应用程序。

•按照材料设计指南创建或更新布局。

•将海拔添加到View对象，使其投射阴影。

•考虑使用新功能（例如卡片小部件）和新版本的小部件（例如RecyclerVIew）代替旧的ListView。

•在应用程序中添加或自定义动画。

•做所有这一切，同时保持向后兼容性！

Material Design是Google在Android 5中引入的一种新设计方法。它也用于Google Web应用程序，由称为Material-Lite的Web工具包支持。

名称来自于与物理材料的类比，例如，“物理材料”或“织物”。材质设计是一个基本上二维的框架，除了对象（如Android中的View对象）具有高度，这导致他们投射阴影（阴影效果已经与我们几十年了，但这使它们形式化）并且可以在进入，激活或退出时进行动画。

使用Material主题的基本步骤是将应用程序的主题基于Material，而不是基于Holo的旧主题。您通常会定制您的主题中使用的颜色。例如，在AndroidManifest文件中，您可能有：

<application
android:name=".AndroidApplication"
android:icon="@drawable/icon"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
android:allowBackup="true">
...
</application>

然后你将有一个styles.xml文件定义AppTheme，基于android：Theme.Material，根据例6-1。

实施例6-1。 res / values / styles.xml

<resources>
<style name="AppTheme" parent="android:Theme.Material">
<item name="android:colorPrimary">@color/primary</item>
<item name="android:colorPrimaryDark">@color/primary_dark</item>
<item name="android:colorAccent">@color/accent</item>
</style>
</resources>
image::images/material-colors.png[]

这些颜色的实际值必须在XML文件中定义。我们会从https://www.google.com/design/spec/style/color.html（我们使用橙色调色板的300,500和700种颜色）中列出的调色板中选择颜色：

<resources>
<color name="primary">#FF9800</color>
<color name="primary_dark">#F57C00</color>
<color name="accent">#FFCC80</color>
</resources>

创建布局是一个问题，应用设计处方，你去，注意尺寸，距离等。

添加高度部分是使用新的android：elevation属性的问题。

<Button

...

android:elevation="5sp"/>

高度用于表示材料具有厚度的事实，例如，如果将书放在桌子上，书将投射阴影。材料设计建议操作栏（参见配方6.5）始终具有4dp的高程。纯粹为了演示的目的（我们不建议在一个真正的应用程序这样做），例6-2显示生成各种高程的代码;此代码允许您通过拖动滑块来查看不同高度对阴影的影响（见图6-1）。
实施例6-2。高程/位移示例

public void onCreate(Bundle b) {
Button raisable = (Button) findViewById(R.id.elevator);
SeekBar control = (SeekBar) findViewById(R.id.elevatorControl);
control.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
raisable.setElevation(progress);
raisable.setText(getString(R.string.raise_me) + " " + progress);
}
// Two empty methods from SeekBar.OnSeekBarChangeListener interface omitted
});
}

有关使用新功能（例如卡片小部件（食谱6.13））和新版本的小部件（例如RecyclerView代替旧版ListView__），请参阅其他食谱。

甚至有新的图标为材料设计。 引用他们的下载页面（http://google.github.io/material-design-icons/）：“材料设计系统图标简单，现代，友好，有时古怪。 每个图标是使用我们的设计指南创建的，以简单和最小的形式描述在UI中常用的通用概念。 确保大小和小尺寸的可读性和清晰度，这些图标已经针对所有常见平台上的美丽显示和显示分辨率进行了优化。“如同强调Material不仅适用于Android，图标还有多种形式， 网络视图（图像或Web字体），Android，甚至iOS。 有关材料图标包的信息，请参阅https://design.google.com/icons/。