第一步
将打算使用Toolbar的Activity继承AppCompatActivity。为什么要让Activity继承这个类呢?我们来看下官方文档对AppCompatActivity的介绍:You can add an ActionBar to your activity when running on API level 7 or higher by extending this class for your activity and setting the activity theme to Theme.AppCompat or a similar theme.就是说,我们可以通过继承AppCompatActivity类和设置Theme.AppCompat主题,来使我们可以添加一个ActionBar。
public class MainActivity extends AppCompatActivity {
@Overrideprotected
void onCreate(Bundle savedInstanceState) {
...
}
}
第二步
设置Theme.AppCompat主题。Theme.AppCompat主题到底代表这什么呢,让我们来看看Theme.AppCompat的官方文档:Themes in the "Theme.AppCompat" family will contain an action bar by default. 就是说,"Theme.AppCompat"系列的主题都会默认包含一个ActionBar。"Theme.AppCompat"主题有两个子主题,我们会用到:
- "Theme.AppCompat.Light.NoActionBar"主题,当设置为这个主题时,Activity将没有默认的Actionbar。源代码如下
<style name="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
- "Theme.AppCompat.Light.NoActionBar"主题,这个主题Activity也没有Action Bar,同时Activity背景变成了深色。
<style name="Theme.AppCompat.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
当然我们并不是直接使用系统提供的Theme,而是继承某个Theme,进行一定程度的自定义。我们在styles.xml写下如下代码:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!--colorPrimary主要负责的是App Bar的背景颜色 -->
<item name="colorPrimary">@color/colorPrimary</item>
<!--colorPrimaryDark主要负责的是状态栏status bar的背景颜色 -->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!--colorAccent主要负责的是某些选择控件的背景颜色 -->
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
第三步
将刚刚自定义的Theme,在menifest.xml文件中的Application标签中声明,也可以在Activity标签中声明;
<menifest...>
...
<Application
...
android:theme="@style/Apptheme">
...
</Application>
</menifest>
第四步
在Activity的布局文件中添加Toolbar
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
/>
?attr/actionBarsize 是指使用Theme中该属性actionBarSize的值。
第五步
在Java代码中添加Toolbar,并且可以通过Java语句添加App图标,导航图标,主标题,副标题,自定义内容等等。可以通过查阅Toolbar官方文档来深入学习。下面的代码是位于该Activity的onCreate()方法中。
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setLogo(R.mipmap.ic_launcher);
toolbar.setTitle("我是主标题");
toolbar.setSubtitle("我是副标题");
toolbar.setNavigationIcon(R.mipmap.ic_launcher);
toolbar.inflateMenu(R.menu.menu_main);
第六步
添加Toolbar上的菜单。首先在res/menu文件夹中添加menu_main.xml文件,menu_main.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"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
>
<item android:id="@+id/action_edit"
android:title="编辑"
android:orderInCategory="80"
android:icon="@drawable/ic_menu_home"
app:showAsAction="always"/>
<item
android:id="@+id/action_setting"
android:title="分享"
android:orderInCategory="90"
app:showAsAction="never"/>
<item
android:id="@+id/action_share"
android:title="设置"
android:orderInCategory="100"
app:showAsAction="never"/>
</menu>
然后在Java代码中将其添加到toolbar中,并为toolbar添加点击事件,下面的代码也在Activity的onCreate()方法中。
onMenuItemClickListener = new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
String msg = "";
switch (item.getItemId()){
case R.id.action_edit:
msg += "edit";
break;
case R.id.action_setting:
msg += "setting";
break;
case R.id.action_share:
msg += "share";
break;
}
if (!msg.equals("")){
Toast.makeText(MainActivity.this,msg,Toast.LENGTH_LONG).show();
}
return true;
}
};
toolbar.setOnMenuItemClickListener(onMenuItemClickListener);
到此,Toolbar的基本功能就完成了。下面是一些零碎的注意事项。
颜色设置
- 设置状态栏status bar的颜色
<item name="colorPrimaryDark">#000000</item>
或者在布局文件中设置Toolbar的背景颜色
- 设置App bar上的主标题的颜色,overflow menu选项的字体颜色
<item name="android:textColorPrimary">@android:color/holo_red_light</item>
注意textColorPrimary这个属性除了设置主标题的颜色外,还设置了overflow menu中选项的字体颜色。除了这个方法,还可以在toolbar的布局文件中设置。这个方法只会设置主标题的颜色。所以,可以利用这两个方法,现在textColorPrimary中设置overflow menu选项字体颜色,再用app:titleTextColor覆盖主标题的颜色。注意:是"app:" 不是"android:"。
xmlns:app="http://schemas.android.com/apk/res-auto"
...
app:titleTextColor="@android:color/white"
- 设置App bar上的副标题的颜色
<item name="android:textColorSecondary">#000000</item>
或者在布局文件中
app:subtitleTextColor="@android:color/black"
其中第二种会覆盖第一中方法。注意:是"app:" 不是"android:"。
- 设置控制元件(switch等按钮)被选定或者选择的颜色
<item name="android:colorAccent">#000000</item>
- 设置app的背景色
<item name="android:windowBackground">#000000</item>
- 设置各控制元件(switch等)的默认颜色,以及overflow menu按钮(三个点)的颜色
<item name="colorControlNormal">#000000</item>
- 设置导航栏的背景颜色,只在Android 5.0后有效
<item name="navigationBarColor">#000000</item>
- 修改overflow menu中的选项的文字大小,(但是也会Activity中的TextView中的文字的大小,不过可以在布局文件中更改)
<item name="android:textSize">50sp</item>
最后
- 这只是Toolbar的基本使用,还有很多高阶的使用,比如和CoordinatorLayout在一起的动画效果等等,还要继续学习。
- Toolbar在Java代码和XML文字中还有更多设置,可以通过查阅Toolbar官方文档来深入学习。
主要参考文章:
- Android开发:最详细的 Toolbar 开发实践总结
-
android:ToolBar详解(手把手教程)
感谢上面两篇文章作者的分享,本文是通过学习这两篇文章,查阅官方文档,进行实践验证的写出来进行自我总结,再次分享给大家。
网友评论