Material Design学习笔记（一）

前言

Marterial Design是Google推出的全新UI设计规范，拥有很棒的用户体验效果。

关于Material介绍大家可以查看 Material中文版 。

今天我们根据Google 官方文档 学习如何使用Material Design主题。

开发工具：android studio ， SDK版本 Android 5.0（API level 21）及以上版本。

应用 Material 主题

首先，要在应用之中使用Material 主题，我们只需要修改res/values/styles.xml文件，

使其继承android:Theme.Material ，如下：

<!-- res/values/styles.xml -->
<resources>
  <!-- your theme inherits from the material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- theme customizations -->
  </style>
</resources>

或者在AndroidManifest.xml 中直接设置主题：

android:theme="@android:style/Theme.Material.Light" 

自定义 Material 主题

Material主题可以定义成如下形式：

• @android:style/Theme.Material （暗色）
• @android:style/Theme.Material.Light（亮色）
• @android:style/Theme.Material.Light.DarkActionBa

          

对于其他主题风格可以参考API文档（android.R.style）

注意：Material主题只能5.0(api21)及以上才能使用support-v7提供了兼容支持：

自定义调色板

我们可以根据自己的风格修改调色板，调整action bar和状态栏的颜色等，从而自定义 Material 主题颜色。

也可以参考 Material Design规范 使用颜色搭配。如下：       

              

只需修改res/values/color.xml 文件，如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--<color name="primary">#009688</color>
    <color name="primaryDark">#00796b</color>-->

    <!--设置状态栏的颜色-->
    <color name="colorPrimaryDark">#1e88e5</color>
    <!--设置Toolbar的颜色-->
    <color name="colorPrimary">#2196f3</color>
    <!-- 设置Toolbar 字体颜色 -->
    <color name="textColorPrimary">#FFFFFF</color>
    <!-- 设置背景颜色-->
    <color name="windowBackground">#FFFFFF</color>
    <!-- 设置底部导航栏颜色 -->
    <color name="navigationBarColor">#000000</color>
    <color name="colorAccent">#a7ffeb</color>

</resources>

然后在res/values/styles.xml 文件下修改如下，即可引用自己自定义的Material 颜色主题，如下：

<resources>
     Base application theme.
    <style name="AppTheme" parent="Apptheme.Base">
        <!-- Customize your theme here. -->
    </style>

    <style name="Apptheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
       
        <!--设置状态栏的颜色-->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!-- 设置Toolbar的颜色-->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!-- 设置Toolbar 字体的颜色-->
        <item name="android:textColorPrimary">@color/textColorPrimary</item>
        <!-- 设置背景颜色-->
        <!--<item name="android:windowBackground">@color/windowBackground</item>-->

        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

通过以上步奏，你就成功的使用自己定义的 Material design 主题风格~