ToolBar 学习笔记

Toolbar是Android 5.0推出的一个Material Design风格的导航控件

在使用时需要引入appcompat-v 7兼容包，使用 android.support.v7.widget.ToolBar 进行开发

1、首先新建布局文件 activity_toolbar.xml ， 添加Toolbar

<?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/mytoolbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@android:color/darker_gray">    </android.support.v7.widget.Toolbar></LinearLayout>

2、新建 ToolBarActvity 文件,继承自 AppCompatActvity 

注意：使用Toolbar时需要去掉系统原有的标题栏，

supportRequestWindowFeature(Window.FEATURE_NO_TITLE);

添加 Toolbar

public class ToorBarActivity extends AppCompatActivity{    private Toolbar toolbar;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);//去除系统标题栏        setContentView(R.layout.activity_toolbar);        initView();    }    private void initView() {        toolbar= (Toolbar) findViewById(R.id.mytoolbar);    }}

以上便能实现将Toolbar添加进来。

下面对ToolBar内容进行丰富，

主要包括NavigationIcon、LogoIcon、Title 主标题、subtitle 子标题、右侧菜单menu、自定义view 等

3、添加 NavigationIcon、LogoIcon、Title 主标题、subtitle 子标题

    private void initView() {        toolbar= (Toolbar) findViewById(R.id.mytoolbar);        toolbar.setNavigationIcon(R.mipmap.list);//设置导航栏图标        toolbar.setLogo(R.mipmap.ic_launcher);//设置Logo        toolbar.setTitle("主标题");//设置主标题        toolbar.setTitleTextColor(Color.BLUE);//设置主标题颜色        toolbar.setSubtitle("subtitle");//设置子标题        toolbar.setSubtitleTextColor(Color.GREEN);//设置子标题颜色    }

效果图如下：

Logo图标和导航栏图标有什么区别呢？

a、只有导航栏图标效果：

b、只有Logo图标效果：

可以看到使用导航栏图标效果要好一点

4、添加自定义的view

直接在Toolbar中添加即可

    <android.support.v7.widget.Toolbar        android:id="@+id/mytoolbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@android:color/darker_gray">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="自定义view"            android:layout_gravity="center"            />    </android.support.v7.widget.Toolbar>

标题居中：

可以看到直接setTitle或subtitle ，他们的位置是不居中的。

那么可以通过不设置setitle / subtitle，而直接将自定义添加的textview 进行居中设置来完成标题居中效果

5、添加右侧菜单

这时需要自定义menu 菜单项，新建 base_toolbar_menu.xml文件，

添加 item项。注意：item 需要定义 title 属性；在使用 app:showAction="ifRoom" 时需要 添加

xmlns:app="http://schemas.android.com/apk/res-auto"

<?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/item_search"        android:icon="@mipmap/search"        android:title="search"        app:showAsAction="ifRoom" /></menu>

然后在 activity中添加

toolbar.inflateMenu(R.menu.base_toolbar_menu);

效果图如下：

若：app:showAsAction="withText"

效果图：

则不是显示图标，而是在右侧显示三个点，点击，在弹出菜单中显示 文字

showAsAction：

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

withText：在弹出菜单中显示文字

若item 不设置 showAsAction 属性，则默认为withText形式

当添加了多个item

如果空间不足够的时候，其余不能显示的item 会以 文字的形式在 弹出菜单项中显示

<?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/item_search"        android:icon="@mipmap/search"        android:title="search"        app:showAsAction="ifRoom" />    <item        android:id="@+id/item_send"        android:icon="@mipmap/send_emai"        android:title="send"        app:showAsAction="ifRoom" />    <item        android:id="@+id/item_alarm"        android:icon="@mipmap/alarm"        android:title="alarm"        app:showAsAction="ifRoom" />    <item        android:id="@+id/item_plane"        android:icon="@mipmap/airplanet"        android:title="plane"        app:showAsAction="ifRoom" />    <item        android:id="@+id/item1"        android:title="item1"/>    <item        android:id="@+id/item2"        android:title="item2"/></menu>

显示效果如下：

6、Toolbar 自带title 和 自定义view 同时出现，且自带title值过长时 

可以看到自带的标题空间不足，其余文字用 三点 代替显示

7、ToolBar事件响应

右侧menu中 item响应事件：

        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {            @Override            public boolean onMenuItemClick(MenuItem item) {                switch (item.getItemId()) {                    case R.id.item_search:                        Toast.makeText(ToolBarActivity.this,"item_search",Toast.LENGTH_SHORT).show();                        break;                    case R.id.item_send:                        Toast.makeText(ToolBarActivity.this,"item_send",Toast.LENGTH_SHORT).show();                        break;                    case R.id.item_alarm:                        Toast.makeText(ToolBarActivity.this,"item_alarm",Toast.LENGTH_SHORT).show();                        break;                    case R.id.item_plane:                        Toast.makeText(ToolBarActivity.this,"item_plane",Toast.LENGTH_SHORT).show();                        break;                    case R.id.item1:                        Toast.makeText(ToolBarActivity.this,"item1",Toast.LENGTH_SHORT).show();                        break;                    case R.id.item2:                        Toast.makeText(ToolBarActivity.this,"item2",Toast.LENGTH_SHORT).show();                        break;                }                return false;            }

导航图标点击事件：

toolbar.setNavigationOnClickListener(new View.OnClickListener(){            @Override            public void onClick(View v) {                Toast.makeText(ToolBarActivity.this,"navigation onclick",Toast.LENGTH_SHORT).show();            }        });

注意：在用海马玩调试的时候刚进入时正常显示，退出后再次进入时会出现toolbar 被标题栏覆盖一部分的问题，这个可能是海马玩的android版本较低所引起的，用androidstudio的自带高版本的模拟器调试时则没有问题

官方文档

参考资料：Android开发：最详细的 Toolbar 开发实践总结