material design学习笔记

简要介绍

android lollipop在14年的i/o大会推出，material design随之而来。

按照官方设计规范，material design的目标被定义为

“Create a visual language that synthesizes classic principles of good >design with the innovation and possibility of technology and science.”

和

“Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.”

其核心思想为把物理世界的体验带进屏幕。

自定义material design颜色

定义在资源文件中values文件夹下的colors文件中的颜色

colorPrimaryDark - 通知栏颜色

colorPrimary - 标题栏颜色

textColorPrimary - 文字颜色

windowBackground - 窗口背景

navigationBarColorv - 底部按键栏颜色

主题风格

AndroidManifest中使用的activty主题

material design主题提供：
- 让您设置主题配色工具的系统小组件
- 适用于系统小组件的触摸反馈动画
- 控制行为转换动画

material design主题：

@android:style/Theme.Material（深色版本）
@android:style/Theme.Material.Light（亮色版本）
@android:style/Theme.Material.Light.DarkActionBar

自定义material design主题：

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

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>

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

最后在AndroidManifest.xml中引用

android:theme="@style/MyMaterialTheme"