Toolbar的简单使用

Toolbar（android.support.v7.widget.Toolbar）是Android5.0之后出现的用来取代ActionBar的一个控件。

Toolbar的使用方法

●最简单的使用

xml布局

<android.support.v7.widget.Toolbar android:layout_width="match_parent" android:id="@+id/toolbar" app:popupTheme="@style/toolbarMenuStyle" android:layout_height="?attr/actionBarSize"> </android.support.v7.widget.Toolbar> 

除了在布局文件中加入Toolbar外还需要修改values/styles.xml文件

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="windowNoTitle">true</item> //设置没有表态 <item name="windowActionBar">false</item> //没有ActionBar <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> 

Activity代码

public class MainActivity extends AppCompatActivity { private TextView textView; private Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = findViewById(R.id.toolbar); // 设置标题 toolbar.setTitle("我是标题"); // textView.setText("我是标题"); setSupportActionBar(toolbar); // 设置左边图片，这里设置成返回的图标 toolbar.setNavigationIcon(R.drawable.ic_back); // 设置左边图片的点击事件 toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { finish(); } }); } } 

我们发现这时的Toolbar没有底部分割线很是难看，所以接下来可以为它加上一条底部分界线。

在drawable文件夹中新建toolbarline.xml文件

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:angle="90" android:startColor="@android:color/transparent" android:endColor="#FFC2C0C0"> </gradient> </shape> 

然后在布局文件中添加一个充当底部分割线的View

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".MainActivity"> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:id="@+id/toolbar" app:popupTheme="@style/toolbarMenuStyle" android:layout_height="?attr/actionBarSize"> </android.support.v7.widget.Toolbar> <View android:layout_width="match_parent" android:background="@drawable/shadown" android:layout_below="@id/toolbar" android:layout_height="4dp"/> </RelativeLayout> 

●自定义Toolbar布局

由于Toolbar的标题只能靠左，而在开发过程中我们可能会需要让标题居中，这就需要我们对Toolbar进行一些自定义设置，其实很简单只需要在Toolbar内加入一个TextView即可。

 <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:id="@+id/toolbar" app:popupTheme="@style/toolbarMenuStyle" android:layout_height="?attr/actionBarSize"> <TextView android:layout_width="wrap_content" android:textColor="#494848" android:layout_gravity="center" //想要居中需要设置成center android:id="@+id/toobar_title" android:textSize="18sp" android:layout_height="wrap_content" /> </android.support.v7.widget.Toolbar> 

然后需要将Toolbar本身的标题设置为空

 textView = findViewById(R.id.toobar_title); // 设置标题 toolbar.setTitle(""); textView.setText("我是标题"); 

●为Toolbar设置菜单，这里分为以下两个步骤

1）设置菜单布局，在res文件夹下新建menu文件夹，并在menu文件夹中新建toolbarmenu.xml文件。

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/setting"// android:title="设置" app:showAsAction="never" //这个是控制菜单项的显示的 //always：设置这个值会让所有菜单项都会显示在toolbar上 //ifRoom：设置这个值之后，如果toolbar上还有空间的话就会显示优先级高的菜单项在toolbar上，剩下的才显示在弹出的列表中 //never：永远不会显示在Toolbar上，只会在溢出列表中出现 //collapseActionView：这个属性通俗的说就是声明某一个菜单项单独显示在toolbar上，而不是显示在打开的菜单中，一般配合ifRoom使用 android:orderInCategory="20" //菜单项的优先级，数值越小越靠前 android:icon="@drawable/ic_sett" //这个属性是指定每个菜单项左边的图标的 /> <item android:id="@+id/about" android:title="关于" app:showAsAction="never" android:orderInCategory="10" android:icon="@drawable/ic_about"/> </menu> 

2）在Activity中为Toolbar添加菜单并且设置点击事件

public class MainActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener{ private TextView textView; private Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = findViewById(R.id.toolbar); textView = findViewById(R.id.toobar_title); // 设置标题 toolbar.setTitle(""); textView.setText("我是标题"); toolbar.setNavigationIcon(R.drawable.ic_back); setSupportActionBar(toolbar); // 设置左边图片，这里设置成返回的图标 // 设置左边图片的点击事件 toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { finish(); } }); //设置菜单点击事件 toolbar.setOnMenuItemClickListener(this); } @Override public boolean onCreateOptionsMenu(Menu menu) { // 绑定toobar跟menu getMenuInflater().inflate(R.menu.toolbar_menu, menu); return true; } @Override public boolean onMenuItemClick(MenuItem menuItem) { String msg = ""; switch (menuItem.getItemId()) { case R.id.setting: msg += "设置"; break; case R.id.about: msg += "关于"; break; } if(!msg.equals("")) { Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show(); } return true; } } 

这样基本的菜单效果就实现了，不过我们发现菜单左边的图标没有显示出来，而且菜单覆盖了Toolbar很不好看，那么接下来我们就对菜单进行一些配置。

1）让菜单显示左边图标，需要我们在Activity中重写一个方法。

@SuppressLint("RestrictedApi") @Override protected boolean onPrepareOptionsPanel(View view, Menu menu) { if (menu != null) { if (menu.getClass() == MenuBuilder.class) { try { Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE); m.setAccessible(true); m.invoke(menu, true); } catch (Exception e) { e.printStackTrace(); } } } return super.onPrepareOptionsPanel(view, menu); } 

2）设置菜单不覆盖Toolbar，需要我们对values/styles.xml进行设置

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <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> <!--指定toolbar弹出菜单样式--> <item name="actionOverflowMenuStyle">@style/toolbarMenuStyle</item> </style> <!--自定义toolbar菜单样式--> <style name="toolbarMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow"> <!-- 是否覆盖锚点，默认为true，即盖住Toolbar --> <item name="overlapAnchor">false</item> <!-- 弹出层背景颜色 --> <item name="android:popupBackground">@color/toolbar_meun_bg</item> <!-- 弹出层垂直方向上的偏移，负值会覆盖toolbar --> <item name="android:dropDownVerticalOffset">8dp</item> <!-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 --> <item name="android:dropDownHorizontalOffset">-2dp</item> <!--文字颜色--> <item name="android:textColor">@color/toolbar_meun</item> </style> </resources> 

最后再补充下如何覆盖系统菜单按钮图标，需要修改values/styles.xml文件

 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <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> <!--指定toolbar弹出菜单样式--> <item name="actionOverflowMenuStyle">@style/toolbarMenuStyle</item> <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item> //覆盖系统默认菜单按钮图标 </style> <style name="OverflowButtonStyle" parent="@android:style/Widget.ActionButton.Overflow"> <item name="android:src">@drawable/ic_fensi</item> </style> 

个人博客：https://myml666.github.io