Android Material Design之Toolbar

 

1.ActionBar

1.1 ActionBar概述

        ActionBar是系统原生的标题栏。每个Activity默认的最顶部的那个标题栏就是ActionBar。

1.2 默认的使用方式

        ActionBar到底从哪里来呢？其实是根据项目中指定的主题来显示的。在AndridManifest.xml中默认引入的theme如下所示：

    
        ......
    

          打开styles.xml文件如下所示：

        可以看到，这里引入的parent主题就是Theme.AppCompat.Light.DarkActionBar，这个DarkActionBar就是一个深色的ActionBar主题，默认出现的ActionBar就是因为指定了这个主题才出现的。

1.3 ActionBar缺陷

      ActionBar被限定只能位于Activity的顶部，而不能实现一些Material Design效果，因此官方已经不再建议使用ActinBar了。

 

2.ToolBar

2.1 概述

       ToolBar的强大之处在于，它不仅继承了ActionBar的所有功能，而且灵活性很高，可以配合其他控件来完成一些Material Design的效果。

2.2 ToolBar的引入方式

       通过在styles.xml中指定parent主题为不带ActionBar的主题。通常选择有Theme.AppCompat.NoActionBar和Theme.AppCompat.Light.NoActionBar这两种主题。

       1）Theme.AppCompat.NoActionBar

        表示深色主题，它会将界面的主体颜色设为深色，陪衬颜色设为淡色。如下所示：

      2）Theme.AppCompat.Light.NoActionBar

       表示淡色主题，它会将界面的主体颜色设为淡色，陪衬颜色设为深色。如下所示：

        引入方式 如下所示：

2.3 Activity界面color位置设置详解

       如下图所示：

         从上图可以看出，每个属性所指定的颜色的位置不一样。

 

 

3.ToolBar实例

3.1 实现效果

     实现的效果如下图所示：

 

3.2 添加action按钮

          右击res目录->new->Directory，创建一个menu文件夹，然后右击menu文件夹->new->Menu resource file，创建一个toobar.xml文件如下所示：每一个item就是一个action按钮

        参数说明：

app:showAsAction=""	always：表示永远显示在ToolBar中，如果屏幕空间不够，则不显示。 ifRoom：表示屏幕空间足够的情况下显示在ToolBar中；不够则显示在菜单中。 never：表示永远显示在菜单中。 注意：ToolBar中的action只会显示图标，而菜单中的action只会显示title文字。
icon	用于指定按钮的图标。
title	用于指定按钮的文字。

3.3 设置布局样式

         在activity_mian.xml中：

        注意：这里使用了xmlns:app指定了一个新的命名空间。正是用于布局文件使用了xmlns:android来指定一个命名空间，才可以使用android:id、andrid:layout_width等等属性。

         由于Mater Design是在Android 5.0系统才出现的，所以很多Meterial属性在5.0之前的系统中并不存在，为了兼容之前的老系统，这里使用了xmlns:app，这样就可用使用app:attribute属性了。

 

3.4 在Activity中处理业务

        在MainActivity.java中：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        //设置支持的ActionBar
        setSupportActionBar(toolbar);

    }
    //加载toolbar.xml菜单文件
    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }
    //处理各个按钮的点击事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.mail:
                Toast.makeText(this,"点击了邮箱图标",Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"点击了删除图标",Toast.LENGTH_SHORT).show();
                break;
            case R.id.qq:
                Toast.makeText(this,"点击了QQ图标",Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}

 

 

4.自定义Toolbar

4.1 自定义Toolbar样式

      可以自定义ToolBar，包括返回键样式，背景，高宽等。通过在布局文件中引入AppBarLayout，在AppBarLayout里面嵌套ToolBar，然后为Toolbar指定theme，在style.xml中自定义theme即可。

        效果图如下所示：自定义Toolbar的返回键颜色为白色，背景颜色为橙色，指定高度和标题

        布局文件如下所示：在AppBarLayout里面嵌套ToolBar

     在style.xml中自定义theme：其中colorControlNormal指定返回键颜色

     其部分属性如下所示：

colorControlNormal	指定返回键的颜色
android:actionBarSize	指定Toolbar的高度
android:background	指定Toolbar的背景颜色

4.2 使用系统原生返回键

      效果图如下所示：

 

      代码如下所示：

public class BaseTitleActivity extends BaseCommonActivity{

    protected Toolbar toolbar;

    @Override
    protected void initViews() {
        super.initViews();
        toolbar = findViewById(R.id.toolbar);
        //设置标题栏
        setSupportActionBar(toolbar);
    }

    /**
     * 设置标题
     * @param title
     */
    @Override
    public void setTitle(CharSequence title) {
        if(!TextUtils.isEmpty(title)){
            super.setTitle(title);
        }
    }

    /**
     * 开启返回功能
     */
    protected void enableBackMenu(){
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                finish();
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

4.3 自定义返回键

     效果图如下：这里自定义设置返回键为+

      自定义返回键方式有两种，如下：

    1）在style.xml的自定义them中添加一个item，自定义返回键样式：

@drawable/ic_add

   2）在布局文件中的Toolbar中指定app:navigationIcon属性

app:navigationIcon="@drawable/ic_add"