Material Design(一)--ToolBar

ToolBar

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

• 当我们新建一个项目的时候，默认都是会显示ActionBar的，而这个ActionBar到底是从哪里来的？其实是根据我们项目中设置的主题来显示的。

  
  
  application
  
  

  点开AppTheme,我们看到：

现在我们准备ToolBar来代替ActionBar，因此我们需要制定一个不带ActionBar的主题，通常有两种:

• Theme.AppCompat.Light.NoActionBar
  • 表示淡色主题，它会将界面的主题颜色设置为淡色，陪衬色设置为深色。
• Theme.AppCompat.NoActionBar
  • 表示深色主题，它会将界面的主题颜色设置为深色，陪衬色设置为淡色。
    现在我们用Theme.AppCompat.Light.NoActionBar来开发

颜色.jpg

其中：colorAccent这个属性，它不仅用来指定一个按钮的颜色，而是更多的表达了一个强调的意思，比如一个空间的选中状态也会使用colorAccent的颜色。

接下来我们看看代码中ToolBar的开发

注意点：
1:xmlns:app="http://schemas.android.com/apk/res-auto"命名空间，为了兼容5.0以前的版本，我们不能使用android:attribute的属性，而是应该使用app:attribute
2: 由于styles.xml中将各种元素指定为淡色主题，因此Toolbar现在也是淡色主题，而Toolbar上面的各种元素会自动使用深色系，现在变成黑色很难看。为了让ToolBar单独使用深色主题，这里我们是用android:theme属性ThemeOverlay.AppCompat.Dark.ActionBar。但是这样会出现新的问题，如果ToolBar中有菜单按钮，那么弹出来的菜单也会变成深色主题，于是我们使用app:poptheme单独将弹出的菜单指定成淡色主题

没有设置深色主题.png

设置了深色主题.png

一个Toolbar 从左到右包括了 一个navigation button、一个logo、一个title和subtitle、一个或多个自定义的View和一个 action menu 这5部分。也就是这个ViewGroup 容器里面包含了这五部分内容

Toolbar内容.jpg

动态代码如下：

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);
        toolbar.setNavigationIcon(R.drawable.ic_menu);
        toolbar.setLogo(R.mipmap.ic_launcher);
        toolbar.setTitle("Toolbal学习");
        toolbar.setSubtitle("副标题");
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "NavigationIcon is Click", Toast.LENGTH_SHORT).show();
            }
        });
    }

    /**
     * 加载菜单布局
     * @param menu
     * @return
     */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    }

    /**
     * 处理菜单中各个按钮的点击事假
     * @param item
     * @return
     */
    @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;
        }
        return true;
    }
}

注意：

• Toolbar中的action 按钮只会显示图片，菜单中的按钮只会显示文字！
• 怎样设置弹出菜单的文字的颜色？
  默认情况下是黑色的，因此我们需要重新设置style

image.png

运行结果：

设置弹出菜单的文字的颜色.png

• 怎么设置Toolbar 上的菜单的文字颜色？
  设置 @color/colorAccent属性

  
  
  image.png

image.png

• 怎么加自定义布局？
  因为Toolbal本身继承于ViewGroup，所以直接包裹布局即可

代码中使用：

        TextView tv_title= (TextView) findViewById(R.id.tv_title);
        tv_title.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "标题点击了", Toast.LENGTH_SHORT).show();
            }
        });

参考：

https://mp.weixin.qq.com/s?__biz=MzIxMTg5NjQyMA==&mid=2247483723&idx=1&sn=a67355a9757668c44c1fbb587bdf8efc&chksm=974f1040a0389956ac8c115ad3711ce04da483afefa1396273d31114a4cb2e8c73e81dad0728&mpshare=1&scene=23&srcid=0224M4yLtdMDqtIZsLg6jcpO#rd