从头开始做一个Material Design风格的App（1）_material design app

您可能听说过Android Lollipop版本中引入的Android Material Design。在Material Design中引入了很多新东西，比如Material Theme，新的小部件，自定义阴影，矢量绘图和自定义动画。如果您尚未开始使用Material Design，那么本文将为您提供一个良好的开端。

在本教程中，我们将学习Material Design开发的基本步骤，即编写自定义主题并使用RecyclerView实现导航抽屉。

源代码的Demo已经放在了Github上，请点击这里。

1.下载Android Studio

在开始之前，需要下载Android Studio并做一些必要的配置，因为从现在开始，在本教程中，我将会一直使用Android Studio。如果你是第一次接触Android Studio，可以通过其说明文档来大致了解一下Android Studio。

2.Material Design色彩定制

Material Design提供了一系列属性来自定义颜色主题，但是我们一般使用5个主要的属性来定义整体的主题风格。

colorPrimaryDark——这是App深色调的基本颜色，主要用于通知栏背景。

colorPrimary——这是App的主要颜色，用于工具栏背景。

textColorPrimary——这是文本的主要颜色，用于工具栏标题。

windowBackGroud——这是App的默认背景色。

navigationBarColor——这是底部导航栏的背景颜色。

3.创建Material Design主题

（1）在Android Studio中，通过菜单File–>New Project，填写必需的详细信息来创建一个新的工程，当提示选择一个默认的Activity时，选择Blank Activity，然后继续。

（2）打开res–>values–>strings.xml，然后添加以下字符串值。

<resources>
    <string name="app_name">Material Design</string>
    <string name="action_settings">Settings</string>
    <string name="action_search">Search</string>
    <string name="drawer_open">Open</string>
    <string name="drawer_close">Close</string>
 
    <string name="nav_item_home">Home</string>
    <string name="nav_item_friends">Friends</string>
    <string name="nav_item_notifications">Messages</string>
 
    <!-- navigation drawer item labels  -->
    <string-array name="nav_drawer_labels">
        <item>@string/nav_item_home</item>
        <item>@string/nav_item_friends</item>
        <item>@string/nav_item_notifications</item>
    </string-array>
 
    <string name="title_messages">Messages</string>
    <string name="title_friends">Friends</string>
    <string name="title_home">Home</string>
</resources>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

（3）打开res–>values–>colors.xml，然后添加下面的颜色值。如果你没有找到colors.xml文件，请创建一个名为colors.xml的资源文件。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#F50057</color>
    <color name="colorPrimaryDark">#C51162</color>
    <color name="textColorPrimary">#FFFFFF</color>
    <color name="windowBackground">#FFFFFF</color>
    <color name="navigationBarColor">#000000</color>
    <color name="colorAccent">#FF80AB</color>
</resources>
1
2
3
4
5
6
7
8
9

（4）打开res–>values–>dimens.xml，然后添加如下内容。

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="nav_drawer_width">260dp</dimen>
</resources>
1
2
3
4
5
6

（5）打开res–>values中的style.xml文件，然后添加如下样式。在style.xml中定义的样式是所有Android版本中通用的，这里我将我的主题命名为MyMaterialTheme。

<resources>
 
    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
 
    </style>
 
    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
     
</resources>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

（6）现在，在res文件夹下，新建一个名为values-v21的文件夹。在values-v21文件夹里面，创建另一个style.xml文件并填写如下内容，这个style则是仅供Android Lollipop（5.0）使用的。

<resources>
 
    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
    </style>
 
</resources>
1
2
3
4
5
6
7
8
9
10
11

（7）到这里我们已经准备好了基本的Material Design 样式。为了使用该主题，打开AndroidManifest.xml文件然后修改<application>标签中的android:theme属性：

android:theme="@style/MyMaterialTheme"
1

因此，在应用主题后，您的AndroidManifest.xml应如下所示。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.materialdesign" >
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyMaterialTheme" >
        <activity
            android:name=".activity.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

现在，如果您运行该应用程序，您可以看到通知栏颜色已更改为我们在样式中提到的颜色。

完整Demo作者已经托管在Github上，可点击这里。

由于原文代码有很多细节方面，例如版本问题等，不适合目前的AS，所以译文中贴出来的代码有部分是我根据源码修改的，适合自己版本运行的代码。碰到是代码问题的小伙伴可以在下面的源码链接和原文链接找到适合自己的。

源码在github，点击这里
原文地址：http://www.androidhive.info/2015/04/android-getting-started-with-material-design/