ToolBar

Android Toolbar
1、使用前准备:
Toolbar 是在 Android 5.0 才开始加上的,Google 为了将这一设计向下兼容,自然也少不了要推出兼容版的 Toolbar 。为此,我们需要在工程中引入appcompat-v7 的兼容包,使用 android.support.v7.widget.Toolbar 进行开发。在builde.gradle文件中添加support.v7包的依赖:
compile ‘com.android.support:appcompat-v7:23.3.0’
 
2、使用流程:
  1、使用Toolbar替换ActionBar:
      Toolbar mToolbarTb = (Toolbar)findViewById(R.id.tb_toolbar);
  setSupportActionBar(mToolbarTb);
  supportRequestWindowFeature(Window.FEATURE_NO_TITLE) 去掉了默认的导航栏(注意,我的BaseActivity是继承了AppCompatActivity的,如果是继承Activity就应该调用requestWindowFeature(Window.FEATURE_NO_TITLE));
2、可以添加的元素:
  1.  导航按钮。
      getSupportActionBar().setDisplayHomeAsUpEnabled(true);
      //默认在左上方显示一个向左的箭头。
  可以通过onOptionsItemSelected(MenuItemitem)来设置响应事件,也可以设置导航图标的点击事件。
   @Override
    publicboolean onOptionsItemSelected(MenuItem item) {        
      switch(item.getItemId()) {            
        case android.R.id.home:
          finish();              
          break;
       }        
       return super.onOptionsItemSelected(item);
    }
    
    mToolbarTb.setNavigationOnClickListener(newView.OnClickListener() {    
        @Override
        publicvoid onClick(View v) {
          finish();
        }
    });
2.应用程序的标志logo。
  toolbar.setLogo()
3.标题和子标题。
  toolbar.setTitle();
  toolbar.setSubtitle();
4.一个和多个自定义的视图控件。
5.操作菜单
  toolbar.setNavigationIcon();
  通过app:xxx属性和Java代码来控制。主要的是标题的颜色和文字之间的冲突。
  setTitleTextColor、setTitleTextAppearance、setSubtitleTextColor、setSubtitleTextAppearance 
3.OptionMenu
  在menu资源目录下新建一个menu.xml文件.
 
         xmlns:app="http://schemas.android.com/apk/res-auto"
      >
               android:id="@+id/share"
         android:icon="@drawable/share_icon"
         android:title="分享"
         app:showAsAction="ifRoom"/>
               android:id="@+id/setting"
         android:icon="@drawable/nav_icon_settings"
         android:orderInCategory="100"
         android:title="设置"
         app:showAsAction="never"/>
 


  为item增加点击事件,showAsAction根据ToolBar空间的大小状态控制显示状态。有三种状态,分别是ifRoom,always,never显示在ToolBar中的默认是图标,而隐藏在Menu中的item(ifRoom空间不足,never从不显示这两种状态)显示为文字。
    @Override
    public booleanonCreateOptionsMenu(Menu menu) {
      getMenuInflater().inflate(R.menu.search, menu);       
      return super.onCreateOptionsMenu(menu);
    }    
 
  @Override
  public booleanonOptionsItemSelected(MenuItemitem) {        
      switch (item.getItemId()) {          
          case R.id.action_search:               
              break;
      }     
      return super.onOptionsItemSelected(item);
  }
  通过onCreateOptionsMenu(Menumenu) 将Option Menu加入到ToolBar中,或者使用toolbar.inflateMenu(R.menu.toolbar_menu);通过publicboolean onOptionsItemSelected(MenuItem item)为Menu中的Item增加点击事件,
  或者
  toolbar.setOnMenuItemClickListener(newToolbar.OnMenuItemClickListener() {
             @Override
             public boolean onMenuItemClick(MenuItem item) {
                 switch (item.getItemId()){
                     case R.id.xxx:
                         …
                         break;
                     case R.id. xxx:
                          …                       
                        break;
                 }
                 return false;
              }
          });
效果图:

ToolBar_第1张图片


图片来源:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html



优化:
     现在我们已经可以将基本的ToolBar展示出来,但是有关于样式的统一我们还需要调整使得字体一致。
1.Option Menu的默认样式是黑色,如何修改成其他颜色?
方法一:通过修改Toolbar的theme和popupTheme属性:
               ......
         app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
         app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
     
 
方法二:actionMenuTextColor属性设置Menu Item的字体颜色:
       
 
                   ......
           app:popupTheme="@style/OverFlowMenuTheme"
           app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
       
一般也是采用这种做法,将Toolbar相关属性集中写到一个style中:
       
方法三:更改Menu的图标
  配置style
       
             @style/ActionButton.Overflow.More
       
         
       
              @mipmap/more_icon
       
 
        android:theme="@style/Theme.ToolBar.More"
然后即可实现该效果。
values、values-v19、values-v21 中包含了一些自定义的 theme,
2.     改变标题和子标题的样式
也可以修改,比如:颜色,大小等
       
             16sp
       
       
             14sp
       
3.   标题居中
Toolbar就是一个定制化的ViewGroup,所以可以在Toolbar里面放置一个TextView控件作为居中的标题来使用,再将Toolbar的Title隐藏起来即可实现Toolbar标题居中的效果
                       xmlns:app="http://schemas.android.com/apk/res-auto"
               android:id="@+id/tb_toolbar"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               app:popupTheme="@style/OverFlowMenuTheme"
               app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
               android:background="@color/colorPrimary">
         
                                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:layout_gravity="center"
                   android:text="SecondActivity"
                   style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"/>
         
       
注意隐藏原来的ToolBar的文字的时候,在布局中使用app:title=""是不会起作用的,会显示ActionBar的标题,所以在代码中隐藏ActionBar的标题即可:
getSupportActionBar().setDisplayShowTitleEnabled(false);
同时还要保证新的title的样式(颜色,字体大小)都要考虑。给TextView设置样式。
 
4.   Fragment中使用
在Fragment中使用Toolbar,比如Activity中不同的Tab显示不同的Fragment,同时每个Tab的Toolbar标题、Menu均不相同,这时在Activity中使用同一个Toolbar就相当不方便了。我们可以在每个Fragment的布局中添加各自的Toolbar,然后在Fragment中单独控制
替换ActionBar时,需要给setSupportActionBar方法添加作用对象:
((AppCompatActivity)getActivity()).setSupportActionBar((Toolbar)mContentView.findViewById(R.id.tb_toolbar));
添加Options Menu时,需要额外调用setHasOptionsMenu(true);方法确保onCreateOptionsMenu()方法得以调用,并且onCreateOptionsMenu()方法多了一个MenuInflater参数:
@Override
public void onCreateOptionsMenu(Menumenu, MenuInflater inflater) {    
super.onCreateOptionsMenu(menu, inflater);
inflater.inflate(R.menu.search, menu);
}
5.   存在的问题
xml布局文件中,Toolbar属性设置无效
在根布局中加入自定义属性的命名空间
xmlns:toolbar="http://schemas.android.com/apk/res-auto"
(这里的toolbar可以换成你想要其他命名,做过自定义控件的童鞋相比很熟悉此用法了)
然后把所有用 android:xxx 设置无效的,都用 toolbar:xxx 设置即可生效。最终的布局代码如下:
 




 
 

你可能感兴趣的:(ToolBar,Material,Design,ToolBar,Material,Design)