Toolbar

2016-12-15  本文已影响69人  谢尔顿

1.官方文档内容

toolbar.png

toolbar是android.support.v7.widget包中的一个类，兼容低版本的API，如果你开发的项目最低要求的API版本是21，那么你也可以使用android.widget.包中的toolbar。它可以放置在一个视图层次结构中嵌套的任意级别，应用程序可以使用方法setSupportActionBar将一个ActionBar替换为toolbar，toolBar支持比ActionBar更集中的功能集。

2.toolbar的基本使用：

（1）第一步，在使用之前我们需要把ActionBar隐藏。

也可以不隐藏ActionBar作为一个独立控件使用。

ActionBar的方式有：

        <activity
            android:name=".MainActivity"
            android:theme="@android:style/Theme.Light.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

注：该方式的使用条件是你的XxxActivity必须继承自Activity,如果继承自AppCompatActivity，会报如下图的错误：

错误.png
我们需要使用如下theme： 
android:theme="@style/Theme.AppCompat.Light.NoActionBar"

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }
    }

注：以上方式兼容任何级别的API；

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ActionBar actionBar = getActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }
    }

注：以上方式API21以上才会起作用。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
//        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
    }

注：使用上述代码时，必须放到setContentView方法之前调用。

（2）第二步，在xml中添加toolbar控件，代码如下；

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/custom"/>

    </android.support.v7.widget.Toolbar>

注：上面代码中的TextView为自定义控件。?attr/actionBarSize表示根据屏幕的分辨率采用系统默认的高度，低版本要使用的话，需要使用V7包中的，否则只有api21以上才能使用。

（3）第三步，在Activity中添加toolbar，代码如下；

    @BindView(R.id.toolbar)
    Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_zhifu);
        ButterKnife.bind(this);

        mToolbar.inflateMenu(R.menu.toolbar_menu);          //设置右上角的填充菜单
        mToolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标
        mToolbar.setLogo(R.mipmap.ic_launcher);             //设置app的logo

        mToolbar.setTitle("Title");                         //设置主标题
        mToolbar.setTitleTextColor(Color.MAGENTA);
        mToolbar.setSubtitle("Subtitle");                   //设置子标题
        mToolbar.setSubtitleTextColor(Color.WHITE);

        //设置菜单的点击事件
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.action_search:
                        Toast.makeText(ZhifuActivity.this, R.string.menu_search, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_notification:
                        Toast.makeText(ZhifuActivity.this, R.string.menu_notifications, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_item01:
                        Toast.makeText(ZhifuActivity.this, R.string.item01, Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_item02:
                        Toast.makeText(ZhifuActivity.this, R.string.item02, Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });
    }

用到的菜单xml（R.menu.toolbar_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_item01"
        android:title="@string/item01"
        app:showAsAction="never"/>
     <item
        android:id="@+id/action_item02"
        android:title="@string/item02"
        app:showAsAction="never"/>
</menu>

注：我们可以在xml中使用第三步中java代码的属性，如下所示：

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/color_0176da"
        toolbar:logo="@mipmap/ic_launcher"
        toolbar:navigationIcon="@mipmap/ic_drawer_home"
        toolbar:subtitle="123"
        toolbar:title="112"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/custom"/>

    </android.support.v7.widget.Toolbar>

注：在xml中有些属性需要使用toolbar:才会有作用。

常用操作：
（1）改变菜单(R.menu.toolbar_menu)的字体颜色:

<style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textColorPrimary">@color/color_red</item>
</style>

 toolbar:popupTheme="@style/Theme.ToolBar.Base"

3.仿知乎的标题栏

实现效果如下：

仿知乎的标题栏.gif

代码如下，
ZhihuActivity.java:

public class ZhifuActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_zhifu);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.inflateMenu(R.menu.zhihu_toolbar_menu);
        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);
        toolbar.setTitle(R.string.home_page);
        toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));
    }
}

主布局activity_zhihu.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_zhifu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.gjj.gd.materialdesign_v7.toolbar.ZhifuActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/color_0176da"
        android:theme="@style/Theme.Toolbar.ZhiHu">

    </android.support.v7.widget.Toolbar>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white">
        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_centerInParent="true"
            android:src="@mipmap/ic_zhihu_logo"/>
    </RelativeLayout>
</LinearLayout>

toolbar中的三点对应的menu布局zhihu_toolbar_menu.xml：

<?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/ic_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_setting"
        android:orderInCategory="100"
        android:title="@string/menu_setting"
        app:showAsAction="never"
        />
    <item
        android:id="@+id/action_about"
        android:orderInCategory="101"
        android:title="@string/menu_about"
        app:showAsAction="never"
        />


</menu>

布局中用到的样式：

    <style name="Theme.Toolbar.ZhiHu" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:actionOverflowButtonStyle">@style/ActionButton.Overflow.ZhiHu</item>
    </style>

    <style name="ActionButton.Overflow.ZhiHu" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
        <item name="android:src">@mipmap/ic_menu_more_overflow</item>
    </style>

4.toolbar实例1

结合DrawerLayout写了一个简单实例。


toolbar实例1.gif

5.toolbar实例2

自定义了更多的弹出菜单布局，利用了PopWindow。

自定义了弹出菜单popwindow.gif

源码地址：https://github.com/gaojuanjuan/MaterialDesign_V7

参考文章：

  1. Android 5.x Theme 与 ToolBar 实战
    本文出自：张鸿洋的博客;
  2. android Toolbar控件;
  3. Android Material Design之Toolbar与Palette实践
    本文出自：Rocko's bog;
  4. Android开发：最详细的 Toolbar 开发实践总结;
  5. ToolBar的使用
上一篇 下一篇

猜你喜欢

热点阅读