美文网首页android开发杂识MaterialDesign4Appandroid开发
关于Toolbar你需要知道的各种sao姿势。(主题篇)

关于Toolbar你需要知道的各种sao姿势。(主题篇)

作者: Terry | 来源:发表于2017-06-16 17:45 被阅读588次



    它是一个主题预览工具,当你选中了某一颜色之后,可以生成对应颜色的app界面。


    你可以直接在这里设置你想要的主题。

    设置Toolbar背景颜色

    一般我们的项目中大多数用的都是统一的头,所以我们可以在res/syles.xml中的主题通过添加colorPrimary属性来配置Toolbar的背景颜色:

     <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>
        <item name="android:colorForeground">@android:color/holo_blue_dark</item>
    </style>
    

    设置Toolbar的Title

    �Toolbar类提供了很多对标题以及布局参数设置的方法:

    设置Toolbar子标题


    无论是标题还是子标题,不仅可以在上下文中动态设置,而且可以在xml里面静态配置。

    设置Toolbar的高度

    toolbar的高度在Material Design中的标准中是56dp。


    在android资源属性中提供了?attr/actionBarSize来设置,这里的actionBarSize是一个通用属性,在不同版本的android系统toolbar的高度可能有所不同。

    结合上面的设置,我们完全可以抽取出一个Style文件来存放这些属性:

    <style name="ToolbarStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:background">@color/actionbar_bg</item>
        <item name="subtitleTextAppearance">@style/mySubTitleTextStyle</item>
        <item name="android:fitsSystemWindows">true</item>
        <item name="android:minHeight">?attr/actionBarSize</item>
    </style>
    

    但是对于标题和子标题的颜色需要通过Toolbar的theme属性来设置:

    <style name="Toolbar" parent="ThemeOverlay.AppCompat.Light">
        //设置标题颜色
        <item name="android:textColorPrimary">@color/title_text_color</item>
        //设置二级标题颜色
        <item name="android:textColorSecondary">@color/sub_title_text_color</item>
        //设置二级标题style
        <item name="subtitleTextStyle">@style/mySubTitleTextStyle</item>
        //设置弹出菜单字体颜色
        <item name="actionMenuTextColor">@color/gray_707070</item>
    </style>
    

    二级标题style:

    <style name="mySubTitleTextStyle" parent="Base.TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textSize">@dimen/text_size_12</item>
        <item name="android:textColor">@color/gray_707070</item>
    </style>
    

    设置Toolbar溢出菜单样式


    一个溢出菜单由文字、背景组成,我们同样可以在xml中通过设置Toolbar的popupTheme属性来控制:

    <style name="Toolbar_Popup" parent="ThemeOverlay.AppCompat.Light">
        <!-- 是否覆盖锚点,默认为true,即盖住Toolbar -->
        <item name="overlapAnchor">true</item>
    
        <!-- 下拉菜单宽度 -->
        <item name="android:dropDownWidth">wrap_content</item>
    
        <!-- 弹出层背景颜色 -->
        <item name="android:popupBackground">@drawable/menu_dropdown_panel</item>
    
        <!-- 弹出层垂直方向上的偏移,即在竖直方向上距离Toolbar的距离,值为负则会盖住Toolbar -->
        <item name="android:dropDownVerticalOffset">5dp</item>
    
        <!-- 弹出层水平方向上的偏移,即距离屏幕左边的距离,负值会导致右边出现空隙 -->
        <item name="android:dropDownHorizontalOffset">0dp</item>
    
        <!-- 设置弹出菜单文字颜色 -->
        <item name="android:textColor">@color/gray_030303</item>
    </style>
    

    总结

    Toolbar类继承自android.view.ViewGroup,所以在除了以上的一些操作,想做一些个性化的定制可以完全从自定义视图的角度来对Toolbar进行操作。另外Material Design对Toolbar的规范有一点是elevation,由于Material Design是一种基于物理世界中的设计理论,物体可以相互堆叠、重合,但不能通过彼此,物体会有阴影。
    一般对于appbar的elevation是4dp,

    android:elevation="@dimen/appbar_elevation"
    

    好了关于toolbar的主题部分就介绍到这里,本人水平有限,可能有些表达不太准确,所以大家如果有什么问题可以指出,非常感谢!!!

    相关文章

      网友评论

      本文标题:关于Toolbar你需要知道的各种sao姿势。(主题篇)

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