手把手教你打造一个Material Design风格的App(一)

冷不防 2022-08-02 13:37 238阅读 0赞

![SouthEast][]

你应该听说过Android的Material Design，它是在Android 5.0(Lollipop)版本引入的。在Material Design中还引入了很多新东西，比如Material Theme，新的小部件，自定义的阴影，矢量图片及自定义动画等。如果你之前没有用过Material Design，那么本文将是一个很好的入门教程。

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

通过下面的两个链接可以获取更多关于Material Design的知识：

>[Material Design规范][Material_Design]

>[使用Material Design创建App][Material_Design_App]

本文Demo的视频在YouTube上，[请点击这里][Link 1]。

1.下载Android Studio

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

2.Material Design色彩定制

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

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

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

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

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

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

![SouthEast 1][]

你可以浏览一下Material Design的[色彩方案][Link 3]，然后选择一个适合你的App的。

3.创建Material Design主题

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

（2）打开[res][]\-->values-->strings.[xml][]，然后添加下面的string值。

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>  
   
      
    <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>

（3）打开res-->values-->colors.xml，然后添加下面的颜色值。如果你没有找到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>

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

dimens.xml  
<resources>  
      
    <dimen name="activity\_horizontal\_margin">16dp</dimen>  
    <dimen name="activity\_vertical\_margin">16dp</dimen>  
    <dimen name="nav\_drawer\_width">260dp</dimen>  
</resources>

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

styles.xml  
<resources>  
   
    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">  
   
    </style>  
   
    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">  
        <item name="android: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>

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

styles.xml  
<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>

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

android:theme="@style/MyMaterialTheme"

在应用了这个主题之后，你的AndroidManifest.xml文件应该是下面的样子：

AndroidManifest.xml  
<?xml version="1.0" encoding="utf-8"?>  
<manifest xmlns:android="http://schemas.android.com/apk/res/android"  
    package="androidhive.info.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>

现在，如果你运行App，你可以看到通知栏的颜色变成了我们在样式里所声明的颜色。

![SouthEast 2][]

由于文章太长，请继续关注：手把手教你打造一个Material Design风格的App(二)

原文地址：http://www.androidhive.info/2015/04/android-getting-started-with-material-design/

[SouthEast]: /images/20220731/8206dc9079bc47e497656af59476428f.png
[RecyclerView]: https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html
[Material_Design]: http://www.google.com/design/spec/material-design/introduction.html#
[Material_Design_App]: http://developer.android.com/training/material/index.html
[Link 1]: https://youtu.be/jDXX_wDvarM
[Link 2]: http://developer.android.com/tools/studio/index.html
[SouthEast 1]: /images/20220731/b9421b01210a4c8083eb35d553b18ec3.png
[Link 3]: http://www.google.co.in/design/spec/style/color.html#color-color-palette
[res]: http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=994eed77c490839d&k=res&k0=res&kdi0=0&luki=5&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=9d8390c477ed4e99&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D831228%2Ehtml&urlid=0
[xml]: http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=994eed77c490839d&k=xml&k0=xml&kdi0=0&luki=8&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=9d8390c477ed4e99&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D831228%2Ehtml&urlid=0
[app]: http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=994eed77c490839d&k=app&k0=app&kdi0=0&luki=6&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=9d8390c477ed4e99&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D831228%2Ehtml&urlid=0
[SouthEast 2]: /images/20220731/bccad9b1c35149f9ad793c8ba9d1e19e.png