初识 Toolbar
Toolbar 是 Android 5.0 开始推出的一个 Material Design 风格的导航控件,Google非常推荐使用 Toolbar 来作为Android客户端的导航栏,以此来取代之前的 ActionBar。与Actionbar 相比,Toolbar 显的要灵活很多,它不同于 Actionbar 一样,一定要固定在 Activity的顶端,而是可以放在界面的任意位置。Google 在设计Toolbar 的时候也给开发者留下了很多可定制的空间。
这些课定制的API 如下:
- 设置导航栏图标;
- 设置App的logo;
- 支持设置标题和子标题;
- 支持添加一个或多个的自定义控件;
- 支持Action Menu;
开始使用 Toolbar
Toolbar 是 Android 5.0 才开始使用,Google为了将这个设计向下兼容,自然需要推出兼容版的 Toolbar 。项目工程中需要引入 appcompat-v7 的兼容包, compile 'com.android.support:appcompat-v7:23.4.0'
接下来研究 Toolbar的结构
- ToolbarActivity 包含了 Toolbar 的一些基本使用,
- layout和menu文件夹分别是上面提到的两个Activity的布局文件 和 actionmenu 菜单文件。
- values中包含了一些自定义的 theme,后面用到的时候会顺带讲解。
接下来我们来看下 Toolbar 效果,这里是结合 DrawerLayout 抽屉菜单使用效果如下图。
效果图中,从左到右分别使用到了:导航栏图标,APP的Long,标题、副标题、搜索框,分享,以及ActionMenu。接下来我们来了解布局文件
首先来看在布局文件中,toolbar.xml 也就是我们所使用的 android.support.v7.widget.Toolbar 控件布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar" >
</android.support.v7.widget.Toolbar>
注意事项:
Toolbar 这个控件需要引入自定义属性声明,相当于我们自定义控件的时候要引入自定义属性声明,下面这行代码必不可少,
xmlns:app="http://schemas.android.com/apk/res-auto"
否者引入的属性: app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 就会出现异常
接着来了解 Toolbar 中那些菜单选项,这里引入的是系统提供的一些菜单选项,代码有标注
<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/ab_search"
android:orderInCategory="80"
android:title="action_search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="ifRoom"/>
<!-- 分享 -->
<item
android:id="@+id/action_share"
android:orderInCategory="90"
android:title="action_share"
app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
app:showAsAction="ifRoom"/>
<!-- 设置 -->
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="action_settings"
app:showAsAction="never"/>
</menu>
接下来继续了解我们的首页布局,这里使用到了 android.support.v4.widget.DrawerLayout 控件,这里笔者称它为抽屉菜单,像一个抽屉一样可以拉出来,这个空间用法这里不做详细介绍,有兴趣自己百度。<include layout="@layout/toolbar" /> 这里使用 include 标签引入布局,可以优化布局。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<include layout="@layout/toolbar" />
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- 内容界面 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/holo_blue_light"
android:orientation="vertical" >
<Button
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="内容界面"/>
</LinearLayout>
<!-- 侧滑菜单内容 必须指定其水平重力 -->
<LinearLayout
android:id="@+id/drawer_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:orientation="vertical" >
<Button
android:layout_width="200dp"
android:layout_height="match_parent"
android:text="菜单界面"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
最后我们来研究 ToolbarActivity 中究竟是如何实现的,代码如下:
public class ToolbarActivity extends ActionBarActivity {
private Toolbar mToolbar;
private ShareActionProvider mShareActionProvider;
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setLogo(R.mipmap.ic_launcher);
// 标题的文字需在setSupportActionBar之前,不然会无效
mToolbar.setTitle("主标题");
mToolbar.setSubtitle("副标题");
setSupportActionBar(mToolbar);
/**
* 设置是否显示为 Home主页
*
* 将此设置为 true 如果选择的 Home主页 返回主页
*/
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//获取侧滑菜单控件
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);
//关联 Toolbar 和 DrawerLayout
mDrawerToggle = new ActionBarDrawerToggle(
this, mDrawerLayout, mToolbar,
R.string.abc_action_bar_home_description,
R.string.abc_action_bar_home_description_format);
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);
// 菜单的监听可以在toolbar里设置,
// 也可通过Activity的onOptionsItemSelected回调方法来处理
mToolbar.setOnMenuItemClickListener(
new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_settings:
Toast.makeText(ToolbarActivity.this,
"action_settings", Toast.LENGTH_SHORT).show();
break;
default:
break;
}
return true;
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_toobar, menu);
/* ShareActionProvider配置 */
mShareActionProvider = (ShareActionProvider) MenuItemCompat.getActionProvider(menu
.findItem(R.id.action_share));
Intent intent = new Intent(Intent.ACTION_SEND);
intent.setType("text/*");
mShareActionProvider.setShareIntent(intent);
return super.onCreateOptionsMenu(menu);
}
}
看到这里以为就万事大吉了嘛!没有还没完呢,接下来提示一下使用过程中遇到的一下问题
1、在使用 Toolbar 的时候需要先隐藏掉原先的导航栏,这里我采用的是 :
Theme.AppCompat.Light.NoActionBar
还有其他的设置方法,比如:
supportRequestWindowFeature(Window.FEATURE_NO_TITLE) 去掉了默认的导航栏(注意,继承AppCompatActivity 可以这样使用,
如果是继承Activity就应该调用 requestWindowFeature(Window.FEATURE_NO_TITLE) );
样式布局文件如下:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorAccent">@color/colorAccent</item>
<!-- toolbar 颜色 -->
<item name="colorPrimary">#4876FF</item>
<!-- 状态栏颜色 -->
<item name="colorPrimaryDark">#3A5FCD</item>
<!-- 窗口背景颜色 -->
<item name="android:windowBackground">@android:color/white</item>
<item name="searchViewStyle">@style/MySerachView</item>
</style>
<style name="MySerachView" parent="Widget.AppCompat.SearchView"/>
</resources>
2、如果需要修改标题和副标题的字体大小、颜色、可以调用
setTitleTextColor 、 setTitleTextAppearance 、 setSubtitleTextColor 、 setSubtitleTextAppearance 这些API;
3、如果需要自定义View可以在 android.support.v7.widget.Toolbar 控件的布局中嵌入自定义布局,需要注意这里的自定义布局位于title 、 subtitle 和 actionmenu 之间,这意味着,如果 title 和 subtitle 都在,且 actionmenu选项 太多的时候,留给自定义View的空间就越小;
对Toolbar的讲解就此为止,后续在学习研究中继续补充。(*^__^*) 嘻嘻……。