谷歌从Android 5.0系统开始,就将所有内置应用都使用Material Design风格来进行设计。本文主要记录学习的ToolBar这个控件。
ToolBar,继承了ActionBar的所有功能,灵活性很高。
首先设置项目的主题不要ActionBar
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
接着写activity_main.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" >
</android.support.v7.widget.Toolbar>
</FrameLayout>
注意:加入xmlns:app=http://schemas.android.com/apk/res-auto
是由于Material Design是Android5.0系统中才出现的,为了兼容低版本,不使用android:attribute
,而使用app:attribute
为了把ToobBar的主题和主题色系分开,设置ToolBar的主题android:theme,为了使得菜单弹出框的主题美观,此处设置app:popupTheme属性
在MainActivity.class中使用:
Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
此时看到的效果图为:
在res->menu文件夹->New ->Menu resource file创建toolbar.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/backup"
android:title="backup"
android:icon="@mipmap/sel_button"
app:showAsAction="always"
/>
<item android:id="@+id/delete"
android:title="delete"
android:icon="@mipmap/trash_button_click"
app:showAsAction="ifRoom"
/>
<item android:id="@+id/settings"
android:title="settings"
android:icon="@mipmap/ic_launcher"
app:showAsAction="never"
/>
</menu>
在MainActivity.class中添加代码如下:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.backup:
Toast.makeText(MainActivity.this,"You clicked backup",Toast.LENGTH_LONG).show();
break;
case R.id.delete:
Toast.makeText(MainActivity.this,"You clicked delete",Toast.LENGTH_LONG).show();
break;
case R.id.settings:
Toast.makeText(MainActivity.this,"You clicked settings",Toast.LENGTH_LONG).show();
break;
}
return true
;
}
效果图为: