Android ToolBar 简单使用

1. Android ToolBar 简单使用

1 Android ToolBar 简单使用

1.1 介绍

webp
按照效果图，从左到右分别是

导航栏图标
App Logo
标题
子标题
自定义控件 (Clock)
ActionMenu

接下来我们制作这个页面

1.2 activity 布局文件

在 layout/activity_toolbar.xml 中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

  <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/color_0176da">

    <!--自定义控件-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Clock" />
  </android.support.v7.widget.Toolbar>
</LinearLayout>

1.3 menu 菜单文件

在 menu/toolbar_menu.xml 中，这里记得新建 menu 资源文件夹

<?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/action_search"
      android:icon="@mipmap/ic_search"
      android:title="@string/menu_search"
      app:showAsAction="ifRoom" />

  <item
      android:id="@id/action_notification"
      android:icon="@mipmap/ic_notifications"
      android:title="@string/menu_notifications"
      app:showAsAction="ifRoom" />

  <item
      android:id="@+id/action_item1"
      android:title="@string/item_01"
      app:showAsAction="never" />

  <item
      android:id="@+id/action_item2"
      android:title="@string/item_02"
      app:showAsAction="never" />
</menu>

这里我们通过设置 showAsAction 来确定 menu item 的位置

ifRoom 如果工具栏由剩余空间，那么显示在工具栏中
never 显示在菜单弹出框中

1.4 设置 activity 的 ToolbarActivity

在 ToolbarActivity.java 中

/**
 * Toolbar的基本使用
 */
public class ToolBarActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbar);

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

        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标
        toolbar.setLogo(R.mipmap.ic_launcher);//设置app logo
        toolbar.setTitle("Title");//设置主标题
        toolbar.setSubtitle("Subtitle");//设置子标题

        toolbar.inflateMenu(R.menu.toolbar_menu);//设置右上角的填充菜单
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
                    int menuItemId = item.getItemId();
                    if (menuItemId == R.id.action_search) {
                        Toast.makeText(ToolBarActivity.this , R.string.menu_search , Toast.LENGTH_SHORT).show();

                    } else if (menuItemId == R.id.action_notification) {
                        Toast.makeText(ToolBarActivity.this , R.string.menu_notifications , Toast.LENGTH_SHORT).show();

                    } else if (menuItemId == R.id.action_item1) {
                        Toast.makeText(ToolBarActivity.this , R.string.item_01 , Toast.LENGTH_SHORT).show();

                    } else if (menuItemId == R.id.action_item2) {
                        Toast.makeText(ToolBarActivity.this , R.string.item_02 , Toast.LENGTH_SHORT).show();

                    }
                    return true;
                }
            });

    }

}

在这里，我们

设置 ToolBar 的属性
- setNavigationicon
- setLogo
- setTitle
- setSubtitle
渲染菜单选项
- inflateMenu
设置点击事件
- setOnMenuitemClickListener

1.5 补充

1.5.1 在 xml 布局中设置 toolbar 的属性

这里需要自定义一个命名空间 toolbar ，而不是使用 android

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:toolbar="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

  <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/color_0176da"
      toolbar:navigationIcon="@mipmap/ic_drawer_home"
      toolbar:logo="@mipmap/ic_launcher"
      toolbar:subtitle="456"
      toolbar:title="123">

    <!--自定义控件-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Clock" />
  </android.support.v7.widget.Toolbar>
</LinearLayout>