在说ToolBar之前,先说一下ActionBar,每个活动顶部的那个标题栏就是ActionBar,由于设计的原因,ActionBar只能位于顶部,从而不能实现一些Material Design效果。
而ToolBar是一个MateriaL控件,它不仅继承了ActionBar的所有功能,而且灵活性高所以更推荐使用ToolBar。
下面就通过一个例子来看看说要讲的ToolBar:
在看代码之前,还需要知道一件事:新建的每一个项目都会显示ActionBar,那么ActionBar是从哪来的?
在res/values/styles.xml中,有着下面一段代码:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item></style>
DarkActionBar是一个深色的ActionBar主题,也是新建项目默认的主题,由于我们要是用ToolBar,所以我们需要指定一个不带ActionBar的主题。
这里只需要把DarkActionBar修改成NoActionBar即可。
接下来就看一下XML文件中的代码:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app.popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</FrameLayout>
使用app.popupTheme属性单独将弹出的菜单选项指定为淡色主题。
完成了布局,接下来是MainActivity里的代码:
public class MainActivity extends AppCompatActivity {
private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//得到实例
Toolbar toolbar = (Toolbar)findViewById(R.id.toolBar);
//将实例传入
setSupportActionBar(toolbar);
}
}
运行结果虽然和之前的标题没什么不同,但它确实变成了ToolBar。
接下来就说一下ToolBar比较常用的功能:
首先在res下新建一个文件夹menu,创建toolbar.xml文件
文件中代码如下:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/backup"
android:title="BackUp"
app:showAsAction="always"
android:icon="@drawable/backup" />
<item
android:id="@+id/delete"
android:title="Delete"
app:showAsAction="ifRoom"
android:icon="@drawable/delete" />
<item
android:id="@+id/settings"
android:title="Settings"
app:showAsAction="never"
android:icon="@drawable/settings" />
<!-- showAsAction的几个取值:
1.always:永远显示在ToolBar中,如果屏幕空间不够则不显示
2.ifRoom:空间足够就显示ToolBar中,不足就显示在菜单中
3.never:永远显示在菜单中
需要注意的是,在ToolBar中,action按钮只会显示图片,在菜单中只会显示文字 -->
</menu>
设置完毕之后,修改MainActivity中的代码如下:
public class MainActivity extends AppCompatActivity {
private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//得到实例
Toolbar toolbar = (Toolbar)findViewById(R.id.toolBar);
//将实例传入
setSupportActionBar(toolbar);
//得到ActionBar的实例,实现是有ToolBar完成的
ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
//显示导航按钮
actionBar.setDisplayHomeAsUpEnabled(true);
//设置导航按钮图标,默认为返回箭头(返回上一个活动)
//actionBar.setHomeAsUpIndicator(R.drawable.menu);
}
}
public boolean onCreateOptionsMenu(Menu menu) {
//加载toolbar这个菜单文件
getMenuInflater().inflate(R.menu.toolbar,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch(item.getItemId()){
case R.id.backup:
DisplayToast("Your Click BackUp");
break;
case R.id.delete:
DisplayToast("Your Click Delete");
break;
case R.id.settings:
DisplayToast("Your Click settings");
break;
}
return true;
}
public void DisplayToast(String str){
Toast toast = Toast.makeText(MainActivity.this,str,Toast.LENGTH_LONG);
toast.setGravity(Gravity.TOP,0,500);
toast.show();
}
}
最后看看效果图:(自己感受)