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

技术分享

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

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

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

>Material Design规范

>使用Material Design创建App

本文Demo的视频在YouTube上,请点击这里

 

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——这是底部导航栏的背景颜色。

技术分享

你可以浏览一下Material Design色彩方案,然后选择一个适合你的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>

 

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


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

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


(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文件然后修改<application>标签中的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,你可以看到通知栏的颜色变成了我们在样式里所声明的颜色。

技术分享


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

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。