toolbar的学习

最新推荐文章于 2018-11-04 20:37:03 发布

jscoolstar

最新推荐文章于 2018-11-04 20:37:03 发布

阅读量398

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Material Design Study 文章标签： toolbar title居中自定义M

本文链接：https://blog.youkuaiyun.com/jscoolstar/article/details/54376010

Material Design Study 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了在API 25环境下如何使用Toolbar，包括设置最小高度以避免标题截断，调整导航按钮和标题的间距，自定义布局以及右侧面板菜单的显示方式。通过实例代码展示了如何实现自定义菜单项、更改菜单显示属性以及调整PopupMenu的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当前使用的是api25，不知道和之前的有没有区别，下面开始一边学习一边记录。一般的介绍就不写了，很多文章都有写。

先上一张主题说明图，网上都能搜到，贴过来自己mark下：

可以在apptheme中定义：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 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:textColorPrimary">#ffffff</item>-->
    <!--<item name="android:navigationBarColor" tools:ignore="NewApi">@color/colorPrimaryDark</item>-->
</style>

其中android:navigationBarColor 是有api限制的，需要添加newapi。在低版本手机上无效。当然低版本的手机应该也没有如图那样的底部导航。

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/colorPrimary"
   >

</android.support.v7.widget.Toolbar>

关于height尽量这样写，防止title字体过大被截掉，字体过小时依然会有个minheight。（后期补充标记，如果和Coll....Layout折叠效果连用的时候，如果设置成wrapcontent，给Colllayout的title显示不出来，设置成固定高度才可以，而且网上看到的demo也都是用的固定高度）

然后是设置toolbar上的按钮，title，等等：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"<
    android:minHeight="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:navigationIcon="@mipmap/ic_launcher" //左上角的button
    app:logo="@mipmap/ic_launcher"  //logo
    app:title="@string/app_name"  
    app:subtitle="@string/app_name"
    app:titleTextColor="#ffffff"
    app:subtitleTextColor="#ff0000"></..>

各种属性不详细说了，说些有用的。这都是自己在xml里各种设置和运行看结果总结的：

1、设置nabtn和logo的距离：contentInsetStart=“xdp”，这里可能有人会觉得不起作用，它就是代表content距开始的位置，如果这会有nabtn，你设置太小值是没有作用的，它代表从logo开始的布局距离左边缘的距离，距离设置的小于nabtn的宽度，系统就会忽略掉了。如果把nabtn去掉就能看出效果了，同理，如果你把logo也隐藏掉，就是title距离左边的距离了。然后你会发现nabtn和logo之间总有个距离，不能挨在一起，还有个属性叫做contentInsetStartWithNavigation，刚才说把contentInsetStart设置太小，比如0没有效果，大家看一下把contentInsetStartWithNavigation设置成0是什么效果？是不是两个靠近了？

2、自定义布局，toolbar集成的viewgroup，当然可以有子view，我们设置个子view，宽高都是自适应，发现自定义view会在title右边，需要代码中禁止掉title的显示。但把属性设置成mparent，发现title就不见了，logo还在。

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:navigationIcon="@mipmap/sound"
app:logo="@mipmap/ic_launcher"
app:contentInsetStartWithNavigation="0dp"
app:title="@string/app_name"
app:titleMargin="20dp"
app:subtitle="@string/app_name"
app:titleTextColor="#ffffff"
app:subtitleTextColor="#ff0000"
app:theme="@style/ToolbarTheme"
app:popupTheme="@style/OverflowMenuStyle"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="jslfjsldfjs"/>
</RelativeLayout>

</android.support.v7.widget.Toolbar>

RelativeLayout改成matchparent后为：

3、titleMargin是设置title的margin的，大家可以自行尝试。

接下来是关于右边menu的展示，先说理解后上代码和图，右边的menu是可以自定义的，需要res下建立menu.xml，里面有item，每个item都些属性，只说重要的。orderInCategory代表menu的顺序，如果都不填写，就按你默认添加时的顺序。app:showAsAction，有4个属性：

1.alaways:这个值会使菜单项一直显示在ActionBar上。

2.ifRoom:如果有足够的空间,这个值会使菜单显示在ActionBar上。

3.never:这个值菜单永远不会出现在ActionBar是。

4.withText:这个值使菜单和它的图标，菜单文本一起显示。

第4个我没弄明白，有看到这的留言告诉我一下，谢谢。其他都比较顾名思义了，然后，重点：如果你设置了多个menu，都设置成alaways，那么就会挤压title，如果都设置成ifRoom，当展示空间不够的时候会在最右边显示一个“三点”的系统默认菜单图标，当点击的时候就会用pop的方式展示剩余没有显示的菜单。

具体的大家自己尝试吧，我上下我的最终menu代码及效果吧，我用的是自己配置的menu组，可以利用这个特性来替换掉系统的三点图标，不过比直接改系统图标要麻烦：），后补一下，如果是系统三点图标隐藏的菜单，显示的时候不显示图标，需要用反射来显示，代码网上可以搜到，如果是自己定义的menu组，是直接可以显示图标的。