淘先锋技术网

首页 1 2 3 4 5 6 7


转自  http://www.apkbus.com/forum.php?mod=viewthread&tid=242188&extra=page%3D1&page=1&_dsign=833cebcc



众所周知,在使用ActionBar的时候,一堆的问题:这个文字能不能定制,位置能不能改变,图标的间距怎么控制神马的,由此暴露出了ActionBar设计的不灵活。为此官方提供了ToolBar,并且提供了supprot library用于向下兼容。Toolbar之所以灵活,是因为它其实就是一个ViewGroup,我们在使用的时候和普通的组件一样,在布局文件中声明。

Part1:ToolBar的引入 step1:设置style主题,主要任务是去除原本的ActionBar
[XML]  纯文本查看  复制代码
?
1
2
3
4
5
6
7
< style name = "AppBaseTheme" parent = "Theme.AppCompat.Light.NoActionBar" > <!--Light.DarkActionBar表示默认的黑色主体的Actionbar-->
   <!-- Customize your theme here. -->
   < item name = "colorPrimary" >@color/sky_blue</ item >
   < item name = "colorPrimaryDark" >@color/deep_blue</ item >
   < item name = "colorAccent" >@color/material_deep_teal_200</ item >
   < item name = "android:textColorPrimary" >@color/white</ item >
</ style >

colorPrimary表示标题栏ActionBar的颜色;colorPrimaryDark表示状态栏的颜色;   colorAccent表示输入框,按钮等被选中时的颜色;  textColorPrimary表示标题栏(ActionBar或者ToolBar)中字体的颜色

当然啦,第一步的实现也可以在程序代码中或者style里静态或者动态地去掉ActionBar

step2:在你需要引入ToolBar的布局文件中引入ToolBar:
[XML]  纯文本查看  复制代码
?
1
2
3
4
5
6
7
< android.support.v7.widget.Toolbar
         android:id = "@+id/main_toolbar"
         android:theme = "@style/ThemeOverlay.AppCompat.Dark" //这里的主题可以用来反衬toolBar的overFlow颜色
         android:layout_width = "match_parent"
         android:layout_height = "wrap_content"
         android:background = "@color/sky_blue"
         ></ android.support.v7.widget.Toolbar >

因为colorPrimary是给ActionBar设定颜色的,因此如果我们使用ToolBar,就需要自己去设定ToolBar的背景颜色

setp3:在代码中获取ToolBar控件以及实例化:
[Java]  纯文本查看  复制代码
?
1
2
3
4
Toolbar toolbar = (Toolbar) findViewById(R.id.main_toolbar);
        toolbar.setNavigationIcon(R.mipmap.ic_toc_white_24dp); //设置ToolBar头部图标
        toolbar.setTitle( "ToolBar" ); //设置标题,也可以在xml中静态实现
        setSupportActionBar(toolbar); //使活动支持ToolBar
Part2:ToolBar里各SearchView的引入:

setp1:在menu/xxxx.xml的菜单布局文件将SearchView以菜单条目的方式加入到ToolBar中

[XML]  纯文本查看  复制代码
?
1
2
3
4
5
6
7
8
< item
         android:id = "@+id/action_search"
         android:icon = "@drawable/ic_search"
         app:actionViewClass = "android.support.v7.widget.SearchView"
         app:showAsAction = "ifRoom|collapseActionView"
         android:inputType = "textCapWords"
         android:imeOptions = "actionSearch"
         android:title = "search" />

这中添加条目的方式和添加普通控件的方式是一样的,这里需要对showAsAction具体说明以下:

ifRoom表示当toolBar空间足够时,显示图标在标题栏中,否则将它隐藏到ToolBar末端的overFlow中,点开overFlow只显示item的title

CollapseActionView表示当前空间点开之后占据整个ToolBar空间

always表示总是显示在标题栏中,当我们长按该item后,就会以Toast的方式显示出它的title

never表示总是隐藏在overFlow中

step2:在Java程序代码中实例SearchView

覆写onCreateOptionsMenu方法,为什么要在这个方法里实现对SearchView的实例化呢?因为toolBar里的点击事件都以菜单的形式实现的,如果我们需要让它隐藏到overFlow中,并且点击菜单键并唤出,那么就只需要把它的显示方式设置为never即可。

[Java]  纯文本查看  复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
public boolean onCreateOptionsMenu(Menu menu) {
   MenuInflater inflater = getMenuInflater();
   inflater.inflate(R.menu.menu_main, menu);
   MenuItem menuItem = menu.findItem(R.id.action_search); //在菜单中找到对应控件的item
   SearchView searchView = (SearchView) MenuItemCompat.getActionView(menuItem);
   Log.d( "Tag" , "menu create" );
   MenuItemCompat.setOnActionExpandListener(menuItem, new MenuItemCompat.OnActionExpandListener() { //设置打开关闭动作监听
     @Override
     public boolean onMenuItemActionExpand(MenuItem item) {
       Toast.makeText(MainActivity. this , "onExpand" , Toast.LENGTH_LONG).show();
       return true ;
     }
     @Override
     public boolean onMenuItemActionCollapse(MenuItem item) {
       Toast.makeText(MainActivity. this , "Collapse" , Toast.LENGTH_LONG).show();
       return true ;
     }
   });
   return super .onCreateOptionsMenu(menu);
}