Material Design 方案之 <Toolbar> (详细)

随着android 版本不断推进，android的标题栏也渐渐由ActionBar过渡到Toolbar， Toolbar涵盖了ActionBar的所有功能并且更加灵活，于是笔者就总结了Toolbar的使用。

注意： << 我们继承的是AppCompatActivity与Activity相比兼容了android较低版本的Material Design>>

文章大纲：

1：如何布局Toolbar。

2： Toolbar布局后相关问题。

3：为Toolbar增加内容。

环节一 <如何布局Toolbar>：

继承AppCopatActivity后AS会默认帮我们创建一个ActionBar，所以替换为Toolbar之前先将其移除。在 AndroidManifest文件中修改application或Activity 的theme。例如：

        android:theme="@style/Theme.AppCompat.Light.NoActionBar">

                                       使用android库里的去除title样式。

        <item name="windowNoTitle">true</item>  
 			   自定义样式加上这个属性(要继承一个合理的父样式)。   上述任选其一即可。运行app发现标题栏消失了。

	   注意： 在Activity中调用getSupportActionBar().hide();  并不是移除ActionBar看源码：

                 public void hide() {
                      mDecorToolbar.setVisibility(View.GONE);
                             }     //只是将其隐藏并解除占用空间，如果这时候我们再添加Toolbar会报错。

上述过程完成后我们就可以添加Toolbar了，添加Toolbar所具备的条件：

                  一： Toolbar必须存在顶层DecorView的tree结构中(在Decorview中可找到即可)；

                  二：调用setSupportActionBar(toolbar); toolbar即是上述存在于DecorView的Toolbar。 这行代码通俗讲就是让toolbar显示出来。

	  我们试一下一个不存在布局的Toolbar会不会被添加。

    protected void onCreate(@Nullable Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);

           ViewGroup view_decor= (ViewGroup) getWindow().getDecorView();

           view= LayoutInflater.from(this).inflate(R.layout.mytoolbar,view_decor,false);

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

           setContentView(R.layout.layout);

} 我们先创建了一个包含Toolbar的View对象(没有添加到DecorView中)。

                 R.layout.mytoolbar  布局：

     <?xml version="1.0" encoding="utf-8"?>
     <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp">
    </android.support.v7.widget.Toolbar>
    </FrameLayout>     很简单就是一个FrameLayout 包含一个Toolbar对象。

    R.layout.layout的布局为空。  Run as....

      什么都没有.....  接下来修改上述一行代码

    View view= LayoutInflater.from(this).inflate(R.layout.mytoolbar,view_decor,true);

就是将上面的false改为true

                             这样在inflate时候会添加到DecorView里  运行看看....

         看看toolbar是不是已经显示出来了，如果我们不调用setSupportActionBar(toolbar) 同样不能显示。

          由于我们的Toolbar是直接添加到DecorView上的

          而DecorView本身是FrameLayout布局所以就从屏幕顶端开始计算 ，当然Toolar也可添加到我们自定义的布局中。

                   ok  ，环节一结束了。

环节二 < Toolbar布局后相关问题>

         我们在环节一中残留的问题， Toolbar被其他控件遮挡，做为一个标题栏就应该在最前端的位置显示，否则视觉效果会非常不好，而google官方则为我们提供了一个组件，针对这个问题。来看看：

      android.support.design.widget.AppBarLayout   直接可作为一个容器使用：

     <android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical" android:layout_width="wrap_content"
       android:layout_height="wrap_content">
       <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="50dp">
       </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>        将上述的FrameLayout替换为AppBarLayout运行看效果

清楚的看到Toolbar显示在最前端了， AppbarLayout的作用就是在使得自己在同级别下最前端显示，而自己显示的就是子控件。要注意的是如果AppBarLayout有多个子控件则会显示异常，一般只与Toolbar搭配使用。环节二结束。

环节三： <为Toolbar增加内容>

Toolbar的灵活就在此处，可以调用addView()然后传入我们的布局即可，举个例子我们在上述代码中继续接着写：

     Button button=new Button(this);
     button.setBackground(getDrawable(R.mipmap.background));
     ViewGroup.LayoutParams layoutParams=new ViewGroup.LayoutParams(200,50);
     toolbar.addView(button,layoutParams);

		只是给Toolbar增加了一个button，button有背景图片。

          美观起见toolbar.setTitle(" ");其实就是让title文字为空字符串。上图：

这个button即是我们自定义的view，同样可以响应点击事件，所以我们可以给Toolbar中填入我们自定义的布局。

当然Toolbar还有个比较统一的菜单栏写法接着看：我们先在res文件夹下创建一个menu菜单，

在此文件夹下创建一个xml文件

然后看看menu.xml内容

         <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto">  
      <item
        android:id="@+id/menu"
        android:icon="@mipmap/menu"
        android:title="menu"
        app:showAsAction="never"
        ></item>
         <item
        android:id="@+id/delete"
        android:icon="@mipmap/delete"
        android:title="delete"
        app:showAsAction="always"
        ></item>
         <item
        android:id="@+id/post"
        android:icon="@mipmap/post"
        android:title="post"
        app:showAsAction="ifRoom"
        ></item>
         </menu>

解释一下：icon属性设置图标内容，title设置文字内容，这两种只能显示一种，showAsAction设置具体显示哪一种： never表示永远在菜单栏显示(设置这个后toolbar会默认帮我们创建一个菜单栏点击按钮)。 always表示要么只显示在toolbar，要么就不显示，ifRoom表示toolbar没空间后就显示在菜单栏里。菜单栏只显示文本， toolbar只显示图标。然后在Activity中重写一下方法就ok

        public boolean onCreateOptionsMenu(Menu menu) { 
              getMenuInflater().inflate(R.menu.menu,menu);     //这个方法来自AppCompatAvtivity
                  return true;
          }

还可以设置点击事件：

       public boolean onOptionsItemSelected(MenuItem item) {
             item.getItemId();     //  拿到点击按钮的Id，然后就可以执行我们的操作了。
             return true; 
          }

ok 先到这里 Toolbar还可以与其他Material Design的组件组合使用，笔者也是边学习边总结，后续文章再见。如有不正请指导！！

Material Design 方案之 <Toolbar> (详细)

猜你喜欢