Toolbar的简单使用

189 阅读2分钟

1. 设置actionbar不显示

在style.xml设置其AppTheme主题为NoActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

1.1 在layout中添加toolbar

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

1.2 在activity中设置

      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
      setSupportActionBar(toolbar);

2. 设置toolbar的属性

  • 标题和子标题
  • 导航按钮
  • logo
  • 菜单按钮

标题,子标题,logo,导航按钮

 <android.support.v7.widget.Toolbar
       android:id="@+id/toolbar"
       android:background="?attr/colorPrimary"
       android:layout_height="?attr/actionBarSize"
       toolbar:title="标题"
       toolbar:subtitle="子标题"
       toolbar:logo="@mipmap/ic_launcher"
       android:layout_width="match_parent" >

需要注意的是命名空间是改为自己命名的,不能用android命名,否则不会覆盖标题,或者也可以在activity中动态设置

        toolbar.setTitle("标题");
        toolbar.setSubtitle("子标题");
        toolbar.setLogo(R.mipmap.ic_launcher);
        toolbar.setNavigationIcon(R.drawable.back);

菜单按钮

在menu下建一个menu.xml文件,showAsAction为ifRoom的话如果有空间就会在toolbar上显示,没有空间就收到菜单里面去,never则是全部在菜单里面

<?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"
         xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
       <item android:id="@+id/add"
             android:title="添加"
             android:icon="@mipmap/ic_launcher"
             app:showAsAction="never"/>
       <item android:id="@+id/search"
             android:title="找人"
             android:icon="@mipmap/ic_launcher"
             app:showAsAction="never"/>
       <item android:id="@+id/settings"
             android:title="设置"
             android:orderInCategory="100"
             android:icon="@mipmap/ic_launcher"
             app:showAsAction="never"/>
   </menu>

重写onCreateOptionsMenu方法

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }

也可以在activity文件下设置可点击,在oncreate方法内设置

       mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
           @Override
          public boolean onMenuItemClick(MenuItem item) {
              switch (item.getItemId()) {
                      case R.id.add:
                        Toast.makeText(MainActivity.this, "添加", Toast.LENGTH_SHORT).show();
                         break;
                      case R.id.search:
                         Toast.makeText(MainActivity.this, "找人", Toast.LENGTH_SHORT).show();
                      break;
                    case R.id.settings:
                         Toast.makeText(MainActivity.this, "设置", Toast.LENGTH_SHORT).show();
                       break;
                }
                return true;
             }
        });

2.1 toolbar做为容器

可以在toolbar里面添加控件


   <android.support.v7.widget.Toolbar
       android:id="@+id/toolbar"
       android:background="?attr/colorPrimary"
       android:layout_height="?attr/actionBarSize"
       toolbar:title="标题"
       toolbar:subtitle="子标题"
       toolbar:logo="@mipmap/ic_launcher"
       android:layout_width="match_parent" >

      <TextView
          android:textColor="#fff"
          android:text="标题"
          android:gravity="center"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"/>
   </android.support.v7.widget.Toolbar>

2.2 修改toolbar右侧菜单按钮

修改成图标

  toolbar.setOverflowIcon(getResources().getDrawable(R.mipmap.ic_launcher));

修改图标颜色

 <!-- Base application theme. -->
    <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:textColorSecondary">#ffffff</item>

    </style>

修改弹出菜单的背景,字体颜色

    <style name="MenuStyle" parent="Base.Widget.AppCompat.PopupMenu.Overflow">
        <!-- 默认为true,即盖住Toolbar -->
        <item name="overlapAnchor">false</item>
        <!-- 弹出层垂直方向上的偏移,值为负则会盖住Toolbar -->
        <item name="android:dropDownVerticalOffset">5dp</item>
        <!-- 弹出层水平方向上的偏移,负值会导致右边出现空隙 -->
        <item name="android:dropDownHorizontalOffset">-10dp</item>
        <!-- 弹出层背景颜色 -->
        <item name="android:popupBackground">@android:color/white</item>
        <!-- 设置弹出菜单文字颜色 -->
        <item name="android:textColor">@android:color/holo_blue_dark</item>
    </style>