Material Design学习：ToolBar 开发使用简介

简介

Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。

功能

• 设置导航栏按钮；
• 设置App的logo；
• 支持设置标题和子标题；
• 支持添加一个或多个的自定义控件；
• 支持菜单Action Menu；

示意图

使用

1. 添加依赖

build.gradle

compile 'com.android.support:appcompat-v7:24.0.0'

2. 在布局中使用ToolBar

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.am.toolbartest.MainActivity">
 
    <android.support.v7.widget.Toolbar
        android:id="@+id/mToolBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"           //指定z轴高度为4dp
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"     //为ActionBar指定不同的主题样式
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"       //可以指定弹出的菜单的样式
        >
    </android.support.v7.widget.Toolbar>
</RelativeLayout>

3. 在代码中使用ToolBar

在使用 Toolbar 时候需要先隐藏掉系统原先的导航栏

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);  //隐藏掉系统原先的导航栏
        setContentView(R.layout.activity_main);
        mToolBar = (Toolbar) findViewById(R.id.mToolBar);   
        setSupportActionBar(mToolBar);   //把toolbar作为导航栏
    }
}

4. 添加导航按钮，logo，标题

mToolBar.setTitle("标题");             //在setSupportActionBar();之前才能生效
setSupportActionBar(mToolBar);  
getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
//mToolBar.setNavigationIcon(R.mipmap.ic_launcher);  //设置导航栏图标
mToolBar.setNavigationIcon(R.mipmap.ic_launcher);
mToolBar.setLogo(R.mipmap.ic_launcher);
mToolBar.setSubtitle("子标题");

5. 在布局中添加自定义view

<android.support.v7.widget.Toolbar
        android:id="@+id/mToolBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        >
        <TextView
            android:id="@+id/mTvView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="自定义view"
            android:textColor="#fff"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            />
 
</android.support.v7.widget.Toolbar>

6. 添加菜单

app>res>menu下创建菜单文件menu_main.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_1"
        android:title="其他"
        android:orderInCategory="80"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="never" />
    <item android:id="@+id/action_tip"
        android:title="提醒"
        android:orderInCategory="90"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="never" />
    <item android:id="@+id/action_menu"
        android:title="设置"
        android:orderInCategory="90"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="never" />
 
</menu>

showAsAction的值主要是针对这个菜单的显示起作用的，它有三个可选项：

• always：总是显示在界面上
• never：不显示在界面上，只让出现在右边的三个点中
• ifRoom：如果有位置才显示，不然就出现在右边的三个点中

在MainActivity中创建关联菜单

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

添加菜单的点击回调

private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem menuItem) {
            String msg = "";
            switch (menuItem.getItemId()) {
                case R.id.action_1:
                    msg += "点击其他1";
                    break;
                case R.id.action_tip:
                    msg += "点击提醒";
                    break;
                case R.id.action_menu:
                    msg += "点击设置";
                    break;
            }
            if(!msg.equals("")) {
                Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
            }
            return true;
        }
    };

设置菜单点击监听

mToolBar.setOnMenuItemClickListener(onMenuItemClick);

效果展示

效果

这里是项目地址

之后还有DrawerLayout + NavigationView的介绍，敬请期待！

参考文章
http://www.jianshu.com/p/79604c3ddcae
http://www.jianshu.com/p/9471b87f2c61#