ToolBar的使用

来源：互联网发布：mac卸载cuda 编辑：程序博客网时间：2024/06/04 19:27

参考：

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html

http://blog.csdn.net/guolin_blog/article/details/18234477

可结合：Menu的使用一起食用

一、ToolBar的简介

Goole用来替代原来的ActionBar的控件。为了向下兼容，Google没有将Toolbar作为默认ActionBar类使用，而需要自己放入布局中。

完整Toolbar图：

二、设置ToolBar为Activity的默认ActionBar

①、在Layout中添加ToolBar

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

跟平常添加View在layout中是一样的，唯一不一样的地方是layout_height="?attr/actionBarSize"

表示：高度遵循Android默认提供的ActionBar的高度。（这是style的一种使用方式）
②、将Activity的ActionBar隐藏。

在values/styles.xml中

<resources>    <!--parent设置为NoActionBar-->    <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>    </style></resources>

③、将Activity的ActionBar设置为ToolBar

原因：Activity的默认的ActionBar为自带的ActionBar，所以代码中使用的Actionbar的引用还是指向原始的ActionBar，现在需要切换成我们定义的Toolbar

    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mToolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(mToolbar);    }}

然后运行，我们发现，ToolBar上自带了title（为App的名字），如果想要修改的话可以调用

<span style="font-family: Arial, Helvetica, sans-serif; font-weight: normal;">mToolBar.setTitle("your name"); </span>

或者可以在AndroidManifest.xml中修改

<span style="font-weight: normal;"><activity android:name=".MainActivity"      <!--设置Activity的ActionBar的图片-->      android:icon="@mipmap/ic_launcher"      <!--设置Activity的标题-->      android:label="测试"></span><pre name="code" class="html"><span style="font-weight: normal;"></activity></span>

三、设置Toolbar的背景颜色

首先了解Android的颜色构成： Toolbar theme and background

1、colorPrimaryDark（状态栏底色）：在风格 (styles) 或是主题 (themes) 里进行设定。App bar 底色2、这个设定分为二，若你的 android app 仍是使用 actionbar ，则直接在风格 (styles) 或是主题 (themes) 里进行设定 colorPrimary 参数即可；可若是采用 toolbar 的话，则要在界面 (layout) 里面设定 toolbar 控件的 background 属性。3、navigationBarColor（导航栏底色）：

仅能在 API v21 也就是 Android 5 以后的版本中使用，因此要将之设定在 res/values-v21/styles.xml 里面。

所以，我们需要设置ToolBar的background，为与theme相同，我选择这么设置

android:background:?attr/colorPrimary

四、在Toolbar中添加控件

能够添加的控件：

1、setNavigationIcon()即设定 up button 的图标。

android提供默认的NavigationIcon()，使用getSupportActionBar().setDisplayHomeAsUpEnabled(true);设置默认的NavigationIcon，默认为返回箭头。

setNavigationOnClickListener()：设定up button的监听。默认的NavigationIcon的id为R.id.home。

注：setNavigationIcon需要放在 setSupportActionBar之后才会生效。2、setLogo()APP 的图标。3、setTitle()主标题。4、setSubtitle()副标题。5、setOnMenuItemClickListener设定菜单各按鈕的动作。

代码:

   //Up_Button        mToolbar.setNavigationIcon(R.mipmap.ic_launcher);        //Logo        mToolbar.setLogo(R.mipmap.ic_launcher);        //主标题        mToolbar.setTitle("It is main title");        //副标题        mToolbar.setSubtitle("It is sub title");

设置Menu的视图与点击事件

Menu的视图：

<menu xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto">    <item        android:id="@+id/menu_add"        android:icon="@android:drawable/ic_menu_add"        android:title="添加"        android:orderInCategory="80"        app:showAsAction="ifRoom"/>    <!--orderInCategory表示图片展现的次序-->    <item        android:id="@+id/menu_delete"        android:icon="@android:drawable/ic_menu_delete"        android:title="删除"        android:orderInCategory="90"        app:showAsAction="ifRoom"/>    <item        android:id="@+id/menu_search"        android:icon="@android:drawable/ic_menu_search"        android:title="搜索"        android:orderInCategory="100"        app:showAsAction="ifRoom"/></menu>

添加菜单按钮（跟设置ActionBar的Menu是一样的）

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

设置菜单的点击事件(同样跟默认的ActionBar方法一样)

    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()){            case R.id.menu_add:                Toast.makeText(this,"add",Toast.LENGTH_SHORT).show();                break;            case R.id.menu_delete:                Toast.makeText(this,"delete",Toast.LENGTH_SHORT).show();                break;            case R.id.menu_search:                Toast.makeText(this,"search",Toast.LENGTH_SHORT).show();                break;        }        return super.onOptionsItemSelected(item);    }

第二种设定菜单的点击事件：

    mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {            @Override            public boolean onMenuItemClick(MenuItem item) {                switch (item.getItemId()){                    case R.id.menu_add:                        Toast.makeText(MainActivity.this,"add",Toast.LENGTH_SHORT).show();                        break;                    case R.id.menu_delete:                        Toast.makeText(MainActivity.this,"delete",Toast.LENGTH_SHORT).show();                        break;                    case R.id.menu_search:                        Toast.makeText(MainActivity.this,"search",Toast.LENGTH_SHORT).show();                        break;                }return true;            }        });

四、使用ToolBar进行Activity之间的跳转

第一步：调用

getSupportActionBar().setDisplayHomeAsUpEnabled(true);//显示默认的图标，默认的图标为返回键

第二步：设置Activity之间的关系栈(表示Activity是按照这个关系栈，退出的)

（为实现我们需要先创建两个Activity，名叫FirstActivity,SecondActivity）

   <!--设置parentActivity属性，设置Activity的父Activity-->        <activity android:name=".FirstActivity"            android:parentActivityName=".MainActivity">            <!--保证向下兼容-->            <meta-data                android:name="android.support.PARENT_ACTIVITY"                android:value=".MainActivity"/>        </activity>        <activity android:name=".SecondActivity"            android:parentActivityName=".FirstActivity">            <meta-data                android:name="android.support.PARENT_ACTIVITY"                android:value=".FirstActivity"/>        </activity>

效果：

五、在Toolbar上添加ActionView(就是将一个View弄到Toolbar上去)

添加搜索功能到Toolbar

1、在menu/布局下添加SearchView

<pre name="code" class="html"><pre name="code" class="html">xmlns:app="http://schemas.android.com/apk/res-auto"

①、必须使用app="http://schemas.android.com/apk/res-auto"

然后通过app来设置actionViewClass和showAsAction否则无效。

②、app:showAsAction="collapseActionView"表示icon与actionViewClass合并。（当点击icon时候出现actionViewClass）

效果：

2、在代码中获取SearchView，并监听View是打开还是关闭着的

第一种方法：（MenuItemCompat是用于向下兼容的，高版本的控件向低版本兼容）

 @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.toolbar_menu,menu);        //获取MenuItem        MenuItem item = menu.findItem(R.id.menu_search);        //获取SearchView        SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);        //检查SearchView是否打开OnActionExpandListener监听接口        MenuItemCompat.setOnActionExpandListener(item,new MenuItemCompat.OnActionExpandListener(){            @Override            public boolean onMenuItemActionExpand(MenuItem item) {                return false;            }            @Override            public boolean onMenuItemActionCollapse(MenuItem item) {                return false;            }        });        return super.onCreateOptionsMenu(menu);    }

第二种方法：（这种比较好理解）

    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.toolbar_menu,menu);        //获取MenuItem        MenuItem item = menu.findItem(R.id.menu_search);        //获取SearchView        SearchView searchView = (SearchView)item.getActionView();        //设置打开还是关闭        item.setOnActionExpandListener(new MenuItem.OnActionExpandListener() {            @Override            public boolean onMenuItemActionExpand(MenuItem item) {                return false;            }            @Override            public boolean onMenuItemActionCollapse(MenuItem item) {                return false;            }        });        return super.onCreateOptionsMenu(menu);    }

六、让Overflow中的选项显示图标

原理：MenuBuilder这个类的setOptionalIconsVisible方法来决定的是否允许在Overflow中显示图片，我们只需要当Overflow展开的时候将其设为true就可以了。(利用反射机制)

  /**     * Overflow展开的时候调用该方法     */    @Override    public boolean onMenuOpened(int featureId, Menu menu) {        try {            if (menu != null){                if (menu.getClass().                        getSimpleName().equals("MenuBuilder")){                    Method method = menu.getClass().getDeclaredMethod("setOptionalIconsVisible",Boolean.TYPE);                    //获取所有的method（包括private default）                    method.setAccessible(true);                    method.invoke(menu,true);                }            }        }        catch (NoSuchMethodException e) {            e.printStackTrace();        } catch (InvocationTargetException e) {            e.printStackTrace();        } catch (IllegalAccessException e) {            e.printStackTrace();        }        return super.onMenuOpened(featureId, menu);    }

0 0