MaterialDesign系列文章(五)ToolBar的使用
2017-11-06 本文已影响176人
笔墨Android
ToolBar
ToolBar其实是一个ActionBar的变体,大大的扩展了ToolBar,我们可以像对待一个独立的控件去使用ToolBar,可以将他放在屏幕的任何位置,还可以将他改变高度或者在ToolBar上使用动画,从SDK看,很多actionBar的方法都已经废弃了,所以问们可以断定,未来ToolBar将完全取代ActonBar
1布局文件
toolBar可放在任何位置,只要你想...
<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"/>
2关联ToolBar
2.1 menu文件的使用
这里穿插一个内容就是menu文件的使用,因为后面会用到,所以这里面简单的作一下说明:
- 菜单资源文件必须放在res/menu目录中.菜单资源文件必须使用<menu>标签作为根节点.除了<menu>标签外,还有两外两个标签用于设置菜单像和分组,分别是<item>和<group>
- <menu>标签没有任何属性,但可以嵌套在<item>标签中,表示子菜单.不过<item>标签中不能才嵌套<menu>标签
<menu>标签的属性含义
- android:id 表示菜单项的资源ID
- android:menuCategory 同种菜单的种类 该属性可取4个值
- container
- system
- secondary
- alternative
- android:orderInCategory 同类菜单的排列顺序;该属性是一个整数值
- android:title 标题
- android:titleCondensed 菜单的短标题,当菜单标题太长的时候会显示该属性的值
- android:icon 菜单的图片资源ID
- android:alphabeticShortcut 菜单项的字幕快捷键
- android:numericShortcut 菜单的数字快捷键
- android:checkable 表示菜单是否带有复选框,该属性可设计为true/false
- android:checked 如果菜单像带复选框(checkable属性为true),该属性表示复选框默认状态是否被选中
- android:visible 菜单默认状态是否可见
- android:enabled 菜单默认状态是否被激活
- app:showAsAction
- ifRoom 如果有空间的话,会显示在ToolBar上,当空间不足的时候会显示在列表上
- always 一直显示在ToolBar上
- collapseActionView (一般要配合ifRoom一起使用)声明这个操作视窗应该被折叠到一个按钮中,当用户选择这个按钮时,这个操作视窗展开否则,这个操作视窗在默认的情况下时可见的
- never 永远不会显示,也不会显示在列表上,但是按menu键的时候会出来
- withText 菜单项和它的图标一起显示
<group>标签的属性含义
可以实现组合的显示,当组合的时候这里你可以看看实现的效果
<item
android:id="@+id/Tab3"
android:title="组合"
app:showAsAction="never">
<menu>
<item
android:id="@+id/item1"
android:title="组合1"/>
<item
android:id="@+id/item2"
android:title="组合2"/>
<item
android:id="@+id/item3"
android:title="组合3"/>
<item
android:id="@+id/item4"
android:title="组合4"/>
</menu>
</item>
- android:checkableBehavior 设置该组件所有菜单上显示的选择组件(CHeckBox或RadioButton).如果该属性值设为all,显示CheckBox组件;如果设置single,显示RadioButton组件;如果设置none,显示正常的菜单项(不显示任何选择组件)
2.2 ToolBar的设置
在代码中找到这个控件然后设置给ActionBar(setSupportActionBar(toolBar)) 但是这里有两个前提要注意一下:
- 主题中必须设置没有ActionBar(<item name="windowActionBar">false</item>),否则会出现里面报两个ActionBar的错误
- 当前Activity必须继承自AppCompatActivity
这里要注意,其实toolBar和ActionBar可以不联系到一起,如果不联系到一起的话,那么可以不用去setSupportActionBar(),也不用在activity中的onCreateOptionsMenu,你可以直接用(public void inflateMenu(int resId))方法直接设置menu文件 但是这样toolBar就完全变成一个独立于Activity的控件了,需要注意的是,如果你这么定义了,那么Activity的回调方法是不会监听toolBar上的menu的点击时间了,所有的点击时间都要通过toolBar提供那个都得监听其来实现.
-
关联ActionBar的写法
setSupportActionBar(mToolBar); //这里是关联menu文件的 @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater menuInflater = getMenuInflater(); menuInflater.inflate(R.menu.menu_main, menu); return true; } //设置点击事件的 @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()){ case id: break; } return super.onOptionsItemSelected(item); } -
不关联ActionBar的写法
mToolBar.inflateMenu(R.menu.menu_main); /*设置导航图标*/ mToolBar.setNavigationIcon(R.mipmap.ic_launcher); mToolBar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "图标的点击事件执行了", Toast.LENGTH_SHORT).show(); } }); mToolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { if (item.getItemId() == R.id.name) { Toast.makeText(MainActivity.this, "条目的点击事件", Toast.LENGTH_SHORT).show(); return true; } else { return false; } } });
2.3 ToolBar详细设置
-
一些简单的设置
/*设置导航图标*/ mToolBar.setNavigationIcon(R.mipmap.ic_launcher); /*设置标题*/ mToolBar.setTitle("标题栏"); /*设置副标题*/ mToolBar.setSubtitle("子标题"); /*设置标题显示颜色*/ mToolBar.setTitleTextColor(Color.parseColor("#FFFFFF")); /*设置副标题的字体颜色*/ mToolBar.setSubtitleTextColor(Color.parseColor("#FFFFFF")); /*设置Logo*/ mToolBar.setLogo(R.drawable.ic_search_black_24dp); /*设置导航按钮*/ mToolBar.setNavigationIcon(R.drawable.ic_search_black_24dp);这里注意上面这些设置要在setSupportActionBar();之前进行设置否则不会生效;
-
给ToolBar添加字是图
这里还有一个问题,ToolBar有自己的LayoutParams,干什么用的呢?其实就是添加子视图的
/*添加一个子视图*/ TextView subText = new TextView(this); subText.setText("添加的子控件"); Toolbar.LayoutParams params = new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.WRAP_CONTENT, Gravity.CENTER); params.setMargins(3, 3, 4, 4); subText.setLayoutParams(params); mToolBar.addView(subText);
2.4 添加View在ToolBar上
-
代码添加
/*添加一个子视图*/ TextView subText = new TextView(this); subText.setText("添加的子控件"); Toolbar.LayoutParams params = new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.WRAP_CONTENT, Gravity.CENTER); params.setMargins(3, 3, 4, 4); subText.setLayoutParams(params); mToolBar.addView(subText); -
XML文件中添加
<android.support.v7.widget.Toolbar android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Clock"/> </android.support.v7.widget.Toolbar>
2.5 常见问题
-
当在xml中设置一些属性的时候不起作用的问题(这个问题主要是因为toolBar的属性都要自定义属性才好使)
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:toolbar="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/color_0176da" toolbar:navigationIcon="@mipmap/ic_drawer_home" toolbar:logo="@mipmap/ic_launcher" toolbar:subtitle="456" toolbar:title="123"> <!--自定义控件--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Clock" /> </android.support.v7.widget.Toolbar> </LinearLayout> -
Menu Item 的文字颜色设置无效 (通过设置app:popupTheme="@style/Theme.ToolBar.Base"主题进行替换,这里注意是app开头的,你懂的)
<style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:textColorPrimary">@color/colorAccent</item> <item name="android:textSize">20sp</item> </style> -
最后上一个仿知乎的ToolBar设置(这里就贴出一个主要的主题,其他的上面都涉及到了))
<style name="zhiHuToolBar" parent="Theme.ToolBar.Base"> <item name="actionOverflowButtonStyle">@style/ActionButton.Overflow.ZhiHu</item> </style> <style name="ActionButton.Overflow.ZhiHu" parent="android:style/Widget.Holo.Light.ActionButton.Overflow"> <item name="android:src">@mipmap/ic_overflow</item> </style>这里注意一点就是app:theme="@style/Theme.ToolBar.ZhiHu"和app:popupTheme="@style/Theme.ToolBar.Base"的区别
2017年11月08日补充:
ToolBar还有一个属性标签
- app:layout_anchor="@id/xxxid"这个属性是附着都的意思,作用是附着在其他控件上,会使得其它控件状态改变的时候这个控件也会改变(当设置这个属性后这个控件的位置会附着到响应的标签的最上方去)!!!
