美文网首页
Material Design

Material Design

作者: 谢尔顿 | 来源:发表于2017-01-23 11:19 被阅读31次

    1.Material Deisgn的Theme

    • @android:style/Theme.Material(dark version)
    • @android:style/Theme.Material.Light(light version)
    • @android:style/Theme.Material.Light.DarkActionBar

    与之对应的Compat Theme:

    • Theme.AppCompat
    • Theme.AppCompat.Light
    • Theme.AppCompat.light.DarkActionBar

    (1)个性化Color Palette

    我们可以根据我们的app风格,去制定Color Palette(调色板),重点有以下几个属性:

        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
        </style>
    
    • colorPrimary对应的ActionBar的颜色;
    • colorPrimaryDark对应的状态栏的颜色;
    • colorAccent对应的EditText编辑时、RadioButton选中、CheckBox等选中时的颜色;

    与之对应的图:

    20150427034747930.png

    注:对于5.0以下的设备,目前colorPrimaryDark无法个性化状态栏的颜色,底部的navagationBar可能也不一样,更别说设置颜色了。

    2.实例Demo

    values/styles.xml

        <style name="AppTheme" parent="AppBaseTheme">
    
    
        </style>
        <style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    
            <!-- customize the color palette -->
            <item name="colorPrimary">@color/material_blue_500</item>
            <item name="colorPrimaryDark">@color/material_blue_700</item>
            <item name="colorAccent">@color/material_green_A200</item>
    
        </style>
    

    values-v21/styles.xml

        <style name="AppTheme" parent="AppBaseTheme">
            <item name="android:statusBarColor">@color/material_blue_700</item>
        </style>
    

    vlaues/colors.xml

        <color name="material_blue_500">#009688</color>
        <color name="material_blue_700">#00796B</color>
        <color name="material_green_A200">#FD87A9</color>
    

    效果展示:

    QQ图片20170123110126.png

    注:colorAccent就是图中的粉色,EditText正在输入时,RadioButton选中时的颜色。

    参考文章:

    1. Android 5.x Theme 与 ToolBar 实战
      本文出自:张鸿洋的博客;
    2. android Toolbar控件;
    3. Android Material Design之Toolbar与Palette实践
      本文出自:Rocko's bog;
    4. Android开发:最详细的 Toolbar 开发实践总结;
    5. ToolBar的使用

    相关文章

      网友评论

          本文标题:Material Design

          本文链接:https://www.haomeiwen.com/subject/schabttx.html