您的位置:首页 > 移动开发 > Android开发

[Android]Toolbar使用详解(二)——API

2015-07-28 11:57 645 查看

接上篇

ToolBar使用详解(一)——项目配置

如果在工程中还没有配置好ToolBar的同学可以参照上文进行配置

借用Google文档的一张图,Actionbar与Toolbar是异曲同工的



位置说明

与ActionBar的纠缠

继续与Actionbar绑定

<span style="white-space:pre">	</span>setSupportActionBar(mToolbar);


不与Actionbar绑定

只要不调用上面的API即可。
注意:
强烈推荐把ToolBar单独抽离。

图标设置(位置1)

图标大小

引用这个回答:http://stackoverflow.com/questions/11244918/action-bar-icon-size

Full
asset, 32x32 dp; Optical square, 24x24 dp



代码设置图标

<span style="white-space:pre">	</span>mToolbar.setNavigationIcon(R.drawable.ic_launcher);


设置图标监听事件

<span style="white-space:pre">	</span>mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //to do something
            }
        });

标题设置(位置1)

<span style="white-space:pre">	</span>mToolbar.setTitle("标题");
        mToolbar.setSubtitle("副标题");
        mToolbar.setTitleTextColor(Color.parseColor("#ff0000"));//设置标题颜色
        mToolbar.setSubtitleTextColor(Color.parseColor("#ff0000"));
        mToolbar.setLogo(R.drawable.ic_actionbar_flow);//设置logo图片

设置导航栏和沉浸式菜单(位置2、位置3)

mToolbar.inflateMenu(R.menu.menu_main);


在Menu文件夹下新建menu_main.xml文件如下

<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/action_share"
        android:title="@string/action_share"
        android:orderInCategory="100"
        android:icon="@drawable/ic_actionbar_share"
        app:showAsAction="never|withText" />
    <item
        android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="101"
        android:icon="@drawable/ic_actionbar_settings"
        app:showAsAction="never|withText" />
</menu>

注意:

通过设置showAsAction的属性,always是位置2(如果toolbar位置够多),never是位置3。

设置菜单监听事件

mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem menuItem) {
                int id = menuItem.getItemId();
                switch (id) {
                    case R.id.action_share:
                        MyLog.e("share!");
                        return true;
                    case R.id.action_settings:
                        MyLog.e("setting!");
                        return true;
                    default:
                        return false;
                }
            }
        });


ActionMode

ActionBar用得比较多的会是搜索(自定义布局)和长按弹出上下文菜单的功能。

左边是ActionMode打开后,右边是普通状态。





搜索(自定义布局)

在主题文件theme中应用

<item name="windowActionModeOverlay">true</item>
    <item name="actionModeBackground">@null</item>
注意
第一句是设置ActionMode可用,第二句是设置ActionMode模式下的回退箭头(默认)

在代码中应用,点击某个按钮后触发ActionMode

mToolbar.startActionMode(new MyActionModeCallback());


定义ActionModeCallBack

private class MyActionModeCallback implements ActionMode.Callback {

        @Override
        public boolean onCreateActionMode(ActionMode mode, Menu menu) {
            //创建时将导航图和标题去掉
            mToolbar.setNavigationIcon(null);
            mToolbar.setTitle(null);
            mToolbar.setSubtitle(null);
            //这里加载自定义布局
            mode.setCustomView(LayoutInflater.from(MainActivity.this).inflate(R.layout.layout_actionmode, null));
            return true;
        }

        @Override
        public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
            return false;
        }

        @Override
        public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
            //点击某个按钮触发finish或者点击左箭头退出
            mode.finish();
            return false;
        }

        @Override
        public void onDestroyActionMode(ActionMode mode) {
            //重新设置导航图和标题去掉
            mToolbar.setNavigationIcon(R.drawable.ic_actionbar_flow);
            mToolbar.setTitle("标题");
            mToolbar.setSubtitle("副标题");
        }
    }




创建layout_actionmode.xml(自定义布局,这里我简单实现了)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_bright">

    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文字标题" />

    <ImageView
        android:layout_below="@id/txt"
        android:src="@android:drawable/star_on"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</RelativeLayout>


弹出上下文菜单

个人建议:随着手机屏幕越来越大,要点击到上下文菜单(右图)更难,如下图,个人更推荐左边对话框的实现方式。



更多详细使用请访问谷歌官网
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: