Material Design学习之Toolbar

一、作用

    ToolBar是用来取代ActionBar的控件，但是比ActionBar的功能更强大，更灵活。

二、使用

   1、添加v7 appcompat支持库。

     compile 'com.android.support:design:25.0.1'

   2、让Activity继承自AppCompatActivity。

   3、去掉原有的导航栏。

          方式一：设置一个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>

          上图中，colorPrimary对应的是Toolbar的背景颜色（当然也可以在Toolbar中设置background），colorPrimaryDark对应状态栏的颜色，colorAccent对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。

          方式二：在Activity中调用supportRequestWindowFeature(Window.FEATURE_NO_TITLE)。

 

          方式三：在主题中设置item属性：

       <item name="windowActionBar">false</item>
          <item name="android:windowNoTitle">true</item>

    4、在Activity的xml布局文件中添加Toolbar：

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"

    >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/AppBarPopStyle"
        app:theme="@style/AppBarStyle"
        android:fitsSystemWindows="true">
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/app_name"
            android:textColor="#FFFFFF"
            android:textSize="16sp"
            />
    </android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

         重要属性：minHeight="?attr/actionBarSize" 设置最小高度为默认的actionBarSize

                          app:theme : 设置Toolbar的主题样式

                          app:popTheme: 设置右侧溢出框的主题样式

                          layout_collapseMode: 选择pin时表示它不随滑出移除屏幕，选择parallax时在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
                          fitsSystemWindows：实现状态栏各版本适配方案: 
                                                             1.Android5.0以上：material design风格，半透明(APP 的内容不被上拉到状态) 
                                                             2.Android4.4(kitkat)以上至5.0：全透明(APP 的内容不被上拉到状态) 
                                                             3.Android4.4(kitkat)以下:不占据status bar 

 

        这会显示一个基础的ToolBar，不会显示一些ToolBar特有的元素。

    5、显示其他元素。

Toolbar包含的元素有：导航按钮、应用的logo，标题和子标题，自定义控件（例如上面的TextView），溢出菜单。

        方式一，可以通过代码来显示它们：

        

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_appbar);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        TextView toolbar_title = (TextView) findViewById(R.id.toolbar_title);
        toolbar_title.setText("AppBar");

        // 显示标题和子标题
        //  1.在setSupportActionBar(titletoolbar);之前调用ToolBar的setTitle方法。
        // 2.在Activity的onResume周期中调用。
        toolbar.setTitle("Demo");
        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle("Demo");
        getSupportActionBar().setSubtitle("the");

        // 显示应用的Logo
        getSupportActionBar().setDisplayShowHomeEnabled(true);
        getSupportActionBar().setDisplayUseLogoEnabled(true);
        getSupportActionBar().setLogo(R.mipmap.ic_launcher);
        
        // 显示导航按钮
        toolbar.setNavigationIcon(R.mipmap.daohang);


    }

        方式二，通过在xml文件中添加属性来设置：

<android.support.v7.widget.Toolbar
        android:id="@+id/id_toolbar"
        app:title="App Title"
        app:subtitle="Sub Title"
        app:navigationIcon="@drawable/ic_toc_white_24dp"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimary"/>

      6、设置溢出菜单

             设置溢出菜单，首先在res/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/action0"
        android:title="搜索"
        android:icon="@mipmap/search"
        app:showAsAction="always"
        ></item>

    <item
        android:id="@+id/action1"
        android:title="分享"
        android:icon="@mipmap/share"
        app:showAsAction="always"
        ></item>


    <item
        android:id="@+id/action2"
        android:title="点赞"
        android:icon="@mipmap/aixin"
        app:showAsAction="ifRoom"
        ></item>


    <item
        android:id="@+id/action3"
        android:title="打赏"
        android:icon="@mipmap/zhifubao"
        app:showAsAction="always"
        ></item>
</menu>

             其中注意：item下面可以继续添加<menu><group><item1/><item2/>...<group><menu>，这样在点击该item的时候，会弹出新的溢出菜单。

             属性：app:showAsAction：可选：always（一直显示在Toolbar上），ifRoom（如果Toolbar上有多余的位置就显示，没有就不显示），never(永远不显示在Toolbar上)

      

显示方式一：

            之后重写onCreateOptionMenu方法填充Menu：

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

            点击了按钮，重写onOptionsItemSelected方法对按钮操作：

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.action0:
                return true;
            case R.id.action1:
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

显示方式二，在设置Toolbar的时候创建：

 

 public class ToolBarActivity extends BaseActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tool_bar);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标
        toolbar.setLogo(R.mipmap.ic_launcher);//设置app logo
        toolbar.setTitle("Title");//设置主标题
        toolbar.setSubtitle("Subtitle");//设置子标题

        toolbar.inflateMenu(R.menu.base_toolbar_menu);//设置右上角的填充菜单
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                int menuItemId = item.getItemId();
                if (menuItemId == R.id.action_search) {
                    Toast.makeText(ToolBarActivity.this , R.string.menu_search , Toast.LENGTH_SHORT).show();

                } else if (menuItemId == R.id.action_notification) {
                    Toast.makeText(ToolBarActivity.this , R.string.menu_notifications , Toast.LENGTH_SHORT).show();

                } else if (menuItemId == R.id.action_item1) {
                    Toast.makeText(ToolBarActivity.this , R.string.item_01 , Toast.LENGTH_SHORT).show();

                } else if (menuItemId == R.id.action_item2) {
                    Toast.makeText(ToolBarActivity.this , R.string.item_02 , Toast.LENGTH_SHORT).show();

                }
                return true;
            }
        });

    }

}

三、其他

   1、菜单栏溢出框设置不遮盖Toolbar：

     在app：popopTheme的主题中设置：<item name="overlapAnchor">false</item>

   2、溢出菜单三个点的颜色：

     设置为ThemeOverlay.AppCompat.ActionBar时为黑色，设置为ThemeOverlay.AppCompat.Dark.ActionBar时为白色。

   3、设置溢出框背景：

     在app：popopTheme的主题中设置：<item name="android:itemBackground">@android:color/white</item>或者<item name="android:colorBackground">#000000</item>。前者优先级大于后者。