ToolBar简介

ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar,由于其高度的可定制性、灵活性、具有Material Design风格等优点,越来越多的应用也用上了ToolBar,比如常用的知乎软件其顶部导航栏正是使用ToolBar。官方考虑到仍有一部分用户的手机版本号低于5.0,所以,ToolBar也放进了support v7包内,使得低版本的系统也能使用上ToolBar。本文将使用support v7支持包的ToolBar来进行讲解,包括其基本用法、样式定制等知识点。

ToolBar的基本使用

引入support v7支持包

在你项目的build.gradle内输入如下代码,即能引入支持包,该支持包内有能向下兼容的ToolBar:

`dependencies {    
      compile fileTree(dir: <span class="hljs-string">'libs'</span>, include: [<span class="hljs-string">'*.jar'</span>])    
      compile <span class="hljs-string">'com.android.support:appcompat-v7:23.1.1'</span>
}`<a target="_blank" name="t3"></a>

更改主题

为了能够正常使用ToolBar,我们需要隐藏原来的ActionBar,这个可以在主题中修改,在values/styles.xml中做出如下修改:

" width="20" data-original-code="![]( data-wp-preserve=)1
2
1
2
" data-snippet-id="ext.2bc0da59d9ff7d2cc4639972565d3679" data-snippet-saved="false" data-codota-status="done" style="white-space: nowrap; word-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin: 0px 0px 1.1em; font-family: "Source Code Pro", monospace; display: block; padding: 5px 5px 5px 60px; font-size: 14px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.05); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"&gt;`&lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">style&lt;/span> &lt;span class="hljs-attribute">name&lt;/span>=&lt;span class="hljs-value">"AppTheme"&lt;/span> &lt;span class="hljs-attribute">parent&lt;/span>=&lt;span class="hljs-value">"Theme.AppCompat.Light.NoActionBar"&lt;/span>&gt;&lt;/span>    
&lt;span class="hljs-tag">&lt;/&lt;span class="hljs-title">style&lt;/span>&gt;&lt;/span>`

继承了Theme.Appcompat.Light.NoActionBar主题,这里提一下,这个Theme.AppCompat是支持包内的主题,对应着5.0版本的Theme.Material主题。然后在manifest文件中引用这个主题。

在布局文件中创建这个控件,activity_main.xml文件中,代码如下所示:

 <android.support.v7.widget.Toolbar android:id=&quot;@+id/toolbar&quot; android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot;> <TextView android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;wrap_content&quot; android:text=&quot;标题&quot; android:textSize=&quot;20sp&quot;/> </android.support.v7.widget.Toolbar> </FrameLayout>1 2 3 4 5 6 7 8 9 10 11 12 13 14 1 2 3 4 5 6 7 8 9 10 11 12 13 14 " data-snippet-id="ext.1a86e4dfe907e8befece5a749bd9ae61" data-snippet-saved="false" data-codota-status="done">`&lt;FrameLayout xmlns:android=&lt;span class="hljs-string">"http://schemas.android.com/apk/res/android"&lt;/span>
    android:layout_width=&lt;span class="hljs-string">"match_parent"&lt;/span>
    android:layout_height=&lt;span class="hljs-string">"match_parent"&lt;/span>&gt;
    &lt;android.support.v7.widget.Toolbar
        android:id=&lt;span class="hljs-string">"@+id/toolbar"&lt;/span>
        android:layout_width=&lt;span class="hljs-string">"wrap_content"&lt;/span>
        android:layout_height=&lt;span class="hljs-string">"wrap_content"&lt;/span>&gt;
        &lt;TextView
            android:layout_width=&lt;span class="hljs-string">"match_parent"&lt;/span>
            android:layout_height=&lt;span class="hljs-string">"wrap_content"&lt;/span>
            android:text=&lt;span class="hljs-string">"标题"&lt;/span>
            android:textSize=&lt;span class="hljs-string">"20sp"&lt;/span>/&gt;
    &lt;/android.support.v7.widget.Toolbar&gt;
&lt;/FrameLayout&gt;`

在上面,创建了android.support.v7.widget.Toolbar,同时我们在内部放了一个TextView,这是与ActionBar最大的不同,因为ToolBar实际上是一个ViewGroup,支持在其内部放入子View。ok,我们运行程序,得到如下结果:
结果1
可以看出ToolBar正常显示,当然了,这只是最简单的用法,接下来我们逐步添加内容、样式,使它看起开更加美,功能更加完善。

ToolBar的完善

一、首先我们考虑,改变ToolBar的颜色

要想改变toolbar的颜色很简单,直接在布局文件中添加一个backgroud属性指定颜色就可以了,但是为了全局考虑,我们可以这样:在values/styles.xml文件中做出如下修改:

 

” data-snippet-id=”ext.fc1e69a167a083bb969f36abdf127335″ data-snippet-saved=”false” data-codota-status=”done” style=”white-space: nowrap; word-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin: 0px 0px 1.1em; font-family: “Source Code Pro”, monospace; display: block; padding: 5px 5px 5px 60px; font-size: 14px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.05); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;”>&lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">resources&lt;/span>&gt;&lt;/span>&lt;br /> &lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">style&lt;/span> &lt;span class="hljs-attribute">name&lt;/span>=&lt;span class="hljs-value">"AppTheme"&lt;/span> &lt;span class="hljs-attribute">parent&lt;/span>=&lt;span class="hljs-value">"Theme.AppCompat.Light.NoActionBar"&lt;/span>&gt;&lt;/span>&lt;span class="css">&lt;br /> &lt;!&lt;span class="hljs-tag">--&lt;/span> &lt;span class="hljs-tag">Customize&lt;/span> &lt;span class="hljs-tag">your&lt;/span> &lt;span class="hljs-tag">theme&lt;/span> &lt;span class="hljs-tag">here&lt;/span>. &lt;span class="hljs-tag">--&lt;/span>&gt;&lt;br /> &lt;&lt;span class="hljs-tag">item&lt;/span> &lt;span class="hljs-tag">name&lt;/span>="&lt;span class="hljs-tag">colorPrimary&lt;/span>"&gt;&lt;span class="hljs-id">#2e8abb&lt;/span>&lt;/&lt;span class="hljs-tag">item&lt;/span>&gt; &lt;!&lt;span class="hljs-tag">--&lt;/span>浅蓝色&lt;span class="hljs-tag">--&lt;/span>&gt;&lt;br /> &lt;&lt;span class="hljs-tag">item&lt;/span> &lt;span class="hljs-tag">name&lt;/span>="&lt;span class="hljs-tag">colorPrimaryDark&lt;/span>"&gt;&lt;span class="hljs-id">#3A5FCD&lt;/span>&lt;/&lt;span class="hljs-tag">item&lt;/span>&gt; &lt;!&lt;span class="hljs-tag">--&lt;/span>深蓝色&lt;span class="hljs-tag">--&lt;/span>&gt;&lt;br /> &lt;/span>&lt;span class="hljs-tag">&lt;/&lt;span class="hljs-title">style&lt;/span>&gt;&lt;/span>&lt;br /> &lt;span class="hljs-tag">&lt;/&lt;span class="hljs-title">resources&lt;/span>&gt;&lt;/span>

然后在布局文件中,添加如下属性:

`android:background="?attr/colorPrimary"`

这样,就能方便对每一个toolbar引用同样的颜色了,我们先看看现在的效果是怎样的:
结果2
可以看到,颜色已经改变,同时我们注意到,顶部状态栏的颜色也变成了深蓝色,这是因为添加了”colorPrimaryDark”的属性,使得顶部状态栏随之改变,利用这一特性,我们可以轻松实现“状态栏沉浸”的效果了。当然,这只适用于Android 5.0以上,如果在低版本则这个属性无效。这里再附上一张图(图片来自http://blog.csdn.net/bbld_/article/details/41439715):
样式说明
根据图中的说明,我们可以轻松地在styles.xml文件中定制我们的样式,如果想要改变toolbar的title、subtitle以及menu中文字的颜色,可以利用“textColorPrimary”属性等。

二、添加title、subtitle、logo、导航栏图标

在MainActivity文件先获取控件的实例,接着通过一系列的set方法即可设置,代码如下:

`&lt;span class="hljs-keyword">public&lt;/span> &lt;span class="hljs-class">&lt;span class="hljs-keyword">class&lt;/span> &lt;span class="hljs-title">MainActivity&lt;/span> &lt;span class="hljs-keyword">extends&lt;/span> &lt;span class="hljs-title">AppCompatActivity&lt;/span> {&lt;/span>

    &lt;span class="hljs-keyword">private&lt;/span> Toolbar toolbar;
    &lt;span class="hljs-annotation">@Override&lt;/span>
    &lt;span class="hljs-keyword">protected&lt;/span> &lt;span class="hljs-keyword">void&lt;/span> &lt;span class="hljs-title">onCreate&lt;/span>(Bundle savedInstanceState) {
        &lt;span class="hljs-keyword">super&lt;/span>.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle(&lt;span class="hljs-string">"Title"&lt;/span>);
        toolbar.setSubtitle(&lt;span class="hljs-string">"SubTitle"&lt;/span>);
        toolbar.setLogo(R.mipmap.ic_launcher);

        &lt;span class="hljs-comment">//设置导航图标要在setSupportActionBar方法之后&lt;/span>
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);
    }

}`

结果如下:
结果3
如果你想修改标题和子标题的字体大小、颜色等,可以调用 setTitleTextColor 、 setTitleTextAppearance 、 setSubtitleTextColor、 setSubtitleTextAppearance 这些API。当然,这些设置都是支持在xml布局中直接添加的,但是用的不是android:命名空间,而是自定义命名空间,如下所示:

 <android.support.v7.widget.Toolbar ... toolbar:logo=&quot;@mipmap/ic_launcher&quot; toolbar:title=&quot;Title&quot; toolbar:subtitle=&quot;Sub Title&quot; toolbar:titleTextColor=&quot;#ffffff&quot;> </android.support.v7.widget.Toolbar> </FrameLayout>1 2 3 4 5 6 7 8 9 10 11 1 2 3 4 5 6 7 8 9 10 11 " data-snippet-id="ext.6bb55765ee941b8f3369ecd83e1e7df6" data-snippet-saved="false" data-codota-status="done">`&lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">FrameLayout&lt;/span> &lt;span class="hljs-attribute">xmlns:android&lt;/span>=&lt;span class="hljs-value">"http://schemas.android.com/apk/res/android"&lt;/span>
    &lt;span class="hljs-attribute">xmlns:toolbar&lt;/span>=&lt;span class="hljs-value">"http://schemas.android.com/apk/res-auto"&lt;/span>
    &lt;span class="hljs-attribute">...&lt;/span>&gt;&lt;/span>
    &lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">android.support.v7.widget.Toolbar
&lt;/span>        &lt;span class="hljs-attribute">...&lt;/span>
        &lt;span class="hljs-attribute">toolbar:logo&lt;/span>=&lt;span class="hljs-value">"@mipmap/ic_launcher"&lt;/span>
        &lt;span class="hljs-attribute">toolbar:title&lt;/span>=&lt;span class="hljs-value">"Title"&lt;/span>
        &lt;span class="hljs-attribute">toolbar:subtitle&lt;/span>=&lt;span class="hljs-value">"Sub Title"&lt;/span>
        &lt;span class="hljs-attribute">toolbar:titleTextColor&lt;/span>=&lt;span class="hljs-value">"#ffffff"&lt;/span>&gt;&lt;/span>
    &lt;span class="hljs-tag">&lt;/&lt;span class="hljs-title">android.support.v7.widget.Toolbar&lt;/span>&gt;&lt;/span>
&lt;span class="hljs-tag">&lt;/&lt;span class="hljs-title">FrameLayout&lt;/span>&gt;&lt;/span>`

三、添加菜单选项图标及点击事件

1.添加菜单选项图标

一般导航条,在其右侧都会有菜单选项,当然ToolBar也是支持自定义菜单的,首先我们在菜单文件中,修改如下:res/menu/menu_main.xml:

 <item android:id=&quot;@+id/action_search&quot; android:title=&quot;Search&quot; android:icon=&quot;@mipmap/ic_search&quot; app:showAsAction=&quot;ifRoom&quot;/> <item android:id=&quot;@+id/action_notifications&quot; android:title=&quot;notifications&quot; android:icon=&quot;@mipmap/ic_notifications&quot; app:showAsAction=&quot;ifRoom&quot;/> <item android:id=&quot;@+id/action_settings&quot; android:title=&quot;@string/action_settings&quot; android:orderInCategory=&quot;100&quot; android:icon=&quot;@mipmap/ic_launcher&quot; app:showAsAction=&quot;never&quot;/> </menu>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 " data-snippet-id="ext.f0444147847f1fba32c0d4481fdce644" data-snippet-saved="false" data-codota-status="done">`&lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">menu&lt;/span> &lt;span class="hljs-attribute">xmlns:android&lt;/span>=&lt;span class="hljs-value">"http://schemas.android.com/apk/res/android"&lt;/span>
    &lt;span class="hljs-attribute">xmlns:app&lt;/span>=&lt;span class="hljs-value">"http://schemas.android.com/apk/res-auto"&lt;/span>
    &lt;span class="hljs-attribute">xmlns:tools&lt;/span>=&lt;span class="hljs-value">"http://schemas.android.com/tools"&lt;/span> &lt;span class="hljs-attribute">tools:context&lt;/span>=&lt;span class="hljs-value">".MainActivity"&lt;/span>&gt;&lt;/span>
    &lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">item&lt;/span> &lt;span class="hljs-attribute">android:id&lt;/span>=&lt;span class="hljs-value">"@+id/action_search"&lt;/span>
        &lt;span class="hljs-attribute">android:title&lt;/span>=&lt;span class="hljs-value">"Search"&lt;/span>
        &lt;span class="hljs-attribute">android:icon&lt;/span>=&lt;span class="hljs-value">"@mipmap/ic_search"&lt;/span>
        &lt;span class="hljs-attribute">app:showAsAction&lt;/span>=&lt;span class="hljs-value">"ifRoom"&lt;/span>/&gt;&lt;/span>
    &lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">item&lt;/span> &lt;span class="hljs-attribute">android:id&lt;/span>=&lt;span class="hljs-value">"@+id/action_notifications"&lt;/span>
        &lt;span class="hljs-attribute">android:title&lt;/span>=&lt;span class="hljs-value">"notifications"&lt;/span>
        &lt;span class="hljs-attribute">android:icon&lt;/span>=&lt;span class="hljs-value">"@mipmap/ic_notifications"&lt;/span>
        &lt;span class="hljs-attribute">app:showAsAction&lt;/span>=&lt;span class="hljs-value">"ifRoom"&lt;/span>/&gt;&lt;/span>
    &lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">item&lt;/span> &lt;span class="hljs-attribute">android:id&lt;/span>=&lt;span class="hljs-value">"@+id/action_settings"&lt;/span>
        &lt;span class="hljs-attribute">android:title&lt;/span>=&lt;span class="hljs-value">"@string/action_settings"&lt;/span>
        &lt;span class="hljs-attribute">android:orderInCategory&lt;/span>=&lt;span class="hljs-value">"100"&lt;/span>
        &lt;span class="hljs-attribute">android:icon&lt;/span>=&lt;span class="hljs-value">"@mipmap/ic_launcher"&lt;/span>
        &lt;span class="hljs-attribute">app:showAsAction&lt;/span>=&lt;span class="hljs-value">"never"&lt;/span>/&gt;&lt;/span>
&lt;span class="hljs-tag">&lt;/&lt;span class="hljs-title">menu&lt;/span>&gt;&lt;/span>`

这里用了这样一个熟悉:app:showAsAction=”ifRoom”/”never”,app是自定义的命名空间,因为我们的activity继承的是AppCompatActivity,是support v7包的,并不是原生sdk内部的,因此不能使用android:showAsAction,否则会报错。然后ifRoom表示有空间则显示,never表示从不显示,而是会通过overflowwindow显示。
接着我们在Activity中,要重写onCreateOptionsMenu()方法,把这个菜单加载进去:

`&lt;span class="hljs-annotation">@Overridepublic&lt;/span> &lt;span class="hljs-keyword">boolean&lt;/span> onCreateOptionsMenu(Menu menu) { 
       getMenuInflater().inflate(R.menu.menu_main, menu);   
       &lt;span class="hljs-keyword">return&lt;/span> &lt;span class="hljs-keyword">true&lt;/span>;
}`

2.添加点击事件

菜单有了,我们要为菜单添加点击事件,这样菜单才会有实际用途,添加点击事件也很方便,可以这样操作:

`&lt;span class="hljs-comment">//设置导航图标、添加菜单点击事件要在setSupportActionBar方法之后&lt;/span>
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);

        toolbar.setOnMenuItemClickListener(&lt;span class="hljs-keyword">new&lt;/span> Toolbar.OnMenuItemClickListener() {
            &lt;span class="hljs-annotation">@Override&lt;/span>
            &lt;span class="hljs-keyword">public&lt;/span> &lt;span class="hljs-keyword">boolean&lt;/span> &lt;span class="hljs-title">onMenuItemClick&lt;/span>(MenuItem item) {
                &lt;span class="hljs-keyword">switch&lt;/span> (item.getItemId()) {
                    &lt;span class="hljs-keyword">case&lt;/span> R.id.action_search:
                        Toast.makeText(MainActivity.&lt;span class="hljs-keyword">this&lt;/span>, &lt;span class="hljs-string">"Search !"&lt;/span>, Toast.LENGTH_SHORT).show();
                        &lt;span class="hljs-keyword">break&lt;/span>;
                    &lt;span class="hljs-keyword">case&lt;/span> R.id.action_notifications:
                        Toast.makeText(MainActivity.&lt;span class="hljs-keyword">this&lt;/span>, &lt;span class="hljs-string">"Notificationa !"&lt;/span>, Toast.LENGTH_SHORT).show();
                        &lt;span class="hljs-keyword">break&lt;/span>;
                    &lt;span class="hljs-keyword">case&lt;/span> R.id.action_settings:
                        Toast.makeText(MainActivity.&lt;span class="hljs-keyword">this&lt;/span>, &lt;span class="hljs-string">"Settings !"&lt;/span>, Toast.LENGTH_SHORT).show();
                        &lt;span class="hljs-keyword">break&lt;/span>;
                }
                &lt;span class="hljs-keyword">return&lt;/span> &lt;span class="hljs-keyword">true&lt;/span>;
            }
        });`

结果如下:
结果5
可以看到,菜单选项图标正常显示,以及点击事件都正常触发,但是还有一点瑕疵的地方,那就是右上角的三个圆点,是黑色的,与图标格格不入,有没有什么办法改变它呢?答案是有的,可以通过添加样式改变,如下所示:

 

” data-snippet-id=”ext.c030061741a5d10caa1f136c5155b512″ data-snippet-saved=”false” data-codota-status=”done” style=”white-space: nowrap; word-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin: 0px 0px 1.1em; font-family: “Source Code Pro”, monospace; display: block; padding: 5px 5px 5px 60px; font-size: 14px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.05); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;”>&lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">resources&lt;/span>&gt;&lt;/span>&lt;br /> &lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">style&lt;/span> &lt;span class="hljs-attribute">name&lt;/span>=&lt;span class="hljs-value">"AppTheme"&lt;/span> &lt;span class="hljs-attribute">parent&lt;/span>=&lt;span class="hljs-value">"Theme.AppCompat.Light.NoActionBar"&lt;/span>&gt;&lt;/span>&lt;span class="css">&lt;br /> ...&lt;br /> &lt;&lt;span class="hljs-tag">item&lt;/span> &lt;span class="hljs-tag">name&lt;/span>="&lt;span class="hljs-tag">android&lt;/span>&lt;span class="hljs-pseudo">:textColorSecondary"&lt;/span>&gt;&lt;span class="hljs-id">#ffffff&lt;/span>&lt;/&lt;span class="hljs-tag">item&lt;/span>&gt;&lt;br /> &lt;/span>&lt;span class="hljs-tag">&lt;/&lt;span class="hljs-title">style&lt;/span>&gt;&lt;/span>&lt;br /> &lt;span class="hljs-tag">&lt;/&lt;span class="hljs-title">resources&lt;/span>&gt;&lt;/span>

“android:textColorSecondary”属性对应的就是右上角三个圆点的颜色了。改变之后将会变成你要的颜色。

四、其他样式修改

修改Toolbar popup menu样式

我们先点击右上角的三个点,会弹出一个popup menu,如下所示:
结果6
可以看到右上角的popup menu是白底黑字,那么有没有什么办法改变它的背景颜色,使菜单显示为黑底白字呢呢?答案是有的,我们可以这样设置:
首先在styles.xml文件中,新建一个主题:

 

” data-snippet-id=”ext.088e2c015987971a783a656bc24179ff” data-snippet-saved=”false” data-codota-status=”done” style=”white-space: nowrap; word-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin: 0px 0px 1.1em; font-family: “Source Code Pro”, monospace; display: block; padding: 5px 5px 5px 60px; font-size: 14px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.05); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;”>&lt;span class="hljs-comment">&lt;!-- toolbar弹出菜单样式 --&gt;&lt;/span>&lt;br /> &lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">style&lt;/span> &lt;span class="hljs-attribute">name&lt;/span>=&lt;span class="hljs-value">"ToolbarPopupTheme"&lt;/span> &lt;span class="hljs-attribute">parent&lt;/span>=&lt;span class="hljs-value">"@style/ThemeOverlay.AppCompat.Dark"&lt;/span>&gt;&lt;/span>&lt;span class="css">&lt;br /> &lt;&lt;span class="hljs-tag">item&lt;/span> &lt;span class="hljs-tag">name&lt;/span>="&lt;span class="hljs-tag">android&lt;/span>&lt;span class="hljs-pseudo">:colorBackground"&lt;/span>&gt;&lt;span class="hljs-id">#000000&lt;/span>&lt;/&lt;span class="hljs-tag">item&lt;/span>&gt;&lt;br /> &lt;/span>&lt;span class="hljs-tag">&lt;/&lt;span class="hljs-title">style&lt;/span>&gt;&lt;/span>

可以看到这个主题的parent是直接继承自ThemeOverlay.AppCompat.Dark,是支持包的一个主题,并且我们在内部声明了“android:colorBackground”这个属性,我们只要更改这个属性就能变更菜单的背景颜色了。接下来我们在布局文件中引入这个主题,这也很简单,为toolbar添加额外的属性如下:

`toolbar:popupTheme=&lt;span class="hljs-string">"@style/ToolbarPopupTheme"&lt;/span>`

这样,改几行代码即可修改popup menu的背景颜色了,如下面所示:
结果7

修改Toolbar popup menu 弹出位置

我们可以看到,popup menu的位置是过于偏上的,我们还可以修改它的位置,使它处于Toolbar之下,这样看起来可能更美观:
修改styles.xml文件如下:

" width="20" data-original-code="![]( data-wp-preserve=)

 

” data-snippet-id=”ext.472b4d5c30d245269fb75e12299470d7″ data-snippet-saved=”false” data-codota-status=”done” style=”white-space: nowrap; word-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin: 0px 0px 1.1em; font-family: “Source Code Pro”, monospace; display: block; padding: 5px 5px 5px 60px; font-size: 14px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); background-color: rgba(128, 128, 128, 0.05); border: 0px solid rgb(136, 136, 136); border-radius: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;”>&lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">style&lt;/span> &lt;span class="hljs-attribute">name&lt;/span>=&lt;span class="hljs-value">"ToolbarPopupTheme"&lt;/span> &lt;span class="hljs-attribute">parent&lt;/span>=&lt;span class="hljs-value">"@style/ThemeOverlay.AppCompat.Dark"&lt;/span>&gt;&lt;/span>&lt;span class="css">&lt;br /> &lt;&lt;span class="hljs-tag">item&lt;/span> &lt;span class="hljs-tag">name&lt;/span>="&lt;span class="hljs-tag">android&lt;/span>&lt;span class="hljs-pseudo">:colorBackground"&lt;/span>&gt;&lt;span class="hljs-id">#000000&lt;/span>&lt;/&lt;span class="hljs-tag">item&lt;/span>&gt;&lt;br /> &lt;&lt;span class="hljs-tag">item&lt;/span> &lt;span class="hljs-tag">name&lt;/span>="&lt;span class="hljs-tag">actionOverflowMenuStyle&lt;/span>"&gt;&lt;span class="hljs-at_rule">@&lt;span class="hljs-keyword">style/OverflowMenuStyle&lt;/item&gt;&lt;/span> &lt;!--新增一个item,用于控制menu--&gt;&lt;br /> &lt;/span>&lt;/span>&lt;span class="hljs-tag">&lt;/&lt;span class="hljs-title">style&lt;/span>&gt;&lt;/span>&lt;br /> &lt;span class="hljs-tag">&lt;&lt;span class="hljs-title">style&lt;/span> &lt;span class="hljs-attribute">name&lt;/span>=&lt;span class="hljs-value">"OverflowMenuStyle"&lt;/span> &lt;span class="hljs-attribute">parent&lt;/span>=&lt;span class="hljs-value">"Widget.AppCompat.Light.PopupMenu.Overflow"&lt;/span>&gt;&lt;/span>&lt;span class="css">&lt;br /> &lt;&lt;span class="hljs-tag">item&lt;/span> &lt;span class="hljs-tag">name&lt;/span>="&lt;span class="hljs-tag">overlapAnchor&lt;/span>"&gt;&lt;span class="hljs-tag">false&lt;/span>&lt;/&lt;span class="hljs-tag">item&lt;/span>&gt; &lt;!&lt;span class="hljs-tag">--&lt;/span>把该属性改为&lt;span class="hljs-tag">false&lt;/span>即可使&lt;span class="hljs-tag">menu&lt;/span>位置位于&lt;span class="hljs-tag">toolbar&lt;/span>之下&lt;span class="hljs-tag">--&lt;/span>&gt;&lt;br /> &lt;/span>&lt;span class="hljs-tag">&lt;/&lt;span class="hljs-title">style&lt;/span>&gt;&lt;/span>

效果如下图:
结果8

 

转载:http://blog.csdn.net/a553181867/article/details/51336899

参考:http://www.jianshu.com/p/79604c3ddcae

 

ConstraintLayout 终极秘籍(下)

http://blog.chengyunfeng.com/?p=1031

新布局节点ConstraintLayout基本使用

http://blog.csdn.net/android_zhengyongbo/article/details/65630103