ToolBar

本文参照Google官方的教程,进行了二次整理和实际使用中的经验总结。
Android develop之AppBar

前言

没什么前言了,能进来看ToolBar,相信你也知道为什么要使用ToolBar了。接下来请坐稳,让我们一起去Android developer上学习一下ToolBar。
先放一张Toolbar的示意图

ToolBar_第1张图片
Toolbar

一、ToolBar的基本入门使用

  1. 让你的工程依赖支持v7 appcompat。这个不废话。
  2. 让你要显示的Activity继承AppCompatActivity。
  3. 在清单Manifest中设置Application的主题为NoActionBar。

如果你使用的是自定义主题,那么需要在你自定义的style里面加上下面的代码,让ActionBar隐藏。

  false
  true
  1. 在activiy的xml布局文件中加上ToolBar。

需要注意下面几点

  • 一般Toolbar都是放到布局的最上面。
  • Material Design 规范)建议应用栏具有 4 dp 的仰角,所以要android:elevation="4dp"
  • android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    的作用是让ToolBar浮于其他Activity布局之上。
  1. 在Activity中初始化ToolBar。
@Override
protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_my);
          Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
          setSupportActionBar(myToolbar);
    }

这里其实是分为两步的:

  • 初始化ToolBar对象;
  • setSupportActionBar将ToolBar对象传递给Activity。该方法会将工具栏设置为 Activity 的应用栏。
  1. 至此,一个最基本的ToolBar就完成了,这个ToolBar会包含应用的名称和一个溢出菜单。

二、在ToolBar上添加menu

简单地说,就是把当前Activity上比较重要的功能放到ToolBar上,这样方便用户操作。比如我们在看到一篇很好的博客的时候,ToolBar上就可以放上一个分享和收藏的标签。
这里我们采用menu的方式来实现此功能。

  1. 在res/menu/下创建一个menu资源文件

    

    

每个menu的item设置icon、id、title。最重要的一个就是app:showAsAction,这个有下面个选项:

  • never:永远不显示的ToolBar上,只放在溢出菜单中(也就是三个竖点)。只有点击溢出菜单才会弹出。
  • always:无论是否溢出,总会显示。
  • ifRoom:如果还有地儿的话,那就显示上。没地儿的话就放到溢出菜单中。
  1. 将上一步的menu加载到ToolBar上。
    准确的说是将menu加载到Activity中,因为ToolBar取代了Activity的ActionBar,所以menu会被加载到ToolBar上。
    在Activity的onCreateOptionsMenu中加载menu
 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_item, menu);
        return true;
    }
  1. 添加对Menu的响应。
    当我们点击了响应的menu,对应的处理方法依然和普通的menu一样是放在Activity的onOptionsItemSelected中。
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_settings:
            // User chose the "Settings" item, show the app settings UI...
            return true;

        case R.id.action_favorite:
            // User chose the "Favorite" action, mark the current item
            // as a favorite...
            return true;

        default:
            // If we got here, the user's action was not recognized.
            // Invoke the superclass to handle it.
            return super.onOptionsItemSelected(item);

    }
}
  1. 修改menu的字体颜色
    一般默认主题的menu字体颜色是黑色,但是大多数我们希望的是白色。可以通过在style中加入一行设置来实现:
#ffffff`

三、添加返回图标

添加返回图标有两种方式:

方法一:官方方法
  1. 在AndroidManifest中在ParentActivity和ChildActivity中加上配置:

    ...

    

    
        ...
    

    
    

        
        
    

  1. 在Java代码中调用actionbar的setDisplayHomeAsUpEnabled()方法。这个方法是让返回按钮能显示出来
// my_child_toolbar is defined in the layout file
    Toolbar myChildToolbar = (Toolbar) findViewById(R.id.my_child_toolbar);
    setSupportActionBar(myChildToolbar);
    // Get a support ActionBar corresponding to this toolbar
    ActionBar ab = getSupportActionBar();
    // Enable the Up button
    ab.setDisplayHomeAsUpEnabled(true);

这是官方API上的教程。

方法二:使用menu

这个方法无需在AndroidManifest中进行配置

  1. 初始完成Toolbar之后,加上下面这两行:
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);

这两行必须同时打开才可以。第一行是显示返回按钮,第二行是使action bar角落上的home button有效。

  1. 重写onOptionsItemSelected方法,监听android.R.id.home:
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            Toast.makeText(this, "哈哈哈", Toast.LENGTH_SHORT).show();
            finish();
        }
        return super.onOptionsItemSelected(item);
    }
方法三:自己设置导航图标

ToolBar是可以自己设置导航icon的,我们完全可以把导航icon设置为返回按钮,然后开始监听返回按钮的点击事件。
看下面的代码。

       setSupportActionBar(toolbar);
       toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white);
       toolbar.setNavigationOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               finish();
           }
       });

四、Toolbar中加入自定义view

Toolbar为我们提供了title、subtitle、navigationIcon、还有各种menu等组件。但这些似乎并不能满足我们的设计师,似乎要在Toolbar中加入各种绚丽的功能,让我们的Toolbar变得功能更加丰富。这也难不倒我们。因为Toolbar继承了ViewGroup,所以只要你需要,你可以添加各种View到Toolbar中。使用方法也非常简单。只要在xml布局的Toolbar标签中直接添加View就可以,然后在Java代码中像普通组件一样直接使用就可以了。

    
        
        
    

你可能感兴趣的:(ToolBar)