12Material Design-Toolbar

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

Toolbar的基本使用

  1. 首先你要知道,任何一个新建的项目,默认都是ActionBar,那么这个ActionBar到底是从哪里来的呢,打开这个AndrioidManifest.xml文件看看
 
       ...
    

  • 在这里,ndroid:theme属性指定了AppTheme主题,那么这个主题又是在哪里定义的呢,打开res/vaalues/style.xml文件


    
    


  • 可以看到parent主题就是Theme.AppCompat.Light.DarkActionBar,这个就是一个深色的主题,之前项目中自带的ActionBar就是因为指定这个主题才出现的
  • 现在要用Toolbar替代ActionBar,因此要指定一个不到ActionBar主题,通常有Theme.AppCompat.NoActionBar(表示深色主题,将会将界面主题颜色设置为深色,陪衬颜色是淡色)和Theme.AppCompat.Light.NoActionBar(表示淡色主题,将会界面主题颜色设置为淡色,陪衬的颜色是深色),这里使用淡色主题

    
    

  1. 现在已将ActionBar隐藏起来了,那么接下来就是使用Toolbar来替换ActionBar,修改activity_main.xml中的代码



    



  • 首先看第四行,这里使用的xmlns:app指定了一个i性能的命名空间,为了是能够兼容之前的老系统
  • 定义一个Toolbar控件,这个控件是V7库提供的,
  1. 完成了布局,接下来在MainActivity中
package com.example.tool;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}
  • 这里只有两行代码,首先找到这个实例,然后调用setSupportActionBar()方法将Toolbar的实例传入,这个就可以,运行程序就可以看到


    Toolbar的标准界面.png
  • 虽然看上去和平时没有什么两样,但是他已经是Toolbar,具备了MaterialDesign效果的能力

Toolbar的常用功能

  1. 比如修改标题栏上显示的文字,在AndroidManifest.xml中指定
 
        ...
    

  • 这里的label就是默认的应用名称,当然了也可以自己指定
  1. 这样只有一个标题的Toolbar还是太单调了,首先提前准备几张图片来作为按钮的图标,还可以添加一些按钮,右击res-->new-->Driectory,创建一个新的menu文件夹,然后右击这个文件夹,new -->Menu resource file,创建一个toolbar.xml文件,进行编写



    

    
    


  • 这里使用标签定义action按钮,icon用于指定图标,title用于指定文字
  • showAsAction来指定按钮显示的位置,常用的有几个
    • always表示永远显示在Toolbar中,如果屏幕空间不够则不显示
    • ifRoom表示屏幕空间足够的情况下显示在Toolbar中,不够的话就显示在菜单中
    • never则表示永远显示在菜单中
  1. 修改MainActivity中的代码
package com.example.tool;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }


    // 加载这个菜单
    @Override
    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.backup:
                Toast.makeText(this,"you clicked Backup",Toast.LENGTH_SHORT).show();
                break;

            case R.id.delete:
                Toast.makeText(this,"you clicked Delete",Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this,"you clicked Settings",Toast.LENGTH_SHORT).show();
                break;
            default:
        }

        return true;
    }
}


  • onCreateOptionsMenu()方法用于加载我们自定义的菜单文件,
  • onOptionsItemSelected()方法用于处理各个按钮事件


    带有按钮的Toolbar.png
  • 可以看到上面只有两个按钮,因为设置的always,而Settings设置的nerve,这就表示这个永远的显示在菜单中,就是三个点那
    当然了,这只是最简单的用法

你可能感兴趣的:(12Material Design-Toolbar)